Flipview with index entries in Windows Store app

When flipview is used during Windows 8 Development, flipview is swiped by the simulator. If you select the mouse mode, the left and right arrows can be displayed. However, when you change to the touch mode, you will find that the arrows sliding left and right are gone. The user may not know that it is slide. Therefore, if you want to add an index entry below the flipview, you will be able to slide and touch it here, and add the automatic switch function to facilitate user operations.

The effect is as follows:

First, add a class that inherits from flipview.

1 public class MyFilpView : FlipView

Now that you want to add index entries, You need to place them in a container below. stackpanel is used here to fix stackpanel at the bottom of flipview. We will add an index to stackpanel, we know that the number of indexes is determined by the number of items in flipview, so we only need to add the number of indexes based on the number of items. The code for producing stackpanel is as follows:

 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 }

Here, the border embedded small border mode is used to facilitate users to click the index to switch, and add touch events for each 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 }

When the user slides flipview, we also need to switch the index, So we add the selectionchanged event in onapplytemplate.

 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 }

Source code download