深圳政协委员钟帆飞诈骗30亿

主持正义

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

听说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例子就搞定了,谢谢您的阅读 ^_^~  。

 

posted on 2012-10-18 14:09  jayce80  阅读(4132)  评论(11编辑  收藏  举报