UWP数据绑定:如何将按钮命令设置为DataTemplate中的父DataContext [英] UWP Databinding: How to set button command to parent DataContext inside DataTemplate

问题描述

需要的简短说明:我需要使用ViewModel的DataContext中的方法在DataTemplate中触发按钮的命令.

Short explanation of need: I need to fire the command of a button inside a DataTemplate, using a method from the DataContext of the ViewModel.

问题的简短说明:模板化按钮命令似乎仅可绑定到项目本身的数据上下文.WPF和Windows 8.1应用程序使用的语法似乎不起作用，包括ElementName和Ancestor绑定.我非常希望不要将按钮命令放在MODEL内.

Short explanation of problem: The templated button command only seems to be bindable to the datacontext of the item itself. The syntax used by WPF and Windows 8.1 apps to walk up the visual tree doesn't seem to work, including ElementName and Ancestor binding. I would very much prefer not to have my button command located inside the MODEL.

侧面说明:这是使用MVVM设计方法构建的.

Side Note: This is built with the MVVM design method.

以下代码在VIEW上生成项目列表.该列表是每个列表项的一个按钮.

The below code generates the list of items on the VIEW. That list is one button for each list item.

            <ItemsControl x:Name="listView" Tag="listOfStories" Grid.Row="0" Grid.Column="1"
            ItemsSource="{x:Bind ViewModel.ListOfStories}"
            ItemTemplate="{StaticResource storyTemplate}"
            Background="Transparent"
            IsRightTapEnabled="False"
            IsHoldingEnabled="False"
            IsDoubleTapEnabled="False"
                 />

在同一VIEW的页面资源中，我创建了一个DataTemplate，其中包含有问题的按钮.我继续进行操作，并删除了按钮内的大多数格式(例如文本)，以使此侧的代码更易于阅读.除了列出的问题(该命令的绑定)之外，与该按钮有关的所有操作均有效.

Inside the page resources of the same VIEW, I have created a DataTemplate, containing the problematic button in question. I went ahead and stripped out most of the formatting inside the button, such as text, to make the code easier to read on this side. Everything concerning the button works, except for the problem listed, which is the binding of the command.

<Page.Resources>
        <DataTemplate x:Name="storyTemplate" x:DataType="m:Story">
            <Button
                Margin="0,6,0,0"
                Width="{Binding ColumnDefinitions[1].ActualWidth, ElementName=storyGrid, Mode=OneWay}"
                HorizontalContentAlignment="Stretch"
                CommandParameter="{Binding DataContext, ElementName=Page}"
                Command="{Binding Source={StaticResource Locator}}">

                <StackPanel HorizontalAlignment="Stretch" >
                    <TextBlock Text="{x:Bind StoryTitle, Mode=OneWay}"
                        FontSize="30"
                        TextTrimming="WordEllipsis"
                        TextAlignment="Left"/>
                </StackPanel>
            </Button>
        </DataTemplate>
    </Page.Resources>

因为这是一个DataTemplate，所以已将DataContext设置为构成列表(MODEL)的各个项目.我需要做的是选择列表本身的DataContext(VIEWMODEL)，以便随后可以访问导航命令.

Because this is a DataTemplate, the DataContext has been set to the individual items that comprise the list (MODEL). What I need to do is select the DataContext of the list itself (VIEWMODEL), so I can then access a navigation command.

如果您对VIEW页面的代码背后感兴趣，请参见下文.

If you are interested in the code-behind of the VIEW page, please see below.

    public sealed partial class ChooseStoryToPlay_View : Page
    {
    public ChooseStoryToPlay_View()
    {
        this.InitializeComponent();
        this.DataContextChanged += (s, e) => { ViewModel = DataContext as ChooseStoryToPlay_ViewModel; };
    }
    public ChooseStoryToPlay_ViewModel ViewModel { get; set; }
}

除其他尝试外，我尝试通过ElementName进行设置，但都失败了.输入ElementName时，Intellisense将检测到"storyTemplate"作为选项，这是此问题的第一个代码块中显示的DataTemplate的名称.

I've tried setting it by ElementName, among many other attempts, but all have failed. Intellisense detects "storyTemplate" as an option when ElementName is input, which is the name of the DataTemplate shown in the first code block of this question.

我不认为我的问题可能是唯一的，但是我很难找到UWP的解决方案.请允许我预先为这个简单的问题道歉，但是我花了近两天时间研究答案，但似乎没有一个适用于UWP.

I don't believe my problem can be unique, however I'm having great difficulty finding a solution for UWP. Allow me to apologize in advance in this is a simple question, but I've spent nearly two days researching answers, with none seeming to work for UWP.

谢谢你们！

推荐答案

您正在使用哪种MVVM工具箱(如果有)?在MVVM Light中，您可以从DataTemplate获取ViewModel的所有权，就像为视图设置DataContext一样:

What MVVM toolkit are you using (if any)? In MVVM Light, you can get a hold of ViewModel from DataTemplate same way you set DataContext for your view:

<DataTemplate x:Key="SomeTemplate">
    <Button Command="{Binding Main.MyCommand, Source={StaticResource ViewModelLocator}}"/>
</DataTemplate>

这篇关于UWP数据绑定:如何将按钮命令设置为DataTemplate中的父DataContext的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！