【Win8】-- 数据绑定&自定义转换
数据绑定（接口里面也可以定义事件）
1、
（1）简单的绑定和wp7/wp8类似（这里不再写了，很相似的，请参考）
随机生成5位数据的代码：
dog.Name=Guid.NewGuid().ToString().Substring(0,5);
（2）选择模式
将LictView中的对勾去掉：<ListView SelectionMode="None" ...> 单一：Single 多选：Multiple
（3）IList<object> objs=lv1.SelectedItems; //对象为选中项的数据上下文
（4）IsItemClickedEnabled
//首先设置 IsItemClickEnabled="True" ，启用ItemClick事件，然后监听ItemClick事件，e.ClickedItem为点击那一项的DataContext Person p= e.ClickItem as Person; MessageDialog mdialog = new MessageDialog(p.Name); mdialog.ShowAsync(); //对话框显示的异步操作
（5）在集合中添加元素（绑定到ListView中）
需要用到 ObservableCollection<> 泛型，在Using System.Collections.ObjectModl 命名空间下，除了数据绑定以外，一般其他的集合用 List<> 就ok了，
// private List<string> ls=new List<string>(); ObservableCollection<string> ls = new ObservableCollection<string>(); protected override void OnNavigatedTo(NavigationEventArgs e) { if (e.NavigationMode== NavigationMode.New) { ls.Add("kefira"); ls.Add("kk"); lv.ItemsSource = ls; //数据绑定到ListView中时，显示数据只需要写出该行代码即可，但是也有人在xaml中修改ListView的属性为 ItemSource={Binding}， // 然后写入后台代码 lv.DataContent=ls;效果是一样的，意义也是一样的，多此一举而已嘛 } } private void Button_Click_1(object sender, RoutedEventArgs e) { ls.Add(DateTime.Now.Millisecond.ToString()); }
运行结果如图：
2、自定义转换
ComboBox -- 下拉列表框 PlipView -- 左右选择显示 以及 自定义转换
转换器的一般命名规则：XX--XX转换器（例如UI到Model，BoolVisibilityConverter）
示例：判断该国家是否是联合国，是的话显示联合国图片，不是则不显示
<1>定义一个CountryInfo类
using System.ComponentModel; namespace _1自定义转换 { public class CountryInfo:INotifyPropertyChanged //别忘了引入命名空间System.ComponentModel { private void FirePropertyChanged(string propName) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propName)); } } private string _name; public string Name { get { return _name; } set { _name = value; FirePropertyChanged("Name"); } } private string _ImagePath; public string ImagePath { get { return _ImagePath; } set { _ImagePath = value; FirePropertyChanged("ImagePath"); } } private bool _isUnNum; //判断是否是联合国成员 public bool IsUnNum { get { return _isUnNum; } set { _isUnNum = value; FirePropertyChanged("IsUnNum"); } } public event PropertyChangedEventHandler PropertyChanged; } }
<2>设计MainPage.xaml界面： （先把照片放到Image文件夹下）
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <ComboBox x:Name="combCountry" HorizontalAlignment="Left" Margin="54,81,0,0" VerticalAlignment="Top" Width="387" Height="71"> <ComboBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <Image Source="{Binding ImagePath}" Height="50" Width="50" /> <TextBlock Name="{Binding Name}" /> </StackPanel> </DataTemplate> </ComboBox.ItemTemplate> </ComboBox> <FlipView x:Name="fvCountry" HorizontalAlignment="Left" Margin="354,270,0,0" VerticalAlignment="Top" Width="610" Height="315"> <FlipView.ItemTemplate> <DataTemplate> <Grid Background="Blue"> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Image Source="{Binding ImagePath}" Grid.RowSpan="2"></Image> <Image Source="ms-appx:///Image/4.png" Height="70" Width="70" Visibility="{Binding IsUnNum}"/> //在定义的时候IsNuNum是bool类 型的，而在这里转换成了枚举类型 </Grid></DataTemplate> </FlipView.ItemTemplate> </FlipView> </Grid>
<3>代码实现：
protected override void OnNavigatedTo(NavigationEventArgs e) { if (e.NavigationMode== NavigationMode.New) { List<CountryInfo> listCountry = new List<CountryInfo> (); listCountry.Add(new CountryInfo { Name = "中国" , ImagePath="ms-appx:///Image/1.png" ,IsNuNum = true}); listCountry.Add(new CountryInfo { Name = "日本" , ImagePath="ms-appx:///Image/2.png" ,IsNuNum = false}); listCountry.Add(new CountryInfo { Name = "美国" , ImagePath="ms-appx:///Image/3.png" ,IsNuNum = true}); combCountry.ItemsSource = listCountry; //Itemsource继承于ItemTemplate } }
马上运行了下，却发现 “日本” 也被判定成了是联合国的成员（因为联合国的图片4.png也显示了出来），这里，我们就必须要自定义转换了（这才是重点）。
<4>首先需要定义转换器的类BoolVisibilityConverter，转换器要实现IValueConverter接口
using Windows.UI.Xaml; using Windows.UI.Xaml.Data; namespace _1自定义转换.Common { public class BoolVisibilityConverter : IValueConverter //IvalueConverter的命名空间为Windows.UI.Xaml.Data; { object IValueConverter.Convert(object value, Type targetType, object parameter, string language) { //这里的value是Model中的 数据，返回值是转换后UI中的数据 bool b = (bool)value; return b ? Visibility.Visible : Visibility.Collapsed; } //如果数据绑定是TwoWay形式的，那么还需要实现该ConvertBack object IValueConverter.ConvertBack(object value, Type targetType, object parameter, string language) { Visibility v = (Visibility)value; //Visibility的命名空间为 Windows.UI.Xaml; return v == Visibility.Visible; } } }
########解释下：
Convert方法用于把绑定模型的属性类型转换为被绑定UI元素的数据类型，value为转换前数据，把转换后数据以返回值形式返回。
ConvertBack方法用于当TwoWay绑定的时候UI值发生变化方向修改Model属性值的时候做转换的。
<5>然后再转到MainPage.xaml中设计
首先添加命名空间： xmlns:common="using:_1自定义转换.Common" //common是随意的命名
然后定义资源：
<Page.Resources>
<common:BoolVisibilityConverter x:Key="boolVisConverter"></common:BoolVisibilityConverter>
</Page.Resources>
最后，在定义的 “联合国图片4.png” 的 Image 标签下的 Visibility 属性中再加上：Converter={StaticResource boolVisConverter}
ok，自定义的转换完成，运行程序。如下图：（当底下图片转换到 “中国” 或 “美国” 时，联合国的照片显示；但底下图片是 “日本” 时，联合国的图片不显示）
---后记：这节是数据绑定和自定义转换的简单练习，依旧来自于传智播客视频的学习，分享给同样爱好win8的朋友们！@_@
下篇文章将会写到动画和异步编程。
