vb.net 设计 wpf 左侧多级导航菜单布局-QT开发中文网

在WPF中，可以使用TreeView控件来实现多级导航菜单布局。具体步骤如下：

在MainWindow.xaml中添加一个TreeView控件。
为TreeView控件添加节点和子节点，每个节点表示一个菜单项。
设置TreeView的ItemTemplate属性，用于定义菜单项的样式。可以使用StackPanel或Grid等面板控件来设置菜单项的布局。
添加事件处理程序，当用户点击某个菜单项时，根据该菜单项对应的页面内容进行切换显示。

示例代码如下：

<Window x:Class="NavigationMenu.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <!-- 左侧导航栏 -->
        <DockPanel Margin="10">
            <TreeView DockPanel.Dock="Left" x:Name="NavigationTree" ItemsSource="{Binding}">
                <TreeView.ItemTemplate>
                    <HierarchicalDataTemplate ItemsSource="{Binding Children}">
                        <TextBlock Text="{Binding Name}"/>
                    </HierarchicalDataTemplate>
                </TreeView.ItemTemplate>
            </TreeView>
        </DockPanel>

        <!-- 右侧内容区域 -->
        <Frame Margin="10" Grid.Column="1" x:Name="ContentFrame"/>

    </Grid>
</Window>

在后台代码中，我们需要创建对应的ViewModel类来绑定到TreeView上，并提供页面切换逻辑。示例代码如下：

Public Class NavigationViewModel
    Implements INotifyPropertyChanged

    Public Property Name As String
    Public Property Children As ObservableCollection(Of NavigationViewModel)

    Private _content As Object
    Public Property Content As Object
        Get
            Return _content
        End Get
        Set(value As Object)
            _content = value
            NotifyPropertyChanged("Content")
        End Set
    End Property

    Public Sub New(name As String, children As List(Of NavigationViewModel))
        Me.Name = name
        Me.Children = New ObservableCollection(Of NavigationViewModel)(children)
    End Sub

    Public Event PropertyChanged(sender As Object, e As PropertyChangedEventArgs) Implements INotifyPropertyChanged.PropertyChanged

    Private Sub NotifyPropertyChanged(propertyName As String)
        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
    End Sub

End Class

Public Class MainWindowViewModel

    Public ReadOnly Property Navigations() As List(Of NavigationViewModel)
        Get
            Dim navs As New List(Of NavigationViewModel)

            Dim page1Nav = New NavigationViewModel("页面1", Nothing) With {.Content = New Page1}
            Dim page2Nav = New NavigationViewModel("页面2", Nothing) With {.Content = New Page2}
            Dim subNavs = {page1Nav, page2Nav}

            navs.Add(New NavigationViewModel("主页", subNavs.ToList()))

            Return navs
        End Get
    End Property

End Class

在MainWindow.xaml.cs中，将MainWindow的DataContext设置为MainWindowViewModel即可。并添加TreeView的SelectedItemChanged事件处理程序来切换页面内容。

public partial class MainWindow : Window {

  public MainWindow() {
      InitializeComponent();
      this.DataContext = new MainWindowViewModel();
      this.NavigationTree.SelectedItemChanged += OnNavigationTreeSelectedItemChanged;
  }

  private void OnNavigationTreeSelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e) {
      var selectedItem = (NavigationViewModel)e.NewValue;

      if (selectedItem != null && selectedItem.Content != null) {
          this.ContentFrame.Navigate(selectedItem.Content);
      }
  }

}

通过以上步骤，就可以实现一个简单的WPF左侧多级导航菜单布局了。