Mvvm-Light User Control RelayCommand TemplateBindi

Question

[UWP - Windows 10]

I'm new to MVVM-Light and so I got some starter issues. I created a custom Usercontrol which is called TileToolbar and is containing this xaml:

  <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
    <RadioButton Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE141;" Foreground="Green"></RadioButton>
    <RadioButton Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE7E6;" Foreground="Green"></RadioButton>
    <RadioButton Style="{StaticResource NavRadioButtonStyle}" Tag="&#xEB52;" Foreground="Green"></RadioButton>
</StackPanel>

Now I want to add a RelayCommand for each RadioButton and I want each Page which is containing the custom usercontrol to be able to bind a custom RelayCommand.

• My first Approach was to set the Command Property in xaml and to implement the method in the viewmodel (e.g. MainViewModel) which actually worked - shorten xaml:<RadioButton Command="{Binding Command}"></RadioButton>
• Because I wanted to set the Propery in the Page using the customcontrol like this <TileToolbar PinCommand={Binding Command}></TileToolbar> I created a dependency property of type RelayCommand but the TemplateBinding didn't work.

So my question: How would I create a property like PinCommand of type RelayCommand in the UserControl so I can later bind to it in xaml for example on the Mainpage?

Answer 1

So my question: How would I create a property like PinCommand of type RelayCommand in the UserControl so I can later bind to it in xaml for example on the Mainpage?

You can register a PinCommand in the type of RelayCommand in your UserControl's code behind for example like this:

public static DependencyProperty PinCommandProperty = DependencyProperty.Register("PinCommand", typeof(RelayCommand), typeof(TileToolbar), new PropertyMetadata(null));

public RelayCommand PinCommand
{
    get
    {
        return (RelayCommand)GetValue(PinCommandProperty);
    }
    set
    {
        SetValue(PinCommandProperty, value);
    }
}

Now you can use this TileToolbar in your MainPage for example like this:

<Controls:TileToolbar Grid.Row="1" VerticalAlignment="Bottom" PinCommand="{Binding pinCommand, Mode=OneWay}" />

Code in view model is like this:

private RelayCommand _pinCommand;

public RelayCommand pinCommand
{
    get
    {
        if (_pinCommand == null)
        {
            _pinCommand = new RelayCommand(() =>
            {
                //TODO:
            },
            () => true);
        }
        return _pinCommand;
    }
}

And for the work of connecting the Command of RadioButton to the PinCommand of TileToolBar, you can in your user control for example code like this:

<RadioButton Tag="&#xEB52;" Foreground="Green" Command="{x:Bind PinCommand, Mode=OneWay}"></RadioButton>