Setting x:DataType for RelayCommand

[williambuchanan2]

I'm trying to get rid of the warnings about setting x:Datatype in the xaml.

Does anyone know how I can do this with RelayCommands? As soon as I put the x:DataType on relay commands it complains that it can't find it. I assume this is due to the word 'Command' being generated on the method? The commands are in a different context to the view binding.

What I have is a view with a ContentView inside it - the warning is coming up on the content view.

The main View has a vm as it's BindingContext, but the ContentView has it's BindingContext set to a property in that vm. The content view is used in a few places so will always have the same type set as it's BindingContent, whereas the type of vm differs depending on which main view it is on (although they all have the same base class).

Below is the xaml from the main view:

<StackLayout BindableLayout.ItemsSource="{Binding Feed}">
    <BindableLayout.ItemTemplate>
        <DataTemplate x:DataType="models:FeedContentDto">
            <controls:SocialPostView  />
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

All the data in the ContentView is bound to the properties of the FeedContentDto, whereas the commands are in the vm. For this reason I used RelativeSource:

<Button  
    Command="{Binding Source={RelativeSource AncestorType={x:Type vm:RedSixBaseVm}}, Path=ShowPostOptionsDialogCommand, x:DataType={x:Null}}" 
    CommandParameter="{Binding UserFeedId}">
</Button>

[bijington]

What IDE are you using? I see this in Rider but it is just a bug in Rider as the bindings work

[williambuchanan2]

I'm using Visual Studio. Below is the message I get:

XamlC warning XC0045: Binding: Property "ViewOrganisationCommand" not found on "UserOrganisationDto".

[bijington]

Does the command belong on your Dto class? Can you share some code?

[williambuchanan2]

Good point - I should have mentioned that... Thanks for pointing that out.

I have updated the description.

[stephenquan]

The x:DataType should be set to what the Source is.
Because you're using RelativeSource, we know that whatever the AncestorType is, must also be the x:DataType. i.e. they must be the same, i.e.

<Button  
    Command="{Binding Source={RelativeSource AncestorType={x:Type vm:RedSixBaseVm}}, Path=ShowPostOptionsDialogCommand, x:DataType='vm:RedSixBaseVm'}" 
    CommandParameter="{Binding UserFeedId}">
</Button>

[williambuchanan2]

The command isn't in the component. It is in the VM. So the structure is like this:

RedSixBaseVm (parent class)
|----- View1Vm (sub class)
|----- View2Vm (sub class)

View1Vm and View2Vm both implement :

[RelayCommand]
public void ShowPostOptionsDialog { }

RedSixBase does not implement this command. If I try to implement it and override it in the sub classes I get this error:

The method PDS.App.RedSix.ViewModels.MessageBoardPageVm.PDS.App.RedSix.ViewModels.MessageBoardPageVm.ViewProfile(int) cannot be annotated with [RelayCommand], has it has multiple overloads (command methods must be unique within their containing type)

[stephenquan]

When you develop a custom component, for it to be truly black-boxed, it should be agnostic to your all view models. The only x:DataType refer to within should refer to that custom component. For example,

<ContentView x:Name="customComponent">
    <VerticalStackLayout BindingContext="{Reference customComponent}" x:DataType="local:CustomComponent">
        <Button  
            Command="{Binding Command}"
            CommandParameter="{Binding CommandParameter}" />
    </VerticalStackLayout>
</ContentView>

public partial class CustomComponent : ContentView
{
    public static readonly BindableProperty CommandProperty = BindableProperty.Create(nameof(Command), typeof(ICommand), typeof(CustomComponent));
    public ICommand Command
    {
        get => (ICommand)GetValue(CommandProperty);
        set => SetValue(CommandProperty, value);
    }
    public static readonly BindableProperty CommandParameterProperty = BindableProperty.Create(nameof(CommandParameter), typeof(object), typeof(CustomComponent));
    public object CommandParameter
    {
        get => GetValue(CommandParameterProperty);
        set => SetValue(CommandParameterProperty, value);
    }
    public CustomComponent()
    {
        InitializeComponent();
    }
}

And here, is when the custom component is being invoked it can refer to either view model and you can supply the x:DataType correctly for whichever one you want.

<VerticalStackLayout>
    <local:CustomComponent
        Command="{Binding Source={RelativeSource AncestorType={x:Type vm:View1Vm }},
                          Path=ShowPostOptionsDialogCommand, x:DataType='vm:View1Vm '}" />
    <local:CustomComponent
        Command="{Binding Source={RelativeSource AncestorType={x:Type vm:View2Vm }},
                          Path=ShowPostOptionsDialogCommand, x:DataType='vm:View2Vm '}" />
</VerticalStackLayout>

Another solution you may wish to consider is to declare an interface, and apply it to both your view models, e.g.

public interface IShowPostOptionsDialogCommand
{
    IRelayCommand ShowPostOptionsDialogCommand { get; }
}

public partial class View1Vm : RedSixBaseVm, IShowPostOptionsDialogCommand
{
    [RelayCommand]
    public void ShowPostOptionsDialog()
    {
    }
}

public partial class View2Vm : RedSixBaseVm, IShowPostOptionsDialogCommand
{
    [RelayCommand]
    public void ShowPostOptionsDialog()
    {
    }
}

Then, in this instance, you can use the interface in your x:DataType.

[williambuchanan2]

Yes that solves the problem. I was hoping to avoid doing that due to the amount of additional properties I have to create, but probably makes sense to do it.

Thanks for the tip...

[bijington]

@stephenquan is correct with best practices. If you are keeping this control internal and want to avoid the overhead of all properties you could use an interface or base class as the x:DataType instead.

[williambuchanan2]

I had tried an interface, and a base class - neither of these worked. However the above does solve the problem.