11、DataBinding
数据绑定，依然去繁就简
1、数据绑定小示例：
当滑动 slider 的时候，动态改变文本框中的数据
代码：
<StackPanel Margin="5"> //实例化一个 Converter 对象 <StackPanel.Resources> <local:S2Formatter x:Key="GradeConverter"/> </StackPanel.Resources> <Slider x:Name="sliderValueConverter" Minimum="1" Maximum="100" Value="70" Margin="5"/> <TextBox x:Name="tbValueConverterDataBound" Text="{Binding ElementName=sliderValueConverter, Path=Value, Mode=OneWay, Converter={StaticResource GradeConverter}}" Margin="5" Width="150"/> </StackPanel>
public class S2Formatter : IValueConverter { //转化 slider 中的值为相应的等级 public object Convert(object value, System.Type type, object parameter, string language) { int _value; string _grade = string.Empty; //把值转化为 int 类型 if (Int32.TryParse(value.ToString(), out _value)) { if (_value < 50) _grade = "F"; else if (_value < 60) _grade = "D"; else if (_value < 70) _grade = "C"; else if (_value < 80) _grade = "B"; else if (_value < 90) _grade = "A"; else if (_value < 100) _grade = "A+"; else if (_value == 100) _grade = "SUPER STAR!"; } return _grade; } public object ConvertBack(object value, System.Type type, object parameter, string language) { throw new NotImplementedException(); } }
2、Indexers：
本示例展示 用数据绑定到集合中的固定数据，分别通过 集合的数组索引 和 集合的 字符串索引（键），显示在 UI 上。
结果：
<StackPanel x:Name="LayoutRoot"> <Border BorderBrush="LightBlue" BorderThickness="4" CornerRadius="20" Margin="5"> <StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="Team name:" Style="{StaticResource BasicTextStyle}" Margin="5" FontWeight="Bold"/> //绑定到集合中的第三个 Team 对象 的名字属性 <TextBlock Text="{Binding Path=[3].Name }" Style="{StaticResource BasicTextStyle}" Margin="5" />
</StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="Team manager:" Style="{StaticResource BasicTextStyle}" Margin="5" FontWeight="Bold"/> //绑定到数据源中的 键为 “Gaffer” 的对象上 <TextBlock Text="{Binding Path=[3][Gaffer]}" Style="{StaticResource BasicTextStyle}" Margin="5"/>
</StackPanel> </StackPanel> </Border> </StackPanel>
相应的 C# 代码：
//添加到页面的构造函数中 rootPage.DataContext = new Teams();
数据源 （同时也是 3、中的数据源）：
// Team 对象 public class Team //Has a custom string indexer { Dictionary<string, object> _propBag; public Team() { _propBag = new Dictionary<string, object>(); } public string Name { get; set; } public string City { get; set; } public SolidColorBrush Color { get; set; } // 用 C# 创建一个自定义的索引 public object this[string indexer] { get { return _propBag[indexer]; } set { _propBag[indexer] = value; } } public void Insert(string key, object value) { _propBag.Add(key, value); } } // 数据源 public class Teams : List<Team> { public Teams() { //数据集合 Add(new Team() { Name = "The Reds", City = "Liverpool", Color = new SolidColorBrush(Colors.Green) }); Add(new Team() { Name = "The Red Devils", City = "Manchester", Color = new SolidColorBrush(Colors.Yellow) }); Add(new Team() { Name = "The Blues", City = "London", Color = new SolidColorBrush(Colors.Orange) }); //索引为 3 的 Team 对象，并向对象的“字典”中添加两个 键值对 Team _t = new Team() { Name = "The Gunners", City = "London", Color = new SolidColorBrush(Colors.Red) }; _t["Gaffer"] = "le Professeur"; _t["Skipper"] = "Mr Gooner"; Add(_t); } }
3、CollectionViewSource：
本示例讲解如何在页面中使用 CollectionViewSource 对象，进行分组绑定数据。
如图：
页面的 xaml ：
<Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1"> <Grid> <Grid.Resources> //声明一个名叫“groupInfoCVS” 的 CollectionViewSource 对象 <CollectionViewSource x:Name="groupInfoCVS" IsSourceGrouped="true" ItemsPath="Items"/> </Grid.Resources> <ListView x:Name="lvGroupInfoCVS" ItemsSource="{Binding Source={StaticResource groupInfoCVS}}">//数据绑定到 groupInfoCVS <ListView.GroupStyle> <GroupStyle>
//分组的标题的模版
<GroupStyle.HeaderTemplate> <DataTemplate> <TextBlock Text="{Binding Key}" /> </DataTemplate> </GroupStyle.HeaderTemplate> </GroupStyle> </ListView.GroupStyle> //列表中每项数据的模版 <ListView.ItemTemplate> <DataTemplate> <Border Background="{Binding Color}" Width="200" CornerRadius="10" HorizontalAlignment="Left"> <TextBlock Text="{Binding Name}" Style="{StaticResource BasicTextStyle}"
HorizontalAlignment="Center" FontWeight="Bold"/> </Border> </DataTemplate> </ListView.ItemTemplate> </ListView> </Grid> </Grid>
在 C# 页面绑定到 xaml 页面的 groupInfoCVS 对象：
// 对 Teams 集合中的数据进行分组 // Teams 和 2、 中的是相同一个
Teams teams = new Teams(); var result = from t in teams group t by t.City into g orderby g.Key select new { Key = g.Key, Items = g }; ; groupInfoCVS.Source = result;
4、Collection changes：
本示例和 3、 基本相同，唯一不同的是把 3、 中的 Teams 集合添加到 继承了 INotifyCollectionChanged 接口的 ObservableCollection<Team> 泛型集合中
（方法： ObservableCollection<Team> ocTeams = new ObservableCollection<Team>(new Teams());），从而当删除泛型集合中的数据时， UI
上面的元素跟着动态删除。
上代码，不做过多解释：
页面的 xaml ：
<StackPanel>
<StackPanel.Resources>
<CollectionViewSource x:Name="teamsCVS"/>
</StackPanel.Resources>
<ListView x:Name="lvTeams" Height="200" ItemsSource="{Binding Source={StaticResource teamsCVS}}">
<ListView.ItemTemplate>
<DataTemplate>
<Border Background="{Binding Color}" Width="200" CornerRadius="10" HorizontalAlignment="Left">
<TextBlock Text="{Binding Name}" Style="{StaticResource BasicTextStyle}"
HorizontalAlignment="Center" FontWeight="Bold"/>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
//删除泛型集合中的数据
<Button x:Name="btnRemoveTeam" Content="Remove teamm" Click = BtnRemoveTeam_Click/>
//显示集合中对象的数目
<TextBlock x:Name="tbCollectionChangeStatus" Style="{StaticResource BasicTextStyle}"/>
</StackPanel>
private ObservableCollection<Team> ocTeams = new ObservableCollection<Team>(new Teams()); //页面构造函数 public Page1() { ocTeams.CollectionChanged += _ocTeams_CollectionChanged; teamsCVS.Source = ocTeams; } //删除选中的列表中的对象，获取该对象的 索引 然后删除泛型集合中的数据 void BtnRemoveTeam_Click(object sender, RoutedEventArgs e) { if (ocTeams.Count > 0) { int index=0; if (lvTeams.SelectedItem != null) index = lvTeams.SelectedIndex; ocTeams.RemoveAt(index); } } // 当泛型集合中的数据发生改变时，将集合中对象的数目显示在页面上 void _ocTeams_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e) { tbCollectionChangeStatus.Text = String.Format("Collection was changed. Count = {0}", ocTeams.Count); }
5、Incremental Loading：
代码量较多，直接看工程代码。