(二) win8+XAML Binding(数据绑定)

第一次接触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));

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