UWP GridViewItem 显示类名

Question

我想在 UWP 中实现一个 GridView，每个 Item 包含一个 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，并将其作为 GridView 的 ItemSource。

Answer 1

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

您需要为资源使用 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 provided by the platform and there's a good overview of these scenarios and the issue you ran into on the official docs page for binding。

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

UWP GridViewItem 显示类名

UWP GridViewItem shows Classname

c#

xaml

gridview

datatemplate

uwp