代码之家 › 专栏 › 技术社区 › Artem

将clicker绑定到DataTemplate UWP中的VM

uwp binding c#

Artem · 技术社区 · 7 年前

我有导航视图,在这里我定义了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>

我想用ViewModel中的方法绑定AppBarButtons,但我做不到。我试着这样做:

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

但这不是工作。编译时出现错误:对象引用未设置为对象的实例。我尝试添加到 <DataTemplate x:DataType> ,并绑定到如下方法:

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

它已编译,但在运行时引发异常和消失的导航标头。请告诉我,如何将此AppBarButtons绑定到我的方法?

1 回复 | 直到 7 年前

lindexi 7 年前

用于您想要使用的 x:bind 要绑定HeaderTemplate中的按钮,应该找到datacontext并绑定ViewModel。

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

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


    public MainPage()
    {
        this.InitializeComponent();

        DataContext = new ViewModel();
    }

您需要在head中添加数据类型。

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。