为 gridview 数据模板设置 x:dataType

Question

我有一个GridView

<GridView ItemsSource="{x:Bind ViewModel.SoundEffects}">
    <GridView.ItemTemplate>
        <DataTemplate x:dataType="?">
            <Button Style="{StaticResource defaultButton}"
                    Content="{Binding Name}"
                    Tag="{Binding FileName}"
                    Command="{x:Bind ViewModel.PlayCommand}"
                    CommandParameter="{Binding FileName}"/>
        </DataTemplate>
    </GridView.ItemTemplate>

每当我尝试编译它时，它都会说我需要指定一个模型，但是当我尝试创建一个接口时，我不知道如何制作包含 ViewModel 定义的模型：

public interface ISoundEffectButton 
{ 
    string Name { get; } 
    string FileName { get; } 
    ViewModels.MainPageViewModel ViewModel { get; } 
}

但这没有用，导致整个调试器崩溃。

感谢您的宝贵时间。

Answer 1

Inside a DataTemplate (whether used as an item template, a content template, or a header template), the value of Path is not interpreted in the context of the page, but in the context of the data object being templated. So that its bindings can be validated (and efficient code generated for them) at compile-time, a DataTemplate needs to declare the type of its data object using x:DataType.

所以首先，你需要让你的模型像这样：

public class SoundEffectButton 
{ 
    public string Name { get; set;} 
    public string FileName { get; set;} 
    public ICommand Play { get; set; }
}

它是一个Class，不是一个界面。然后像这样在您的页面中使用它：

xmlns:data="using:[the namespace of your model]

GridView的x:DataType可以设置如下：

<DataTemplate x:DataType="data:SoundEffectButton">

在您的 ViewModel 中，您可以为您的数据使用一个集合：

public ObservableCollection<SoundEffectButton> SoundEffects;

最后，在页面的 cs 文件中使用您的 ViewModel：

public MainPage()
{
    this.InitializeComponent();
    ViewModel = new MainPageViewModel();
}

public MainPageViewModel ViewModel { get; set; }

GridView应该是这样的：

<GridView ItemsSource="{x:Bind ViewModel.SoundEffects}">
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="data:SoundEffectButton">
            <Button Style="{StaticResource defaultButton}"
            Content="{Binding Name}"
            Tag="{Binding FileName}"
            Command="{x:Bind Play}"
            CommandParameter="{Binding FileName}" />
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

我在这里写了一个demo来解决你的问题，你可以看看

为 gridview 数据模板设置 x:dataType

Setting x:dataType for gridview datatemplate

c#

xaml

uwp

xbind