一、《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例子就搞定了，謝謝您的閱讀 ^_^~  。