【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的朋友们！@_@

 下篇文章将会写到动画和异步编程。