How to set Button.Command from a ResourceDictionary?

Question

I'm trying to implement a hamburger button by myself in a Windows 10 app. I'm running into a little trouble with my ResourceDictionary when trying to set the Command property of a Button (via a style). Here is my code:

Hamburger.xaml

Hamburger.xaml.cs

namespace Octopie.Styles
{
    public sealed partial class Hamburger : ResourceDictionary
    {
        public Hamburger()
        {
            this.InitializeComponent();
        }

        public ICommand OnClicked => new ClickedCommand();

        private class ClickedCommand : ICommand
        {
            public event EventHandler CanExecuteChanged;

            public bool CanExecute(object parameter) =>
                parameter is Button;

            public void Execute(object parameter)
            {
                var button = (Button)parameter;

                // Walk up the tree until we reach a SplitView
                FrameworkElement parent = button;
                do
                    parent = parent.Parent as FrameworkElement;
                while (!(parent is SplitView));

                var splitView = (SplitView)parent;
                splitView.IsPaneOpen = !splitView.IsPaneOpen;
            }
        }
    }
}

For some reason the binding for the Command property doesn't seem to be working; when I set a breakpoint inside the Execute method and click the button, the breakpoint is never hit. I tried adding a DataContext="{Binding RelativeSource={RelativeSource Self}}" to the top of the XAML file, but for some reason ResourceDictionary doesn't seem to support DataContext.

tl;dr: What can I do to make the Button.Command property bind correctly to OnClicked within the setter?

Jay Zuo · Accepted Answer

Like Mike said, usually we won't set Button.Command in ResourceDictionary. A hamburger button may not only be in SplitView but can be in another place and then you may need bind another command. So you can refer to Mike's suggestion.

But if you do want to set it in ResourceDictionary, you can try like following:

Firstly, in your case, your command is fixed, you can declare your ClickedCommand as a public class, then in the Style,set the Command like:

After this, you can use your command, but this won't fix your problem as in ClickedCommand, you use parameter to retrieve the Button, but the parameter is not the "sender" of the Command, but the object passed with CommandParameter property. So we need set this in the Style.

However, Bindings in Style Setters are not supported in UWP Apps. See Remarks in Setter class:

The Windows Runtime doesn't support a Binding usage for Setter.Value (the Binding won't evaluate and the Setter has no effect, you won't get errors, but you won't get the desired result either).

A workaround for this is using attached property to set up the binding in code behind for you. For example:

public class BindingHelper
{
    public static readonly DependencyProperty CommandParameterBindingProperty =
        DependencyProperty.RegisterAttached(
            "CommandParameterBinding", typeof(bool), typeof(BindingHelper),
            new PropertyMetadata(null, CommandParameterBindingPropertyChanged));

    public static bool GetCommandParameterBinding(DependencyObject obj)
    {
        return (bool)obj.GetValue(CommandParameterBindingProperty);
    }

    public static void SetCommandParameterBinding(DependencyObject obj, bool value)
    {
        obj.SetValue(CommandParameterBindingProperty, value);
    }

    private static void CommandParameterBindingPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if ((bool)e.NewValue)
        {
            BindingOperations.SetBinding(d, Button.CommandParameterProperty, new Binding { RelativeSource = new RelativeSource() { Mode = RelativeSourceMode.Self } });
        }
    }
}

Then in Style, using

will set the Button as CommandParameter. Your Hamburger.xaml may like:

I delete x:Class="Octopie.Styles.Hamburger" and Hamburger.xaml.cs as there is no need to use code-behind for your ResourceDictionary.

Now we can use this ResourceDictionary in our page like:

But there is another problem in Execute method of ClickedCommand. In this method, you've used FrameworkElement.Parent to retrieve the SplitView. But

Parent can be null if an object was instantiated, but is not attached to an object that eventually connects to a page object root.

Most of the time, Parent is the same value as returned by VisualTreeHelper APIs. However, there may be cases where Parent reports a different parent than VisualTreeHelper does.

And in your case, you need use VisualTreeHelper.GetParent to get the SplitView. We can use a helper method to do this:

public static T FindParent(DependencyObject child) where T : DependencyObject
{
    //get parent item
    DependencyObject parentObject = VisualTreeHelper.GetParent(child);

    //we've reached the end of the tree
    if (parentObject == null) return null;

    //check if the parent matches the type we're looking for
    T parent = parentObject as T;
    if (parent != null)
        return parent;
    else
        return FindParent(parentObject);
}

Then in Execute method using:

public void Execute(object parameter)
{
    var button = (Button)parameter;
    var splitView = FindParent(button);
    splitView.IsPaneOpen = !splitView.IsPaneOpen;
}

Now the HamburgerStyle will work as you want.

How to set Button.Command from a ResourceDictionary?

Answers (2)

Related Questions