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

昊漫玉

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

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

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



    class Store
{
///
/// 商品编号
///
public int Id { get; set; }
///
/// 商品图片路径
        ///
public string ImgPath { get; set; }
}
　　
　　xaml页加入一个FlipView控件：







                                    




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



fvStore.ItemsSource = new List {
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代码：





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



private void spIndex(int imgCount)
{
//默认第一个索引按钮是黑色
      List storeImgs = new List() {
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.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 != sender && myLock)
         {
             index++;
          }
          else
          {
             myLock = false;
          }
       }
       fvStore.SelectedIndex = index; //设置FlipView显示对应的图片
}

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




        ///
/// FlipView选择时修改索引条的外观
///
///
///
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例子就搞定了，谢谢您的阅读 ^_^~  。