從零開始搭建Wpf基礎5-無限級菜單MVVM實現

前言：添加菜單控制

第一步：在MainWindow主窗口中添加一行，放置菜單，菜單項在xaml中編碼，MenuItem的Command采用MVVM的綁定方法。

<Grid>
      <Grid.RowDefinitions>
          <RowDefinition Height="Auto"/>
          <RowDefinition/>
      </Grid.RowDefinitions>
      <Menu x:Name="MenuControl" Background="Transparent">
          <MenuItem Header="菜單">
              <MenuItem Header="Login" Command="{Binding MenuCommand}" CommandParameter="LoginView" />
              <MenuItem Header="Introduce" Command="{Binding MenuCommand}" CommandParameter="IntroduceView" />
          </MenuItem>
      </Menu>
      <ContentControl Grid.Row="1" prism:RegionManager.RegionName="MainContentRegion"/>
  </Grid>

第二步，在MainWIndowViewModel中，添加MenuCommand的命令方法，點擊不同的菜單切換不同的界面。

class MainWindowViewModel : BindableBase
{
    IContainerExtension _container;
    IRegionManager _regionManager;

    public MainWindowViewModel(IContainerExtension container, IRegionManager regionManager)
    {
        _container = container;
        _regionManager = regionManager;

    }

    private ICommand _menuCommand;
    public ICommand MenuCommand
    {
        get
        {
            return this._menuCommand ?? (this._menuCommand = new DelegateCommand<string>(para => this.Menu(para)));
        }
    }



    private void Menu(string viewname)
    {
        _regionManager.RequestNavigate("MainContentRegion", viewname);
    }
}

第三步，菜單在xaml中寫死，不夠靈活，比如根據不同的用戶獲取不同的菜單，菜單也用綁定的方法實現。建立一個菜單類，因為菜單是樹形結構，所以需要Children嵌套類，實現無限級的菜單。

public class AMenuItem : BindableBase
{
    private string _glyph;
    public string Glyph
    {
        get { return _glyph; }
        set
        {
            SetProperty(ref _glyph, value);
        }
    }

    private string _label;
    public string Label
    {
        get { return _label; }
        set
        {
            SetProperty(ref _label, value);
        }
    }

    public string Code { get; set; }//區分點擊的菜單
    public int Type { get; set; }//區分菜單還是目錄

    private ICommand _command;
    public ICommand Command
    {
        get { return _command; }
        set
        {
            SetProperty(ref _command, value);
        }
    }

    private ObservableCollection<AMenuItem> _children = new ObservableCollection<AMenuItem>();

    public ObservableCollection<AMenuItem> Children
    {
        get { return _children; }
        set
        {
            SetProperty(ref _children, value);
        }
    }

    public void AddChildren(AMenuItem child)
    {
        this.Children.Add(child);
    }
}

第四步 MainWindow的菜單部分代碼改成：

<Menu x:Name="MenuControl" ItemsSource="{Binding MenuItems}" ItemContainerStyle="{StaticResource MenuItemStyle}"  Background="Transparent"/>

還需要改下樣式部分

<!--頂部菜單欄-->
<HierarchicalDataTemplate DataType="{x:Type model:AMenuItem}" ItemsSource="{Binding Path=Children}">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <TextBlock x:Name="Header" Grid.Column="1" Margin="5,0,0,0"
                        VerticalAlignment="Center"
                        Text="{Binding Label}" />
    </Grid>
</HierarchicalDataTemplate>
<!--頂部菜單-->
<Style x:Key="MenuItemStyle" TargetType="{x:Type MenuItem}" BasedOn="{StaticResource MahApps.Styles.MenuItem}">
    <Setter Property="MenuItem.Command" Value="{Binding Command}"/>
    <Setter Property="MenuItem.CommandParameter" Value="{Binding Code}"/>         
</Style>

第五步 在MainWIndowViewModel生成菜單集合

private ObservableCollection<AMenuItem> _menuItems = new ObservableCollection<AMenuItem>();
public ObservableCollection<AMenuItem> MenuItems
{
    get { return _menuItems; }
    set
    {
        SetProperty(ref _menuItems, value);
    }
}

private void InitMenu()
{
    AMenuItem menu = new AMenuItem() { Label = "菜單", Type = 0 };
    MenuItems.Add(menu);

    menu.AddChildren(new AMenuItem() { Label = "Login", Code = "LoginView", Type = 1, Command = new DelegateCommand<string>(para => this.Menu(para)) });
    menu.AddChildren(new AMenuItem() { Label = "Introduce", Code = "IntroduceView", Type = 1, Command = new DelegateCommand<string>(para => this.Menu(para)) });
}

好了，運行看效果

后續：下一章將實現，主界面。

源碼地址：https://gitee.com/akwkevin/aistudio.-wpf.-client.-stepby-step

另外推薦一下我的Wpf客戶端框架：https://gitee.com/akwkevin/aistudio.-wpf.-aclient