WPF UserControls - setting the .Command property on button inside UserControl

Question

I've got a UserControl that contains a button and some other controls:

<UserControl>
  <StackPanel>
     <Button x:Name="button" />
     ...
  </StackPanel>
</UserControl>

When I create a new instance of that control, I want to get at the Button's Command property:

<my:GreatUserControl TheButton.Command="{Binding SomeCommandHere}">
</my:GreatUserControl>

Of course, the "TheButton.Command" thing doesn't work.

So my question is: Using XAML, how can I set the .Command property of the button inside my user control?

Answer 1

Add a dependency property to your UserControl and bind the button's Command property to that.

So in your GreatUserControl:

public ICommand SomeCommand
{
    get { return (ICommand)GetValue(SomeCommandProperty); }
    set { SetValue(SomeCommandProperty, value); }
}

public static readonly DependencyProperty SomeCommandProperty =
    DependencyProperty.Register("SomeCommand", typeof(ICommand), typeof(GreatUserControl), new UIPropertyMetadata(null));

And in your GreatUserControl's XAML:

<UserControl 
    x:Class="Whatever.GreatUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Name="me"
    >
    <Button Command="{Binding SomeCommand,ElementName=me}">Click Me!</Button>
</UserControl>

So your button binds to the command on the UserControl itself. Now you can set that in your parent window:

<my:GreatUserControl SomeCommand="{Binding SomeCommandHere}" />