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

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>