一、《Win8 Store 应用实例》 之 FlipView

听说Windows 8平板电脑，在苏宁已经接受预定了，那么优秀的你还不抓紧时间填补windows 8应用商店的空白吗？
目前许多已经上线的windows 8 购物客户端，基本都运用了FlipView+索引条做成下面的效果，因此我也想做一个这样的例子，方便以后使用。

我想在FlipView加上最下面的一行索引条小按钮，效果如图：

         

在网上找的例子都是使用css样式实现的，所以就想自己用C#+Xaml实现该效果。FlipView图片和下面的索引条小按钮进行绑定效果，当点击灰色图片之后它变成黑色图片，索引条其余小按钮变成灰色小圆图片，同时FilpView的当前显示图片也对应显示。当使用FlipView切换图片时，索引条图片也要进行对应修改，以展示当前是第几张图。

让我们开始吧：
首先，创建一个数据载体 商品类Store

    class Store
    {
        /// <summary>
        /// 商品编号
        /// </summary>
        public int Id { get; set; }
        /// <summary>
        /// 商品图片路径
        /// </summary>
        public string ImgPath { get; set; }
    }

 

xaml页加入一个FlipView控件：

<FlipView x:Name="fvStore" SelectionChanged="fvStore_SelectionChanged_1">
     <FlipView.ItemTemplate>
         <DataTemplate>
             <Grid>
                <Image Source="{Binding ImgPath}"  Stretch="Fill"/>                                    
             </Grid>
         </DataTemplate>
     </FlipView.ItemTemplate>
 </FlipView>

给fvStore绑定数据，让其显示商品图片：

fvStore.ItemsSource = new List<Store> {
                    new Store{ Id = 0, ImgPath = "Resources/StoreInfo/info_0.jpg"},
                    new Store{ Id = 1, ImgPath = "Resources/StoreInfo/info_1.jpg"},
                    new Store{ Id = 2, ImgPath = "Resources/StoreInfo/info_2.jpg"},
                    new Store{ Id = 3, ImgPath = "Resources/StoreInfo/info_3.jpg"},
                    new Store{ Id = 4, ImgPath = "Resources/StoreInfo/info_4.jpg"},
                    new Store{ Id = 5, ImgPath = "Resources/StoreInfo/info_5.jpg"}
                };

这样FlipView控件就完成了，但是如何实现索引条？
我尝试了ListView控件做成一个索引条，因为ListView里面的选中项索引可以和FlipView选中项索引进行绑定，很方便。但是由于ListView有它的默认的效果，如鼠标在某一项的图片上时，会有周围灰色的框框，比较大，不好控制，不如没有效果的好看。
因此我想尝试使用StackPanel容器，里面放几张小圆点图片，横排，具体位置，你可以微调下，使它放在FlipView图片上面的底部：
xaml代码：

<StackPanel x:Name="sp1" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,10">
</StackPanel>

后台代码：给sp1添加原点图片子元素，因为载入的商品的展示图片的数量可能是不同的，因此我写一个方法，传入参数 imgCount:

private void spIndex(int imgCount)
{
      //默认第一个索引按钮是黑色
      List<Store> storeImgs = new List<Store>() { 
           new Store{ Id = 0, ImgPath = "ms-appx:///Resources/StoreInfo/point_Black.jpg"}
      };
      //有几张展示图片，就再添加imgCount - 1个灰色小按钮
      for (int i = 1; i < imgCount; i++)
      {
           storeImgs.Add(new Store { Id = i, ImgPath = "ms-appx:///Resources/StoreInfo/point_Gray.jpg" });
      }
      for (int i = 0; i < storeImgs.Count; i++)
      {
            Image img = new Image() { Source = new BitmapImage(new Uri(storeImgs[i].ImgPath)), Width = 16, Height = 16, Margin = new Thickness { Right = 5 } };
            img.Tapped += img_Tapped;
            sp1.Children.Add(img);
      }
}

 void img_Tapped(object sender, TappedRoutedEventArgs e)
 {
        //设置索引条图像
       foreach (Image img in sp1.Children)
       {
          img.Source = new BitmapImage(new Uri("ms-appx:///Resources/StoreInfo/point_Gray.jpg"));
       } 
       //当前点击的索引项变成黑色圆
       (sender as Image).Source = new BitmapImage(new Uri("ms-appx:///Resources/StoreInfo/point_Black.jpg"));
       //设置FilpView索引
       bool myLock = true; //设置一个锁，每次进行以下循环的时候都使index++，当循环到点击的项时加锁，不再进行index++，因此循环结束后index就是FlipView当前应该显示的图片的索引
       int index = 0;
       for (int i = 0; i < sp1.Children.Count; i++)
       {
         if (sp1.Children[i] != sender && myLock)
         {
             index++;
          }
          else
          {
             myLock = false;
          }
       }
       fvStore.SelectedIndex = index; //设置FlipView显示对应的图片
}

经过上面对索引条的设置，还需要设置一下FlipView，当使用的FlipView进行图片切换时，索引条也要进行改变，显示当前是几张图：

        /// <summary>
        /// FlipView选择时修改索引条的外观
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void fvStore_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
        {
            int i = 0;
            foreach (Image img in sp1.Children)
            {
                if (i == fvStore.SelectedIndex)
                {
                    img.Source = new BitmapImage(new Uri("ms-appx:///Resources/StoreInfo/point_Black.jpg"));
                }
                else
                {
                    img.Source = new BitmapImage(new Uri("ms-appx:///Resources/StoreInfo/point_Gray.jpg"));
                }
                i++;
            }
        }

 

至此，一个完整的FlipView例子就搞定了，谢谢您的阅读 ^_^~  。