数据绑定
数据绑定 UWP
每个绑定均由一个绑定目标和一个绑定源构成。 通常，绑定目标是控件或其他 UI 元素的属性，而绑定源是类实例（数据模型或视图模型）的属性。 本示例演示了如何将控件绑定到单个项目。 绑定目标是 TextBlock 的 Text 属性。 绑定源是一个名为 Recording 的简单类的实例，该类表示音频录制。 我们先来看一下类。
namespace Quickstart
{
public class Recording
{
public string ArtistName { get; set; }
public string CompositionName { get; set; }
public DateTime ReleaseDateTime { get; set; }
public Recording()
{
this.ArtistName = "Wolfgang Amadeus Mozart";
this.CompositionName = "Andante in C for Piano";
this.ReleaseDateTime = new DateTime(1761, 1, 1);
}
public string OneLineSummary
{
get
{
return $"{this.CompositionName} by {this.ArtistName}, released: "
+ this.ReleaseDateTime.ToString("d");
}
}
}
public class RecordingViewModel
{
private Recording defaultRecording = new Recording();
public Recording DefaultRecording { get { return this.defaultRecording; } }
}
}
接下来，从表示标记页的类公开绑定源类。 我们通过将类型 RecordingViewModel 的属性添加到 MainPage 来执行此操作。
namespace Quickstart
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
this.ViewModel = new RecordingViewModel();
}
public RecordingViewModel ViewModel{ get; set; }
}
}
最后一步是将 TextBlock 绑定到 ViewModel.DefaultRecording.OneLiner 属性。
<Page x:Class="Quickstart.MainPage" ... >
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock Text="{x:Bind ViewModel.DefaultRecording.OneLineSummary}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
</Page>
绑定到项目集合
一个常见情形是绑定到业务对象的集合。 在 C# 和 Visual Basic 中，通用 ObservableCollection 类是数据绑定的一个很好的集合选择，因为它实现了 INotifyPropertyChanged 和 INotifyCollectionChanged 接口。 当添加或删除项目或者列表本身的属性更改时，这些接口将向绑定提供更改通知。 如果你希望你的绑定控件使用集合中的对象属性更改进行更新，则业务对象也应该实现 INotifyPropertyChanged。
下面这个示例演示了将 ListView 绑定到 Recording 对象的集合。 让我们先将该集合添加到视图模型。 只需将这些新成员添加到 RecordingViewModel 类。
public class RecordingViewModel
{
...
private ObservableCollection<Recording> recordings = new ObservableCollection<Recording>();
public ObservableCollection<Recording> Recordings{ get{ return this.recordings; } }
public RecordingViewModel()
{
this.recordings.Add(new Recording(){ ArtistName = "Johann Sebastian Bach",
CompositionName = "Mass in B minor", ReleaseDateTime = new DateTime(1748, 7, 8) });
this.recordings.Add(new Recording(){ ArtistName = "Ludwig van Beethoven",
CompositionName = "Third Symphony", ReleaseDateTime = new DateTime(1805, 2, 11) });
this.recordings.Add(new Recording(){ ArtistName = "George Frideric Handel",
CompositionName = "Serse", ReleaseDateTime = new DateTime(1737, 12, 3) });
}
}
然后，将 ListView 绑定到 ViewModel.Recordings 属性。
<Page x:Class="Quickstart.MainPage" ... >
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView ItemsSource="{x:Bind ViewModel.Recordings}"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Page>
我们尚未提供适用于 Recording 类的数据模板，因此 UI 框架的最佳做法是针对 ListView 中的每个项来调用 ToString。 ToString 的默认实现是返回类型名称。
为了解决此问题，我们可以重写 ToString 以返回 OneLineSummary 的值，或者提供一个数据模板 。 数据模板选项是更为常见的解决方案，并且是一个更灵活的解决方案。 使用内容控件的 ContentTemplate 属性或项目控件的 ItemTemplate 属性来指定数据模板。 下面是可用于设计适用于 Recording 的数据模板以及结果图示的两种方式。
<ListView ItemsSource="{x:Bind ViewModel.Recordings}"
HorizontalAlignment="Center" VerticalAlignment="Center">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:Recording">
<TextBlock Text="{x:Bind OneLineSummary}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView ItemsSource="{x:Bind ViewModel.Recordings}"
HorizontalAlignment="Center" VerticalAlignment="Center">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:Recording">
<StackPanel Orientation="Horizontal" Margin="6">
<SymbolIcon Symbol="Audio" Margin="0,0,12,0"/>
<StackPanel>
<TextBlock Text="{x:Bind ArtistName}" FontWeight="Bold"/>
<TextBlock Text="{x:Bind CompositionName}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
添加详细信息视图
你可以选择在 ListView 项目中显示 Recording 对象的所有详细信息。 但这样做会占用大量空间。 不过，你可以在该项目中仅显示足够多的数据来标识它，然后在用户做出选择时，你可以在 UI 的单个部分（即，详细信息视图）中显示选定项的所有详细信息。 这种排列也称为主视图/详细信息视图或列表/详细信息视图。
有两种方法可用来执行此操作。 你可以将详细信息视图绑定到 ListView 的 SelectedItem 属性。 或者，可以使用 CollectionViewSource，在此种情况下将 ListView 和详细信息视图同时绑定到 CollectionViewSource（这将为你处理当前选定的项目） 。 下面介绍这两种技术，它们都提供相同结果（图中所示）。
首先介绍的是 SelectedItem 技术。
C#复制
// No code changes necessary for C#.
只需对标记进行更改。
XML复制
<Page x:Class="Quickstart.MainPage" ... >
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<ListView x:Name="recordingsListView" ItemsSource="{x:Bind ViewModel.Recordings}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:Recording">
<StackPanel Orientation="Horizontal" Margin="6">
<SymbolIcon Symbol="Audio" Margin="0,0,12,0"/>
<StackPanel>
<TextBlock Text="{x:Bind CompositionName}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackPanel DataContext="{Binding SelectedItem, ElementName=recordingsListView}"
Margin="0,24,0,0">
<TextBlock Text="{Binding ArtistName}"/>
<TextBlock Text="{Binding CompositionName}"/>
<TextBlock Text="{Binding ReleaseDateTime}"/>
</StackPanel>
</StackPanel>
</Grid>
</Page>
对于 CollectionViewSource 技术，先添加 CollectionViewSource 作为页面资源。
XML复制
<Page.Resources>
<CollectionViewSource x:Name="RecordingsCollection" Source="{x:Bind ViewModel.Recordings}"/>
</Page.Resources>
然后，在 ListView（无需再对其进行命名）和详细信息视图上调节绑定，以使用 CollectionViewSource。 请注意，如果将详细信息视图直接绑定到 CollectionViewSource，即表示你希望绑定到绑定中的当前项目，其中在集合本身上无法找到路径。 无需将 CurrentItem 属性指定为绑定路径，尽管由于不确定性你可以这样做）。
XML复制
...
<ListView ItemsSource="{Binding Source={StaticResource RecordingsCollection}}">
...
<StackPanel DataContext="{Binding Source={StaticResource RecordingsCollection}}" ...>
...
而在每种情况下结果均相同。
设置数据值的格式或对其进行转换，以供显示
以上呈现有一个问题。 ReleaseDateTime 属性不只是日期，而是日期时间（如果使用的是 C++，则为日历） 。 因此在 C# 中，它的显示精度比我们所需要的要大。 并且在 C++ 中，其呈现为类型名称。 解决方案是将字符串属性添加到返回 this.ReleaseDateTime.ToString("d") 等效项的 Recording 类 。 将该属性命名为 ReleaseDate 可指示它将返回一个日期，而不是返回日期和时间 。 将其命名为 ReleaseDateAsString 可进一步指示它将返回一个字符串。
public class StringFormatter : Windows.UI.Xaml.Data.IValueConverter
{
// This converts the value object to the string to display.
// This will work with most simple types.
public object Convert(object value, Type targetType,
object parameter, string language)
{
// Retrieve the format string and use it to format the value.
string formatString = parameter as string;
if (!string.IsNullOrEmpty(formatString))
{
return string.Format(formatString, value);
}
// If the format string is null or empty, simply
// call ToString() on the value.
return value.ToString();
}
// No need to implement converting back on a one-way binding
public object ConvertBack(object value, Type targetType,
object parameter, string language)
{
throw new NotImplementedException();
}
}
现在，我们可以将 StringFormatter 的实例添加为页面资源，并可在显示 ReleaseDateTime 属性的 TextBlock 的绑定中使用 。
XML复制
<Page.Resources>
<local:StringFormatter x:Key="StringFormatterValueConverter"/>
</Page.Resources>
...
<TextBlock Text="{Binding ReleaseDateTime,
Converter={StaticResource StringFormatterValueConverter},
ConverterParameter=Released: \{0:d\}}"/>
...
如上所示，为了格式设置灵活性，我们使用标记通过转换器参数将格式字符串传递到转换器。
