Windows Store App之带索引条的FlipView

　　在Windows8开发过程中，使用FlipView时，使用模拟器滑动FlipView，如果选择鼠标模式，是可以显示左右的箭头。但是换成触摸模式时，会发现左右滑动的箭头没有了。用户可能不知道此处是可以滑动的。所以想到在FlipView下方加上索引条，让用户感觉得到此处是可以进行滑动触摸的，并加上自动切换功能，更方便用户操作。

效果如下：

首先添加一个类，继承自FlipView

1 public class MyFilpView : FlipView

既然是要添加索引条，下方需要一个容器放置他们，此处我们采用StackPanel,把StackPanel固定在FlipView的底部,我们给StackPanel添加索引，我们知道索引个数是由FlipView中存在多少项决定的，所以我们只要根据Items的个数添加就可以了。下面是生产StackPanel的代码

 1  private void InitSliderBackground()
 2 {    
 3     grid = VisualTreeHelper.GetChild(this, 0) as Grid;
 4         stackPanel = new StackPanel();
 5     stackPanel.Width = this.Width;
 6     stackPanel.Height = SliderBackgroundHeight;
 7     stackPanel.Background = new SolidColorBrush(BottomBackground);
 8     stackPanel.Opacity = SliderBackgroundOpacity;
 9     stackPanel.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Bottom;
10     stackPanel.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Right;
11     stackPanel.Orientation = Orientation.Horizontal;
12 
13     for (int i = 0; i < this.Items.Count; i++)
14     {
15                 Border b = GetBorder();
16                 stackPanel.Children.Add(b);
17                 //listBorder.Add(b);
18     }
19     grid.Children.Add(stackPanel);
20     ((stackPanel.Children[0] as Border).Child as Border).Background = new SolidColorBrush(BottomSelectedColor);
21 
22     if (AutoChange)
23     {    
24         _timer = new DispatcherTimer();
25                 _timer.Tick += _timer_Tick;
26                 _timer.Interval = TimeSpan.FromSeconds(3);
27                 _timer.Start();
28     }
29 }

这里采用Border内嵌小Border模式，方便用户点击索引进行切换,为每个Border添加触摸事件

 1 private Border GetBorder()
 2 {
 3     Border border = new Border() { Width = 50, Height = 40, Background = stackPanel.Background, VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Center };
 4     Border border2 = new Border() { HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Center, VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Center, Width = 40, Height = 10, Background = new SolidColorBrush(BottomUnselectedColor) };
 5     border.Tapped += border_Tapped;
 6     border.Child = border2;
 7     return border; 
 8 }
 9 
10  void border_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
11 {    
12     Border border = sender as Border;
13 
14     foreach (Border item in stackPanel.Children)        
15     {
16         (item.Child as Border).Background = new SolidColorBrush(BottomUnselectedColor);
17     }
18 
19     (border.Child as Border).Background = new SolidColorBrush(BottomSelectedColor);
20 
21     int index = stackPanel.Children.IndexOf(sender as Border);
22     //int index = listBorder.IndexOf(sender as Border);
23     this.SelectedIndex = index;
24 }
25 
26 void _timer_Tick(object sender, object e)
27 {    
28     if (this.SelectedIndex == this.Items.Count - 1)
29     {
30         this.SelectedIndex = 0;
31     }
32     else
33     {
34         this.SelectedIndex = this.SelectedIndex + 1;
35     }
36 }

在用户滑动FlipView时，我们也要对索引进行切换，所以在OnApplyTemplate添加SelectionChanged事件。

 1 void MyFilpView_SelectionChanged(object sender, SelectionChangedEventArgs e)
 2 {    
 3     if (isShow == false)
 4     {
 5                 return;
 6     }
 7     foreach (Border item in stackPanel.Children)
 8     {
 9                 (item.Child as Border).Background = new SolidColorBrush(BottomUnselectedColor);
10     }
11 
12     ((stackPanel.Children[this.SelectedIndex] as Border).Child as Border).Background = new SolidColorBrush(BottomSelectedColor);
13 }

源码下载

转载于:https://www.cnblogs.com/betterchaner/archive/2013/02/01/2888789.html