如何使WPF菜单控制网格的内容

Question

我正在尝试在C＃WPF中构建动态菜单。

我从具有其他模型（导航）的ObservableCollection的模型生成菜单，此列表中的每个模型都有一个名称和一个命令。模型列在<Window.Resources>我想要的是，当点击MenuItem时，ContentControl Content="{Binding SelectedPage}"应将内容更改为相应的UserControl。

到目前为止我的代码就是这个。但是我不明白如何将MenuItem的点击与内容的实际更改链接起来。

<Window
  ....
  <Window.Resources>
    <DataTemplate DataType="{x:Type cm:HostListModel}">
        <uc:HostList />
    </DataTemplate>
    <DataTemplate DataType="{x:Type cm:WorkerListModel}">
        <uc:WorkerList />
    </DataTemplate>
    <DataTemplate DataType="{x:Type cm:MeasureListModel}">
        <uc:MeasureList />
    </DataTemplate>
    <DataTemplate DataType="{x:Type cmg:ChartModel}">
        <uc:Chart />
    </DataTemplate>
  </Window.Resources>
  <Grid>  
    ....
    <StackPanel Grid.Column="0"> 
        <Menu>
            <MenuItem x:Name="StartBtn" Header="_Start" Click="StartBtn_Click" />
            <MenuItem x:Name="SaveBtn" Header="_Save" Click="SaveBtn_Click" />
        </Menu>
        <Menu x:Name="Menu" IsMainMenu="true" ItemsSource="{Binding Navigation}">
            <Menu.ItemContainerStyle>
                <Style>
                    <Setter Property="MenuItem.Header" Value="{Binding Name}" />
                    <Setter Property="MenuItem.Command" Value="{Binding Command}" />
                </Style>
            </Menu.ItemContainerStyle>
        </Menu>
    </StackPanel>
    <Grid x:Name="MainGrid" Grid.Column="1">
        <ContentControl Content="{Binding SelectedPage}"/>
    </Grid>      
  </Grid>
</Window>

我尝试了类似的解决方案，但我不喜欢该菜单的外观和感觉。在这里，我只需点击一个＆＃34;按钮＆＃34;并且内容已更改为单击的项目。它看起来像这样。

<ListBox x:Name="ListBoxMenu" ItemsSource="{Binding Navigation}" BorderThickness="0">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <TextBlock  Text="{Binding Name}" />
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>
........
<Grid x:Name="MainGrid" Grid.Column="1">
  <ContentControl Content="{Binding ElementName=ListBoxMenu Path=SelectedItem}"/>
</Grid>