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

Question

I am unable to bind the command of a MenuFlyoutItem to a RelayCommand on my ViewModel. I've tried every way I could think of, ElementName, RelativeSource, etc. Can anyone show me what I'm doing wrong? The other two bindings shown in the code below work. It is only the command binding that doesn't. I mean I have set a breakpoint in the OnFilterListCommand method that is called by the RelayCommand. Execution never reaches that breakpoint when I click on a menu flyout item.

<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>

Here is the applicable code from the 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;
    ...
}

I'm using Jerry Nixon's solution to add an ItemsSources property to 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);
    }
}

I got it here: http://blog.jerrynixon.com/2013/12/xaml-how-to-add-itemssource-to-windows.html

Answer 1

I don't know anything about MenuFlyoutItem, but normally a control only needs the following:

    <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>

Is "thePage" the name of your view or view model? Obviously if it isn't your view model then this isn't going to work, and if it is, it would be easier to bind it to your data context once in your xaml file or in the code behind.

Update:

I think I see what you're trying to do. There are ways to pass parameters to a command, but if I follow the idea here, the easiest thing would be to just invoke the command and use the bound property CompanyName in the view model.

(Going on memory here, so will edit if there are any mistakes).

public RelayCommand FilterListCommand;

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

Give that a try and make sure CompanyName is a properly defined public property in your view model that raises property changed.

To be fair, I found a few examples of people binding similar to your original example which may be a new idiom common to the platform. Just trying to use my experience with Silverlight/WPF here.

Answer 2

This is an example of the most direct data binding available in Windows 10 ( x:Bind uses compile binding , that finds errors already at compile time and boosts performances):

1) XAML page:

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

2) Model 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

I finally got this. To bind to the command on the viewmodel from within the datatemplate, I had to use the following:

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

Locator refers to the ViewmodelLocator. (Note: I am using MVVMLight.)

Answer 4

I modified the BindableFlyout class a bit, so it supports DataTempalteSelector .

1. add Margin(-14, -8, -14, -8) so make it look more like a MenuFlyout .
2. re-use the ItemsControl so it's more efficient if you're changing the values.
3. assign flyout to Tag , other otherwise there's no way you can find the flyout in child's event handler. do it with 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);
    }
}