Wpf动态菜单和子菜单使用xaml

Question

我希望动态菜单和子菜单使用纯xaml而不是代码。我试过下面的代码：

<Menu Grid.Row="1" 
      Background="Transparent" 
      ItemsSource="{Binding MenuList, UpdateSourceTrigger=PropertyChanged}">
    <Menu.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </Menu.ItemsPanel>

    <Menu.ItemTemplate>
        <DataTemplate>
            <MenuItem Style="{StaticResource mainMenu}" 
                      Background="Transparent" 
                      Command="{Binding NavigateToView}" 
                      >
                <MenuItem.Header>
                    <StackPanel Orientation="Horizontal">
                        <Rectangle Width="30" Height="30" Fill="White" Margin="0,0,10,0">
                            <Rectangle.OpacityMask>
                                <VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_add}" />
                            </Rectangle.OpacityMask>
                        </Rectangle>
                        <TextBlock Foreground="White" VerticalAlignment="Center" FontSize="18" Text="{Binding Name}"></TextBlock>
                    </StackPanel>
                </MenuItem.Header>
            </MenuItem>
        </DataTemplate>
    </Menu.ItemTemplate>
</Menu>

我的菜单和子菜单类如下所示：

public class DynamicMenuListModel : BaseModel
{
    public int MenuId { get; set; }
    public string Name { get; set; }
    public string ViewName { get; set; }
    public bool HasChildMenu { get; set; }
    public string Icon { get; set; }
    public List<DynamicSubmenuMenuListModel> SubMenus { get; set; }
}

public class DynamicSubmenuMenuListModel : BaseModel
{
    public int SubMenuId { get; set; }
    public string Name { get; set; }
    public string ViewName { get; set; }
    public string Icon { get; set; }
}

菜单已成功创建，但设计与我之前实施的静态菜单完全不同。以下是我之前使用静态数据实现的代码：

<Menu Grid.Row="1" Background="Transparent">
    <Menu.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </Menu.ItemsPanel>

    <MenuItem Background="Transparent" Style="{StaticResource mainMenu}">
        <MenuItem.Header>
            <StackPanel Orientation="Horizontal">
                <Rectangle Width="30" Height="30" Fill="White" Margin="0,0,10,0">
                    <Rectangle.OpacityMask>
                        <VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_home_location_round}" />
                    </Rectangle.OpacityMask>
                </Rectangle>
                <TextBlock Foreground="White" VerticalAlignment="Center" FontSize="18">Location</TextBlock>
            </StackPanel>
        </MenuItem.Header>
        <MenuItem Width="250"  Command="{Binding LoadCountry}" Background="{DynamicResource AccentColorBrush}" Foreground="White" Header="Country">
            <MenuItem.Icon>
                <Rectangle Width="10" Height="10" Fill="White" Margin="5,0,10,0">
                    <Rectangle.OpacityMask>
                        <VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_moon_full}" />
                    </Rectangle.OpacityMask>
                </Rectangle>
            </MenuItem.Icon>
        </MenuItem>
        <MenuItem Background="{DynamicResource AccentColorBrush}" Command="{Binding LoadState}" Foreground="White" Header="State">
            <MenuItem.Icon>
                <Rectangle Width="10" Height="10" Fill="White" Margin="5,0,10,0">
                    <Rectangle.OpacityMask>
                        <VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_moon_full}" />
                    </Rectangle.OpacityMask>
                </Rectangle>
            </MenuItem.Icon>
        </MenuItem>
        <MenuItem Command="{Binding LoadCity}" Background="{DynamicResource AccentColorBrush}" Foreground="White" Header="City">
            <MenuItem.Icon>
                <Rectangle Width="10" Height="10" Fill="White" Margin="5,0,10,0">
                    <Rectangle.OpacityMask>
                        <VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_moon_full}" />
                    </Rectangle.OpacityMask>
                </Rectangle>
            </MenuItem.Icon>
        </MenuItem>
    </MenuItem>
<Menu>

此外，当我使用Observable集合绑定数据时，Command无法正常工作。我不知道如何弄清楚这是否有更清晰的方法将动态数据绑定到菜单而不使用代码？我已经回顾了关于堆栈溢出的其他帖子，但还没有提供明确的实现。