如何从 DataTemplate 内部绑定到 ViewModel 上的属性？

Question

我无法将 MenuFlyoutItem 的命令绑定到我的 ViewModel 上的 RelayCommand。我已经尝试了所有我能想到的方法，ElementName、RelativeSource 等。任何人都可以告诉我我做错了什么吗？下面代码中显示的其他两个绑定有效。只有命令绑定没有。我的意思是我在 RelayCommand 调用的 OnFilterListCommand 方法中设置了一个断点。当我单击菜单弹出项时，执行永远不会到达该断点。

<wct:DataGridComboBoxColumn.HeaderStyle>
    <Style TargetType="controlsprimitives:DataGridColumnHeader">
        <Setter Property="ContentTemplate"> 
            <Setter.Value>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
                        <TextBlock Text="Company" TextWrapping="Wrap"/>
                        <Button HorizontalAlignment="Right" x:Name="MyButton" Content="test">
                            <i:Interaction.Behaviors>                                                  
                                <core:EventTriggerBehavior EventName="Click">
                                <core:InvokeCommandAction Command="{Binding ElementName=thePage, Path=DataContext.OpenFlyoutCommand}" CommandParameter="{Binding ElementName=MyButton}"/>                                                            
                                 </core:EventTriggerBehavior>                                                       
                            </i:Interaction.Behaviors>
                            <FlyoutBase.AttachedFlyout>
                                <Flyout helpers:BindableFlyout.ItemsSource="{Binding ElementName=theView, Path=DataContext.SourceForCompaniesList}" x:Name="theFlyout">                                                              
                                    <helpers:BindableFlyout.ItemTemplate>                                                               
                                        <DataTemplate>
                                            <MenuFlyoutItem Text="{Binding CompanyName}" Command="{Binding Path=DataContext.FilterListCommand, ElementName=theView}" IsTapEnabled="True"/>                                                                    
                                        </DataTemplate>                                                     
                                    </helpers:BindableFlyout.ItemTempla
                                </Flyout>
                            </FlyoutBase.AttachedFlyout>

这是 ViewModel 中的适用代码。

private RelayCommand<object> _filterListCommand;
public RelayCommand<object> FilterListCommand => _filterListCommand
                ?? (_filterListCommand = new RelayCommand<object>(OnFilterListCommand));

private void OnFilterListCommand(object obj)
{
    string selectedCompany = obj as string;
    ...
}

我正在使用 Jerry Nixon 的解决方案将 ItemsSources 属性添加到 FlyoutMenu：

public class BindableFlyout : DependencyObject
{
    #region ItemsSource

    public static IEnumerable GetItemsSource(DependencyObject obj)
    {

        return obj.GetValue(ItemsSourceProperty) as IEnumerable;


    }
    public static void SetItemsSource(DependencyObject obj, IEnumerable value)
    {

        obj.SetValue(ItemsSourceProperty, value);

    }
    public static readonly DependencyProperty ItemsSourceProperty =
        DependencyProperty.RegisterAttached("ItemsSource", typeof(IEnumerable),
        typeof(BindableFlyout), new PropertyMetadata(null, ItemsSourceChanged));
    private static void ItemsSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    { Setup(d as Windows.UI.Xaml.Controls.Flyout); }

    #endregion

    #region ItemTemplate

    public static DataTemplate GetItemTemplate(DependencyObject obj)
    {
        return (DataTemplate)obj.GetValue(ItemTemplateProperty);
    }
    public static void SetItemTemplate(DependencyObject obj, DataTemplate value)
    {
        obj.SetValue(ItemTemplateProperty, value);
    }
    public static readonly DependencyProperty ItemTemplateProperty =
        DependencyProperty.RegisterAttached("ItemTemplate", typeof(DataTemplate),
        typeof(BindableFlyout), new PropertyMetadata(null, ItemsTemplateChanged));
    private static void ItemsTemplateChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    { Setup(d as Windows.UI.Xaml.Controls.Flyout); }

    #endregion

    private static async void Setup(Windows.UI.Xaml.Controls.Flyout m)
    {
        if (Windows.ApplicationModel.DesignMode.DesignModeEnabled)
            return;
        var s = GetItemsSource(m);
        if (s == null)
            return;
        var t = GetItemTemplate(m);
        if (t == null)
            return;
        var c = new Windows.UI.Xaml.Controls.ItemsControl
        {
            ItemsSource = s,
            ItemTemplate = t,
        };
        var n = Windows.UI.Core.CoreDispatcherPriority.Normal;
        Windows.UI.Core.DispatchedHandler h = () => m.Content = c;
        await m.Dispatcher.RunAsync(n, h);
    }
}

我在这里找到了：http://blog.jerrynixon.com/2013/12/xaml-how-to-add-itemssource-to-windows.html

Answer 1

我对 MenuFlyoutItem 一无所知，但通常一个控件只需要以下内容：

    <FlyoutBase.AttachedFlyout>
     <Flyout helpers:BindableFlyout.ItemsSource="{Binding ElementName=thePage, Path=DataContext.SourceForCompaniesList}" x:Name="theFlyout">                                                              
        <helpers:BindableFlyout.ItemTemplate>                                                               
            <DataTemplate>
                <MenuFlyoutItem Text="{Binding CompanyName}" Command="{Binding FilterListCommand}" IsTapEnabled="True"/>                                                                    
            </DataTemplate>                                                     
        </helpers:BindableFlyout.ItemTemplate>
     </Flyout>
</FlyoutBase.AttachedFlyout>

"thePage" 是您的视图或视图模型的名称吗？显然，如果它不是您的视图模型，那么这将不起作用，如果是，那么在您的 xaml 文件或后面的代码中将它绑定到您的数据上下文会更容易。

更新：

我想我明白你想做什么。有多种方法可以将参数传递给命令，但如果我遵循这里的想法，最简单的方法就是调用命令并在视图模型中使用绑定的属性 CompanyName。

（记在这里，如有错误再编辑）。

public RelayCommand FilterListCommand;

FilterListCommand = new RelayCommand(() =>
{
    string selectedCompany = obj as string;  
    MessageBox.Show(selectedCompany); 
});

试试看，确保 CompanyName 在你的视图模型中正确定义 public 属性引发属性改变。

平心而论，我发现了几个与您的原始示例相似的人员绑定示例，这可能是平台通用的新习语。只是想在这里使用我在 Silverlight/WPF 方面的经验。

Answer 2

这是 Windows10 中最直接的数据绑定示例（x:Bind 使用 编译绑定 , 可以在编译时发现错误并提高性能):

1) XAML 页数：

<ListView ItemsSource="{x:Bind ViewModel.ItemsList, Mode=OneWay}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="SampleObjectClass">
            <TextBlock Text="{x:Bind Title}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

2) 型号 class:

public class SampleObjectClass
{
    public String Title { get; set; }
}

3) MainPage.xaml.cs:

public sealed partial class MainPage : Page
{
    public AppViewModel ViewModel { get; set; } = new AppViewModel();
    public static MainPage Current;
    // The "Current" property is necessary in order to retriew the singleton istance of the AppViewModel in the entire app... thus we are using the MainPage as a "shell" structure for the app


    public MainPage()
    {
        Current = this;

        // Other things...
    }

    // Other stuff...
}

4) AppViewModel class:

public class AppViewModel : BaseBind
{
    public AppViewModel()
    {
        ItemsList = new ObservableCollection<ItemsList >();
        ItemsList .CollectionChanged += (sender, e) =>
        {
            // Do something if the list changes (e.g. update another property in the viewmodel class)...
        };
    }

    public ObservableCollection<SampleObjectClass> ItemsList { get; set; }
}

EDIT: of course, the BaseBind class is the class taht implements the INotifyPropertyChanged Interface.

Answer 3

我终于明白了。要从数据模板中绑定到视图模型上的命令，我必须使用以下内容：

<MenuFlyoutItem Text="{Binding CompanyName}" 
                Command="{Binding CompaniesListViewModel.CompanyListCommand, Source={StaticResource Locator}}" 
                CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=Text}" />

Locator指的是ViewmodelLocator。（注意：我使用的是 MVVMLight。）

Answer 4

我稍微修改了BindableFlyout class，所以它支持DataTempalteSelector。

添加 Margin(-14, -8, -14, -8) 使其看起来更像 MenuFlyout。
re-use ItemsControl 因此，如果您更改值，效率会更高。
将 flyout 分配给 Tag，否则您无法在子事件处理程序中找到弹出窗口。用 var flyout = (Flyout)((((DependencyObject)sender).GetParents().FirstOrDefault(obj => obj is ItemsControl)).Tag);

internal static class DependencyObjectExtension
{
    internal static IEnumerable<DependencyObject> GetParents(this DependencyObject child)
    {
        var parent = VisualTreeHelper.GetParent(child);
        while (parent != null)
        {
            yield return parent;
            child = parent;
            parent = VisualTreeHelper.GetParent(child);
        }
    }
}

public class BindableFlyout : DependencyObject
{
    #region ItemsSource

    public static readonly DependencyProperty ItemsSourceProperty =
        DependencyProperty.RegisterAttached("ItemsSource", typeof(IEnumerable), typeof(BindableFlyout), new PropertyMetadata(null, OnDependencyPropertyChanged));

    public static IEnumerable GetItemsSource(DependencyObject obj) =>
        obj.GetValue(ItemsSourceProperty) as IEnumerable;
    public static void SetItemsSource(DependencyObject obj, IEnumerable value) =>
        obj.SetValue(ItemsSourceProperty, value);

    #endregion

    #region ItemTemplate

    public static readonly DependencyProperty ItemTemplateProperty =
        DependencyProperty.RegisterAttached("ItemTemplate", typeof(DataTemplate), typeof(BindableFlyout), new PropertyMetadata(null, OnDependencyPropertyChanged));

    public static DataTemplate GetItemTemplate(Flyout obj) =>
        (DataTemplate)obj.GetValue(ItemTemplateProperty);
    public static void SetItemTemplate(Flyout obj, DataTemplate value) =>
        obj.SetValue(ItemTemplateProperty, value);

    #endregion

    #region ItemTemplateSelector

    public static readonly DependencyProperty ItemTemplateSelectorProperty =
        DependencyProperty.RegisterAttached("ItemTemplateSelector", typeof(DataTemplateSelector), typeof(BindableFlyout), new PropertyMetadata(null, OnDependencyPropertyChanged));

    public static DataTemplateSelector GetItemTemplateSelector(Flyout obj) =>
        (DataTemplateSelector)obj.GetValue(ItemTemplateSelectorProperty);
    public static void SetItemTemplateSelector(Flyout obj, DataTemplate value) =>
        obj.SetValue(ItemTemplateSelectorProperty, value);

    #endregion

    private static void OnDependencyPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var flyout = (Flyout)d;
        var items = flyout.Content as ItemsControl;
        if (items == null)
            items = new ItemsControl() { Margin = new Thickness(-14, -8, -14, -8) };
        void callback()
        {
            flyout.Content = items;
            items.ItemsSource = GetItemsSource(flyout);
            items.ItemTemplate = GetItemTemplate(flyout);
            items.ItemTemplateSelector = GetItemTemplateSelector(flyout);
            items.Tag = flyout;
        }
        var dispatcher = Application.Current.Dispatcher;
        if (dispatcher.CheckAccess())
        {
            callback();
            return;
        }
        dispatcher.Invoke(callback, DispatcherPriority.Normal);
    }
}

如何从 DataTemplate 内部绑定到 ViewModel 上的属性？

How do I bind to a property on the ViewModel from inside a DataTemplate?

c#

xaml

uwp

mvvm-light

如何从 DataTemplate 内部绑定到 ViewModel 上的 属性？

How do I bind to a property on the ViewModel from inside a DataTemplate?

c#

xaml

uwp

mvvm-light

如何从 DataTemplate 内部绑定到 ViewModel 上的属性？