在 DataTemplate UWP 中将点击器绑定到 VM

Question

我有导航视图，我在其中定义 CommandBar。在 CommandBar 中，实现了两个 AppBarButton：

        <NavigationView x:Name="NavView">
            <NavigationView.HeaderTemplate>
                <DataTemplate>
                    <Grid Margin="24,10,0,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <TextBlock
                            Margin="0,0,0,10"
                            VerticalAlignment="Bottom"
                            FontSize="28"
                            Style="{StaticResource TitleTextBlockStyle}"
                            Text="{Binding}" />
                        <CommandBar
                            Grid.Column="1"
                            Margin="0,0,10,0"
                            HorizontalAlignment="Right"
                            VerticalAlignment="Bottom"
                            DefaultLabelPosition="Right">
                            <AppBarButton
                                Icon="Edit"
                                Label="Feedback" />
                            <AppBarButton
                                Icon="OtherUser"
                                Label="ChangeUser" />
                        </CommandBar>
                    </Grid>
                </DataTemplate>
            </NavigationView.HeaderTemplate>

我想将 AppBarButtons 与 ViewModel 中的方法绑定，但我不能这样做。我尝试这样做：

<AppBarButton
    Icon="Edit"
    Label="Feedback"
    Click="{x:Bind ViewModel.Foo}"/>

但这行不通。编译时出现错误：对象引用未设置为对象的实例。 我尝试添加到<DataTemplate x:DataType>，并绑定到这样的方法：

<AppBarButton
        Icon="Edit"
        Label="Feedback"
        Click="{x:Bind Foo}"/>

它已编译，但在运行时抛出异常并消失导航标题。 请告诉我，如何将此 AppBarButtons 绑定到我的方法？

Answer 1

如果你想使用x:bind绑定HeaderTemplate中的按钮，你应该找到datacontext并绑定ViewModel。

尝试新建一个 ViewModel 并将其设置为 datacontext。

public class ViewModel
{
    public void Foo()
    {
    }
}


    public MainPage()
    {
        this.InitializeComponent();

        DataContext = new ViewModel();
    }

您需要添加 dataType inhead。

DataTemplate x:DataType="local:ViewModel"

下面是xaml中的所有代码。

    <NavigationView x:Name="NavView">
        <NavigationView.HeaderTemplate>
            <DataTemplate x:DataType="local:ViewModel">
                <Grid Margin="24,10,0,0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <TextBlock
                        Margin="0,0,0,10"
                        VerticalAlignment="Bottom"
                        FontSize="28"
                        Style="{StaticResource TitleTextBlockStyle}"
                        Text="{Binding}" />
                    <CommandBar
                        Grid.Column="1"
                        Margin="0,0,10,0"
                        HorizontalAlignment="Right"
                        VerticalAlignment="Bottom"
                        DefaultLabelPosition="Right">
                        <AppBarButton
                            Icon="Edit"
                            Label="Feedback" 
                            Click="{x:Bind Foo}"/>
                        <AppBarButton
                            Icon="OtherUser"
                            Label="ChangeUser" 
                            Click="{x:Bind Foo}"/>
                    </CommandBar>
                </Grid>
            </DataTemplate>
        </NavigationView.HeaderTemplate>
        </NavigationView>

请按F5运行。

当您单击反馈时，您可以看到 xaml 调用 Foo。