win8+XAML Binding(数据绑定)

第一次接触Binding是用到listview的时候，ListView中如果要动态显示一些内容，我一开始想的就是动态生成一个item，然后插入。。。

其实用Binding就不用在代码中涉及listview的一些控件的操作了。

下面是我用ListView显示图片的一个例子：

[html] view plaincopyprint?

1. <ListView x:Name="ImageList" ">  
2.                     <ListView.ItemTemplate >  
3.                         <DataTemplate>  
4.                             <Image Opacity="0.7" Width="150" Height="125" Stretch="UniformToFill" Source="{Binding}" />  
5.                         </DataTemplate>  
6.                     </ListView.ItemTemplate>  
7. </ListView>  

在Image中定义了Source=“Binding”以后，我们在代码中需要定义一个ObservableCollection对象，这个对象是专门来同步绑定GridView，ListView这些控件的。

[csharp] view plaincopyprint?

1. this.collImages = new ObservableCollection<BitmapImage>();  
2. this.ImageList.ItemsSource = collImages;  

就这么简单，后面就只要在collImages中插入图片就可以了。

 

但是，问题是：我如果想一个item既包含图片又包含图片相关的文字。如何进行数据的绑定呢？

仔细看看上面ObservableCollection对象，就像数组一样定义了类型，上面我定义的时BitmapImage类型；如果写成string型，那么关联的就是一些文字对象了。

所以只要自己写一个类，包含图片和文字的属性，定义这样的一个类型实现数据绑定就可以了：

[csharp] view plaincopyprint?

1. /// <summary>  
2.     /// A class that can be used to bind data containing text and image.  
3.     /// </summary>  
4.     public class MyListViewData  
5.     {  
6.         public BitmapImage bitImg  { get; set; }  
7.         public string strName { get; set; }  
8.   
9.         public MyListViewData(BitmapImage img, string name)  
10.         {  
11.             bitImg = img;  
12.             strName = name;  
13.         }  
14.     }  

在绑定的时候，也要说明一下，在Image和TextBlock中分别Binding的是bitImg和strName：

[html] view plaincopyprint?

1. <ListView x:Name="ImageList" ">  
2.                 <ListView.ItemTemplate >  
3.                     <DataTemplate>  
4.                         <StackPanel Width="100" Height="100">  
5.                             <Image Opacity="0.7"  Source="{Binding bitImg}" />  
6.                             <TextBlock Height="25" Text="{Binding strName}"  />  
7.                         </StackPanel>  
8.                     </DataTemplate>  
9.                 </ListView.ItemTemplate>  
10. </ListView>  

接下来就是定义一个ObservationCollection对象，就可以动态绑定了

[csharp] view plaincopyprint?

1. ObservableCollection<MyListViewData> listViewData = new ObservableCollection<MyListViewData>();  
2.   
3. this.ImageList.ItemsSource = pMainPage.listViewData;  
4.   
5. listViewData.Add(new MyListViewData(videoImg, file.Name));  

好的，下面是一个效果图：