How do I bind commands to a bound itemList in a Avalonia UI? - xaml

Question

I created a menu in Avalonia UI. But I guess this would possible with all types of bound lists.
I have a stringlist defined in my ViewModel ( List<CaptureDeviceDescriptor?> DeviceList ) where the user can select the active webcam. But the command binding fails, as the items are not clickable.
What am I doing wrong? Below is the menu with binding. All other functionality seems to work just fine. Just this command binding ....
I defined the Command as:
SetWebCam = ReactiveCommand.Create<CaptureDeviceDescriptor?>(SetTheWebCam); The other definitions are like:
public ReactiveCommand<CaptureDeviceDescriptor?, Unit> SetWebCam { get; }
private void SetTheWebCam(CaptureDeviceDescriptor? e)
{
Console.WriteLine(e);
}
But I don't really understand what is missing.
<Menu Grid.Column="1" Height="32" Padding="0" Margin="0">
<Menu.Styles>
<Style Selector="MenuItem.deviceList MenuItem">
<Setter Property="Header" Value="{Binding Name}"/>
<Setter Property="Command" Value="{Binding Path=DataContext.SetWebCam, RelativeSource={RelativeSource AncestorType=Window}}" />
<Setter Property="CommandParameter" Value="{Binding Self}" />
</Style>
</Menu.Styles>
<MenuItem Height="32" Width="45">
<MenuItem.Header>
<Path
Margin="4"
HorizontalAlignment="Center"
Stretch="Uniform"
Stroke="Black"
StrokeThickness="0.5"
Fill="White" Data="M0,8 A1.778,-1.778 0 0 0 3.556,8 A1.778,-1.778 0 0 0 0,8 M0,1.778 A1.778,-1.778 0 0 0 3.556,1.778 A1.778,-1.778 0 0 0 0,1.778 M0,14.22 A1.778,-1.778 0 0 0 3.556,14.22 A1.778,-1.778 0 0 0 0,14.22" />
</MenuItem.Header>
<MenuItem Header="Use silhouette">
<MenuItem.Icon>
<Path
Stroke="Black"
StrokeThickness="0.5"
Stretch="Uniform"
Fill="White" Data="M4,4 A4,4 0 0 1 12,4 L12,5.6 A4,4 0 0 1 4,5.6 L4,4 z M0,13.34 A15.92,15.92 0 0 1 8,11.2 C10.91,11.2 13.65,11.98 16,13.34 L16,16 L0,16 L0,13.34 z" />
</MenuItem.Icon>
</MenuItem>
<Separator />
<MenuItem Header="Rotate 90 CW">
<MenuItem.Icon>
<Path
Stroke="Black"
StrokeThickness="0.5"
Stretch="Uniform"
Fill="White" Data="M1.524,0.7619 L3.81,0.7619 A1.524,1.524 0 0 1 5.333,2.286 L5.333,14.48 A1.524,1.524 0 0 1 3.81,16 L1.524,16 A1.524,1.524 0 0 1 0,14.48 L0,2.286 A1.524,1.524 0 0 1 1.524,0.7619 M13.71,10.67 A1.524,1.524 0 0 1 15.24,12.19 L15.24,14.48 A1.524,1.524 0 0 1 13.71,16 L6.857,16 L6.857,10.67 L13.71,10.67 M9.143,2.286 A6.095,6.095 0 0 1 15.24,8.381 L15.19,9.143 L13.65,9.143 L13.71,8.381 A4.571,4.571 0 0 0 9.143,3.81 L9.143,6.095 L6.095,3.048 L9.143,0 L9.143,2.286 z" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Rotate 90 CCW">
<MenuItem.Icon>
<Path
Stroke="Black"
StrokeThickness="0.5"
Stretch="Uniform"
Fill="White" Data="M6.095,2.286 L6.095,0 L9.143,3.048 L6.095,6.095 L6.095,3.81 A4.571,4.571 0 0 0 1.524,8.381 L1.585,9.143 L0.04571,9.143 L0,8.381 A6.095,6.095 0 0 1 6.095,2.286 M11.43,0.7619 L13.71,0.7619 A1.524,1.524 0 0 1 15.24,2.286 L15.24,14.48 A1.524,1.524 0 0 1 13.71,16 L11.43,16 A1.524,1.524 0 0 1 9.905,14.48 L9.905,2.286 A1.524,1.524 0 0 1 11.43,0.7619 M1.524,10.67 L8.381,10.67 L8.381,16 L1.524,16 A1.524,1.524 0 0 1 0,14.48 L0,12.19 A1.524,1.524 0 0 1 1.524,10.67 z" />
</MenuItem.Icon>
</MenuItem>
<Separator />
<MenuItem Classes="deviceList"
Header="Choose webcam"
Items="{Binding DeviceList}" />
</MenuItem>
</Menu>

Answer 1

After a few debugging rounds (aka Trial and Error ;) ) I found I was binding to the wrong RelativeSource. This is working as a charm. Binding to the root element (in my case a Panel)
<Menu.Styles>
<Style Selector="MenuItem.deviceList MenuItem">
<Setter Property="Header" Value="{Binding Name}"/>
<Setter Property="Command" Value="{Binding Path=DataContext.SetWebCam, RelativeSource={RelativeSource AncestorType=Panel}}" />
<Setter Property="CommandParameter" Value="{Binding }" />
</Style>
</Menu.Styles>