数据绑定 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\}}"/>
...

如上所示，为了格式设置灵活性，我们使用标记通过转换器参数将格式字符串传递到转换器。