UWP中在DataTemplate内绑定点击事件到ViewModel及导航视图命令栏问题

嘿，这两个问题都是UWP开发里很常见的MVVM场景，我来给你一步步讲清楚怎么解决：

在DataTemplate里绑定事件到ViewModel，最规范的方式是用Command绑定（符合MVVM），如果需要处理非Command支持的事件，可以用行为（Behaviors）来转成Command。

方法1：直接绑定Command（推荐） #

首先确保你的ViewModel实现了ICommand接口，通常我们会用RelayCommand（可以自己实现，或者用NuGet包比如MvvmLight、Prism里的现成实现）。

假设你有一个ListView，ItemTemplate是DataTemplate，要绑定到ViewModel的ItemClickCommand：

<ListView ItemsSource="{Binding Items}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <!-- 用RelativeSource找到父ListView的DataContext（也就是ViewModel） -->
            <Button Content="{Binding ItemName}" 
                    Command="{Binding DataContext.ItemClickCommand, RelativeSource={RelativeSource AncestorType=ListView}}"
                    CommandParameter="{Binding}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

• RelativeSource AncestorType=ListView：因为DataTemplate的默认DataContext是列表项本身，所以需要向上找到父容器的DataContext（也就是你的ViewModel）。
• CommandParameter="{Binding}"：可以把当前列表项作为参数传给Command的执行方法。

ViewModel里的Command实现示例：

public ICommand ItemClickCommand { get; }

public MainViewModel()
{
    ItemClickCommand = new RelayCommand<ItemModel>(ExecuteItemClick);
}

private void ExecuteItemClick(ItemModel item)
{
    // 处理点击逻辑，比如跳转到详情页
}

方法2：用EventToCommand行为（处理非Click类事件） #

如果需要绑定的是Button的PointerEntered这类非Command支持的事件，可以用Microsoft.Xaml.Behaviors.Uwp.Managed这个NuGet包来实现事件转Command。

首先安装NuGet包，然后在XAML里添加命名空间：

xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"

然后在DataTemplate里的控件上添加行为：

<DataTemplate>
    <Button Content="{Binding ItemName}">
        <interactivity:Interaction.Behaviors>
            <core:EventTriggerBehavior EventName="Click">
                <core:InvokeCommandAction 
                    Command="{Binding DataContext.ItemClickCommand, RelativeSource={RelativeSource AncestorType=ListView}}"
                    CommandParameter="{Binding}" />
            </core:EventTriggerBehavior>
        </interactivity:Interaction.Behaviors>
    </Button>
</DataTemplate>

你已经有了HeaderTemplate的基础结构，我来帮你完善CommandBar的部分，确保它能正确绑定到ViewModel的命令，同时符合UWP的布局规范。

完整代码示例 #

<NavigationView x:Name="NavView" 
                IsBackButtonVisible="Visible"
                DataContext="{Binding MainViewModel}">
    <NavigationView.HeaderTemplate>
        <DataTemplate>
            <Grid Margin="24,10,0,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" /> <!-- 第二列占满剩余空间 -->
                </Grid.ColumnDefinitions>
                
                <!-- 标题文本 -->
                <TextBlock Margin="0,0,0,10" 
                           VerticalAlignment="Bottom" 
                           FontSize="28" 
                           Style="{StaticResource TitleTextBlockStyle}" 
                           Text="{Binding PageTitle}" />
                
                <!-- 右侧的CommandBar -->
                <CommandBar Grid.Column="1" 
                            HorizontalAlignment="Right" 
                            VerticalAlignment="Bottom"
                            Margin="0,0,24,10"
                            DefaultLabelPosition="Right">
                    <AppBarButton Icon="Add" 
                                  Label="新建" 
                                  Command="{Binding AddCommand}" />
                    <AppBarButton Icon="Delete" 
                                  Label="删除" 
                                  Command="{Binding DeleteCommand}" />
                    <!-- 可以添加更多按钮，或者用SecondaryCommands放次要操作 -->
                    <CommandBar.SecondaryCommands>
                        <AppBarButton Icon="Settings" Label="设置" Command="{Binding SettingsCommand}" />
                    </CommandBar.SecondaryCommands>
                </CommandBar>
            </Grid>
        </DataTemplate>
    </NavigationView.HeaderTemplate>
    
    <!-- 内容区域 -->
    <Frame x:Name="ContentFrame" Margin="24" />
</NavigationView>

关键说明 #

1. 布局调整：把CommandBar放在Grid的第二列，设置HorizontalAlignment="Right"让它靠右显示，符合UWP的导航栏设计习惯；VerticalAlignment="Bottom"让它和标题文本底部对齐。
2. 命令绑定：HeaderTemplate的DataContext继承自NavigationView的DataContext，所以只要NavigationView的DataContext是你的ViewModel，AppBarButton的Command可以直接绑定到ViewModel里的命令属性（比如AddCommand）。
3. 处理返回按钮：如果你想把NavigationView的返回按钮也绑定到ViewModel的命令，可以用行为来实现：

<NavigationView x:Name="NavView">
    <interactivity:Interaction.Behaviors>
        <core:EventTriggerBehavior EventName="BackRequested">
            <core:InvokeCommandAction Command="{Binding BackCommand}" />
        </core:EventTriggerBehavior>
    </interactivity:Interaction.Behaviors>
    <!-- 其他内容 -->
</NavigationView>

ViewModel对应命令实现 #

public ICommand AddCommand { get; }
public ICommand DeleteCommand { get; }
public ICommand BackCommand { get; }
public string PageTitle { get; set; } = "我的页面";

public MainViewModel()
{
    AddCommand = new RelayCommand(ExecuteAdd);
    DeleteCommand = new RelayCommand(ExecuteDelete);
    BackCommand = new RelayCommand(ExecuteBack);
}

private void ExecuteAdd()
{
    // 新建操作逻辑
}

private void ExecuteDelete()
{
    // 删除操作逻辑
}

private void ExecuteBack()
{
    // 返回上一页逻辑，比如：
    if (ContentFrame.CanGoBack)
        ContentFrame.GoBack();
}

如果需要自己实现RelayCommand，这里给一个简单的版本：

public class RelayCommand : ICommand
{
    private readonly Action _execute;
    private readonly Func<bool> _canExecute;

    public event EventHandler CanExecuteChanged;

    public RelayCommand(Action execute, Func<bool> canExecute = null)
    {
        _execute = execute ?? throw new ArgumentNullException(nameof(execute));
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter) => _canExecute?.Invoke() ?? true;

    public void Execute(object parameter) => _execute();

    public void RaiseCanExecuteChanged() => CanExecuteChanged?.Invoke(this, EventArgs.Empty);
}

内容的提问来源于stack exchange，提问作者Artem