UWP GridViewItem 显示类名

Question

我想在 UWP 中实现一个GridView，每个项目包含一个TextBlock、Checkbox 和两个ComboBox。 我现在得到的是GridViewItem 的类名。 我认为这可以通过DataTemplate 解决？

Xaml 文件：

<Page.Resources>
    <DataTemplate x:Name="CameraSettingsGridViewTemplate" x:DataType="local:CameraSetting">
        <GridViewItem>
            <StackPanel>
                <TextBlock Text="{x:Bind Property}"/>
                <CheckBox/>
                <ComboBox ItemsSource="{x:Bind Value1}"/>
                <ComboBox ItemsSource="{x:Bind Value2}"/>
            </StackPanel>
        </GridViewItem>
    </DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <GridView Name="CameraSettings" HorizontalAlignment="Left" VerticalAlignment="Top" ItemsSource="{x:Bind CameraSettingsList}"></GridView>
</Grid>

DataTemplate 是解决问题的尝试。

CS 文件：

  public sealed partial class CameraSettingsPage : Page {
    private ObservableCollection<CameraSetting> cameraSettingsList = new ObservableCollection<CameraSetting>();
    public ObservableCollection<CameraSetting> CameraSettingsList { get { return this.cameraSettingsList; } }
    public CameraSettingsPage() {
        this.InitializeComponent();
        this.cameraSettingsList = new ObservableCollection<CameraSetting>() {
            new CameraSetting() {
                Property = "prop1",
                Auto = new CheckBox(),
                Value1 = new ComboBox() { ItemsSource = new ObservableCollection<string>() { "1", "2" } },
                Value2 = new ComboBox() { ItemsSource = new ObservableCollection<string>() { "a", "b" } }
            }
        };
    }

    private void Page_Loaded(object sender, RoutedEventArgs e) {
    }
}

public class CameraSetting {
    public string Property { get; set; }
    public CheckBox Auto { get; set; }
    public ComboBox Value1 { get; set; }
    public ComboBox Value2 { get; set; }
}

在构造函数中，我在ObservableCollection 中创建了一个示例GridViewItem，并将其作为ItemSource 用于GridView。

Answer 1

这里发生了一些事情。首先，GridView 显示了类的名称，因为它实际上并未使用您尝试设置的数据模板。

您需要为资源使用x:Key 而不是x:Name，然后将该资源设置为GridView 的ItemTemplate 属性：

<Page.Resources>
    <DataTemplate x:Key="CameraSettingsGridViewTemplate" x:DataType="local:CameraSetting">
        <GridViewItem>
            <StackPanel>
                <TextBlock Text="{x:Bind Property}"/>
                <CheckBox IsChecked="{x:Bind Auto}"/>
                <ComboBox ItemsSource="{x:Bind Value1}"/>
                <ComboBox ItemsSource="{x:Bind Value2}"/>
            </StackPanel>
        </GridViewItem>
    </DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <GridView Name="CameraSettings" HorizontalAlignment="Left" VerticalAlignment="Top" ItemsSource="{x:Bind CameraSettingsList}" ItemTemplate="{StaticResource CameraSettingsGridViewTemplate}"></GridView>
</Grid>

第二个问题是您没有在数据模型中重新创建控件。绑定和模板的重点是您可以在模型中拥有基本类型（如字符串选项值和布尔值），然后将它们绑定到操作它们的 UI 元素。所以你的数据模型应该更像这样：

public class CameraSetting
{
    public string Property { get; set; }
    public bool Auto { get; set; }
    public List<string> Value1 { get; set; }
    public List<string> Value2 { get; set; }
}

然后就可以填写了，和之前的类似：

    public ObservableCollection<CameraSetting> CameraSettingsList { get; set; } = new ObservableCollection<CameraSetting>();

    public MainPage()
    {
        this.InitializeComponent();

        this.CameraSettingsList.Add(new CameraSetting()
        {
            Property = "prop1",
            Auto = true,
            Value1 = new List<string>() { "Option 1", "Option 2" },
            Value2 = new List<string>() { "Option 3", "Option 4" },
        });
    }

我建议您查看平台提供的一些Binding Samples，并在官方docs page for binding 上对这些场景和您遇到的问题进行了很好的概述。

请记住，如果您希望您的数据在模型更改时更新或在用户更改时反映回您的模型，您需要在 x:Bind 表达式中添加 Mode=OneWay 或 Mode=TwoWay。