Question

我想在UWP中实施GridView，每个项目包含TextBlock，Checkbox和两个ComboBox。我目前得到的是GridViewItem的Classname instad。我认为这可以通过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; }
}

在构造函数中，我在GridViewItem中创建了一个示例ObservableCollection，并将其作为ItemSource的{{1}}。

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上遇到的问题有一个很好的概述。< / p>

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

UWP GridViewItem显示Classname

1 个答案: