第一次接触Binding是用到listview的时候,ListView中如果要动态显示一些内容,我一开始想的就是动态生成一个item,然后插入。。。
其实用Binding就不用在代码中涉及listview的一些控件的操作了。
下面是我用ListView显示图片的一个例子:
- <ListView x:Name="ImageList" ">
- <ListView.ItemTemplate >
- <DataTemplate>
- <Image Opacity="0.7" Width="150" Height="125" Stretch="UniformToFill" Source="{Binding}" />
- </DataTemplate>
- </ListView.ItemTemplate>
- </ListView>
在Image中定义了Source=“Binding”以后,我们在代码中需要定义一个ObservableCollection对象,这个对象是专门来同步绑定GridView,ListView这些控件的。
- this.collImages = new ObservableCollection<BitmapImage>();
- this.ImageList.ItemsSource = collImages;
就这么简单,后面就只要在collImages中插入图片就可以了。
但是,问题是:我如果想一个item既包含图片又包含图片相关的文字。如何进行数据的绑定呢?
仔细看看上面ObservableCollection对象,就像数组一样定义了类型,上面我定义的时BitmapImage类型;如果写成string型,那么关联的就是一些文字对象了。
所以只要自己写一个类,包含图片和文字的属性,定义这样的一个类型实现数据绑定就可以了:
- /// <summary>
- /// A class that can be used to bind data containing text and image.
- /// </summary>
- public class MyListViewData
- {
- public BitmapImage bitImg { get; set; }
- public string strName { get; set; }
- public MyListViewData(BitmapImage img, string name)
- {
- bitImg = img;
- strName = name;
- }
- }
在绑定的时候,也要说明一下,在Image和TextBlock中分别Binding的是bitImg和strName:
- <ListView x:Name="ImageList" ">
- <ListView.ItemTemplate >
- <DataTemplate>
- <StackPanel Width="100" Height="100">
- <Image Opacity="0.7" Source="{Binding bitImg}" />
- <TextBlock Height="25" Text="{Binding strName}" />
- </StackPanel>
- </DataTemplate>
- </ListView.ItemTemplate>
- </ListView>
接下来就是定义一个ObservationCollection对象,就可以动态绑定了
- ObservableCollection<MyListViewData> listViewData = new ObservableCollection<MyListViewData>();
- this.ImageList.ItemsSource = pMainPage.listViewData;
- listViewData.Add(new MyListViewData(videoImg, file.Name));
好的,下面是一个效果图: