Windows Store App之带索引条的FlipView

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

效果如下：

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

public class MyFilpView : FlipView

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

 private void InitSliderBackground()
{    
    grid = VisualTreeHelper.GetChild(this, 0) as Grid;
        stackPanel = new StackPanel();
    stackPanel.Width = this.Width;
    stackPanel.Height = SliderBackgroundHeight;
    stackPanel.Background = new SolidColorBrush(BottomBackground);
    stackPanel.Opacity = SliderBackgroundOpacity;
    stackPanel.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Bottom;
    stackPanel.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Right;
    stackPanel.Orientation = Orientation.Horizontal;

    for (int i = 0; i < this.Items.Count; i++)
    {
                Border b = GetBorder();
                stackPanel.Children.Add(b);
                //listBorder.Add(b);
    }
    grid.Children.Add(stackPanel);
    ((stackPanel.Children[0] as Border).Child as Border).Background = new SolidColorBrush(BottomSelectedColor);

    if (AutoChange)
    {    
        _timer = new DispatcherTimer();
                _timer.Tick += _timer_Tick;
                _timer.Interval = TimeSpan.FromSeconds(3);
                _timer.Start();
    }
}

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

private Border GetBorder()
{
    Border border = new Border() { Width = 50, Height = 40, Background = stackPanel.Background, VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Center };
    Border border2 = new Border() { HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Center, VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Center, Width = 40, Height = 10, Background = new SolidColorBrush(BottomUnselectedColor) };
    border.Tapped += border_Tapped;
    border.Child = border2;
    return border; 
}

 void border_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
{    
    Border border = sender as Border;

    foreach (Border item in stackPanel.Children)        
    {
        (item.Child as Border).Background = new SolidColorBrush(BottomUnselectedColor);
    }

    (border.Child as Border).Background = new SolidColorBrush(BottomSelectedColor);

    int index = stackPanel.Children.IndexOf(sender as Border);
    //int index = listBorder.IndexOf(sender as Border);
    this.SelectedIndex = index;
}

void _timer_Tick(object sender, object e)
{    
    if (this.SelectedIndex == this.Items.Count - 1)
    {
        this.SelectedIndex = 0;
    }
    else
    {
        this.SelectedIndex = this.SelectedIndex + 1;
    }
}

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

void MyFilpView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{    
    if (isShow == false)
    {
                return;
    }
    foreach (Border item in stackPanel.Children)
    {
                (item.Child as Border).Background = new SolidColorBrush(BottomUnselectedColor);
    }

    ((stackPanel.Children[this.SelectedIndex] as Border).Child as Border).Background = new SolidColorBrush(BottomSelectedColor);
}

源码下载