如何将命令绑定到 Avalonia UI 中的绑定 itemList？

Question

我在 Avalonia UI 中创建了一个菜单。 但我想这对于所有类型的绑定列表都是可能的。

我在我的 ViewModel ( List<CaptureDeviceDescriptor?> DeviceList ) 中定义了一个字符串列表，用户可以在其中 select 激活网络摄像头。 但是命令绑定失败，因为项目不可点击。

我究竟做错了什么？ 下面是带有绑定的菜单。 所有其他功能似乎都可以正常工作。 只是这个命令绑定....

我将命令定义为： SetWebCam = ReactiveCommand.Create<CaptureDeviceDescriptor?>(SetTheWebCam); 其他定义如下：

public ReactiveCommand<CaptureDeviceDescriptor?, Unit> SetWebCam { get; }

private void SetTheWebCam(CaptureDeviceDescriptor? e)
{
    Console.WriteLine(e);
}

但我真的不明白缺少什么。

                    <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

经过几轮调试（又名试错法；））我发现我绑定到错误的 RelativeSource。 这是一种魅力。 绑定到根元素（在我的例子中是一个面板）

                        <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>