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     else33     {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 }

源碼下載