登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 安全 ›笔记：在 WPF 中通过侧边导航栏实现内容切换 ...

笔记：在 WPF 中通过侧边导航栏实现内容切换

皇甫佳文 前天 18:05
猛犸象科技工作室:网站开发，备案域名，渗透，服务器出租，DDOS/CC攻击，TG加粉引流
本篇笔记主要记录，如何在 WPF 中利用 ListBox+ContentControl+UserControl 三个控件，以侧边导航栏的形式实现内容切换。
效果图如下：
  1. ┌─────────┬────────────────────────────┐
  2. │  Title  │<UserControl x:
  3.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7.              xmlns:local="clr-namespace:TryDemo"
  8.              mc:Ignorable="d"
  9.              d:DesignHeight="300" d:DesignWidth="300">
  10.    
  11.     <Grid Background="LightBlue">
  12.         <TextBlock Text="首页"
  13.                    HorizontalAlignment="Center"
  14.                    VerticalAlignment="Center"
  15.                    FontSize="20"/>
  16.     </Grid>
  17. </UserControl>        │
  18. ├─────────┤<UserControl x:
  19.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  20.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  21.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  22.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  23.              xmlns:local="clr-namespace:TryDemo"
  24.              mc:Ignorable="d"
  25.              d:DesignHeight="300" d:DesignWidth="300">
  26.    
  27.     <Grid Background="LightBlue">
  28.         <TextBlock Text="首页"
  29.                    HorizontalAlignment="Center"
  30.                    VerticalAlignment="Center"
  31.                    FontSize="20"/>
  32.     </Grid>
  33. </UserControl>        │
  34. │  Title  │<UserControl x:
  35.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  36.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  37.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  38.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  39.              xmlns:local="clr-namespace:TryDemo"
  40.              mc:Ignorable="d"
  41.              d:DesignHeight="300" d:DesignWidth="300">
  42.    
  43.     <Grid Background="LightBlue">
  44.         <TextBlock Text="首页"
  45.                    HorizontalAlignment="Center"
  46.                    VerticalAlignment="Center"
  47.                    FontSize="20"/>
  48.     </Grid>
  49. </UserControl>        │
  50. ├─────────┤<UserControl x:
  51.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  52.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  53.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  54.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  55.              xmlns:local="clr-namespace:TryDemo"
  56.              mc:Ignorable="d"
  57.              d:DesignHeight="300" d:DesignWidth="300">
  58.    
  59.     <Grid Background="LightBlue">
  60.         <TextBlock Text="首页"
  61.                    HorizontalAlignment="Center"
  62.                    VerticalAlignment="Center"
  63.                    FontSize="20"/>
  64.     </Grid>
  65. </UserControl>        │
  66. │  Title  │<UserControl x:
  67.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  68.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  69.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  70.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  71.              xmlns:local="clr-namespace:TryDemo"
  72.              mc:Ignorable="d"
  73.              d:DesignHeight="300" d:DesignWidth="300">
  74.    
  75.     <Grid Background="LightBlue">
  76.         <TextBlock Text="首页"
  77.                    HorizontalAlignment="Center"
  78.                    VerticalAlignment="Center"
  79.                    FontSize="20"/>
  80.     </Grid>
  81. </UserControl>        │
  82. ├─────────┤           Content          │
  83. │         │<UserControl x:
  84.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  85.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  86.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  87.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  88.              xmlns:local="clr-namespace:TryDemo"
  89.              mc:Ignorable="d"
  90.              d:DesignHeight="300" d:DesignWidth="300">
  91.    
  92.     <Grid Background="LightBlue">
  93.         <TextBlock Text="首页"
  94.                    HorizontalAlignment="Center"
  95.                    VerticalAlignment="Center"
  96.                    FontSize="20"/>
  97.     </Grid>
  98. </UserControl>        │
  99. │         │<UserControl x:
  100.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  101.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  102.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  103.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  104.              xmlns:local="clr-namespace:TryDemo"
  105.              mc:Ignorable="d"
  106.              d:DesignHeight="300" d:DesignWidth="300">
  107.    
  108.     <Grid Background="LightBlue">
  109.         <TextBlock Text="首页"
  110.                    HorizontalAlignment="Center"
  111.                    VerticalAlignment="Center"
  112.                    FontSize="20"/>
  113.     </Grid>
  114. </UserControl>        │
  115. │         │<UserControl x:
  116.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  117.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  118.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  119.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  120.              xmlns:local="clr-namespace:TryDemo"
  121.              mc:Ignorable="d"
  122.              d:DesignHeight="300" d:DesignWidth="300">
  123.    
  124.     <Grid Background="LightBlue">
  125.         <TextBlock Text="首页"
  126.                    HorizontalAlignment="Center"
  127.                    VerticalAlignment="Center"
  128.                    FontSize="20"/>
  129.     </Grid>
  130. </UserControl>        │
  131. │         │<UserControl x:
  132.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  133.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  134.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  135.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  136.              xmlns:local="clr-namespace:TryDemo"
  137.              mc:Ignorable="d"
  138.              d:DesignHeight="300" d:DesignWidth="300">
  139.    
  140.     <Grid Background="LightBlue">
  141.         <TextBlock Text="首页"
  142.                    HorizontalAlignment="Center"
  143.                    VerticalAlignment="Center"
  144.                    FontSize="20"/>
  145.     </Grid>
  146. </UserControl>        │
  147. │         │<UserControl x:
  148.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  149.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  150.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  151.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  152.              xmlns:local="clr-namespace:TryDemo"
  153.              mc:Ignorable="d"
  154.              d:DesignHeight="300" d:DesignWidth="300">
  155.    
  156.     <Grid Background="LightBlue">
  157.         <TextBlock Text="首页"
  158.                    HorizontalAlignment="Center"
  159.                    VerticalAlignment="Center"
  160.                    FontSize="20"/>
  161.     </Grid>
  162. </UserControl>        │
  163. └─────────┴────────────────────────────┘
复制代码
所使用的开发环境如下：

  • 语言版本：.Net 10
  • MVVM 框架：CommunityToolkit.Mvvm 8.4.0
以事件驱动的实现方案

具体实现思路为，利用 ListBox 控件搭建导航栏，然后创建选中事件，如果事件被触发，则将对应的 UserControl 控件赋值给 ContentControl 控件的 Content 属性，至此实现内容切换。

  • XAML 代码
  1. <DockPanel>
  2.    
  3.     <ListBox x:Name="NavBar" SelectionChanged="NavBar_OnSelectionChanged">
  4.         <ListBoxItem>首页</ListBoxItem>
  5.         <ListBoxItem>设置</ListBoxItem>
  6.         <ListBoxItem>关于</ListBoxItem>
  7.     </ListBox>
  8.    
  9.     <ContentControl x:Name="ContCtrl"></ContentControl>
  10. </DockPanel>
复制代码

  • 后置代码
  1. public partial class MainWindow : Window
  2. {
  3.     public MainWindow()
  4.     {
  5.         InitializeComponent();
  7.         // 初始化导航栏，默认选中第一项，并设置内容控件显示首页视图
  8.         NavBar.SelectedIndex = 0;
  9.         ContCtrl.Content = new HomeView();
  10.     }
  12.     // 当导航栏选择项发生改变时，触发的事件处理函数
  13.     private void NavBar_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
  14.     {
  15.         // 获取当前选中的列表项
  16.         var item = NavBar.SelectedItem as ListBoxItem;
  18.         // 根据选中项的内容切换到对应的视图页面
  19.         ContCtrl.Content = item?.Content switch
  20.         {
  21.             "首页" => new HomeView(),
  22.             "设置" => new SettingView(),
  23.             "关于" => new AboutView(),
  24.             _ => ContCtrl
  25.         };
  26.     }
  27. }
复制代码

  • 自定义 UserControl 控件内容。由于现阶段实现的很简单，三个用户控件只有文本不同，所以在这里只给出了其中一个 UserControl 控件的内容
  1. <UserControl x:
  2.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  5.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  6.              xmlns:local="clr-namespace:TryDemo"
  7.              mc:Ignorable="d"
  8.              d:DesignHeight="300" d:DesignWidth="300">
  9.    
  10.     <Grid Background="LightBlue">
  11.         <TextBlock Text="首页"
  12.                    HorizontalAlignment="Center"
  13.                    VerticalAlignment="Center"
  14.                    FontSize="20"/>
  15.     </Grid>
  16. </UserControl>
复制代码
MVVM 模式的实现方案

与事件驱动的实现思路，并没有多大的区别，依旧是检测 ListBox 选择项是否更改，如果发生变化，则修改 ContentControl 的 Content 属性，实现动态切换。
在这里，将事件触发的逻辑改为了数据绑定，当被绑定的属性值发生变化，会调用更改方法。
同时也进行了部分升级，比如：

  • 自定义 ListBox 模板，显示个性化内容，同时导航项也变为从后台添加，依此可以实现动态更新。
  • 关于导航项的数据，则变为了自定义的记录结构，其中定义了要显示的内容，同时保存了对应要切换的视图类型，以便简化视图切换，直接使用反射获取对应的视图实例。
  • 使用 CommunityToolkit.Mvvm 框架，简化 MVVM 模式的实现。
下面就是代码实现了：

  • XAML 代码
  1. <UserControl x:
  2.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  5.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  6.              xmlns:local="clr-namespace:TryDemo"
  7.              mc:Ignorable="d"
  8.              d:DesignHeight="300" d:DesignWidth="300">
  9.    
  10.     <Grid Background="LightBlue">
  11.         <TextBlock Text="首页"
  12.                    HorizontalAlignment="Center"
  13.                    VerticalAlignment="Center"
  14.                    FontSize="20"/>
  15.     </Grid>
  16. </UserControl><UserControl x:
  17.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  18.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  19.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  20.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  21.              xmlns:local="clr-namespace:TryDemo"
  22.              mc:Ignorable="d"
  23.              d:DesignHeight="300" d:DesignWidth="300">
  24.    
  25.     <Grid Background="LightBlue">
  26.         <TextBlock Text="首页"
  27.                    HorizontalAlignment="Center"
  28.                    VerticalAlignment="Center"
  29.                    FontSize="20"/>
  30.     </Grid>
  31. </UserControl><UserControl x:
  32.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  33.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  34.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  35.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  36.              xmlns:local="clr-namespace:TryDemo"
  37.              mc:Ignorable="d"
  38.              d:DesignHeight="300" d:DesignWidth="300">
  39.    
  40.     <Grid Background="LightBlue">
  41.         <TextBlock Text="首页"
  42.                    HorizontalAlignment="Center"
  43.                    VerticalAlignment="Center"
  44.                    FontSize="20"/>
  45.     </Grid>
  46. </UserControl><UserControl x:
  47.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  48.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  49.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  50.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  51.              xmlns:local="clr-namespace:TryDemo"
  52.              mc:Ignorable="d"
  53.              d:DesignHeight="300" d:DesignWidth="300">
  54.    
  55.     <Grid Background="LightBlue">
  56.         <TextBlock Text="首页"
  57.                    HorizontalAlignment="Center"
  58.                    VerticalAlignment="Center"
  59.                    FontSize="20"/>
  60.     </Grid>
  61. </UserControl><UserControl x:
  62.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  63.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  64.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  65.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  66.              xmlns:local="clr-namespace:TryDemo"
  67.              mc:Ignorable="d"
  68.              d:DesignHeight="300" d:DesignWidth="300">
  69.    
  70.     <Grid Background="LightBlue">
  71.         <TextBlock Text="首页"
  72.                    HorizontalAlignment="Center"
  73.                    VerticalAlignment="Center"
  74.                    FontSize="20"/>
  75.     </Grid>
  76. </UserControl><UserControl x:
  77.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  78.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  79.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  80.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  81.              xmlns:local="clr-namespace:TryDemo"
  82.              mc:Ignorable="d"
  83.              d:DesignHeight="300" d:DesignWidth="300">
  84.    
  85.     <Grid Background="LightBlue">
  86.         <TextBlock Text="首页"
  87.                    HorizontalAlignment="Center"
  88.                    VerticalAlignment="Center"
  89.                    FontSize="20"/>
  90.     </Grid>
  91. </UserControl><UserControl x:
  92.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  93.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  94.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  95.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  96.              xmlns:local="clr-namespace:TryDemo"
  97.              mc:Ignorable="d"
  98.              d:DesignHeight="300" d:DesignWidth="300">
  99.    
  100.     <Grid Background="LightBlue">
  101.         <TextBlock Text="首页"
  102.                    HorizontalAlignment="Center"
  103.                    VerticalAlignment="Center"
  104.                    FontSize="20"/>
  105.     </Grid>
  106. </UserControl><UserControl x:
  107.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  108.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  109.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  110.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  111.              xmlns:local="clr-namespace:TryDemo"
  112.              mc:Ignorable="d"
  113.              d:DesignHeight="300" d:DesignWidth="300">
  114.    
  115.     <Grid Background="LightBlue">
  116.         <TextBlock Text="首页"
  117.                    HorizontalAlignment="Center"
  118.                    VerticalAlignment="Center"
  119.                    FontSize="20"/>
  120.     </Grid>
  121. </UserControl><UserControl x:
  122.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  123.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  124.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  125.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  126.              xmlns:local="clr-namespace:TryDemo"
  127.              mc:Ignorable="d"
  128.              d:DesignHeight="300" d:DesignWidth="300">
  129.    
  130.     <Grid Background="LightBlue">
  131.         <TextBlock Text="首页"
  132.                    HorizontalAlignment="Center"
  133.                    VerticalAlignment="Center"
  134.                    FontSize="20"/>
  135.     </Grid>
  136. </UserControl>   
复制代码

  • 自定义的视图模型
[code]public partial class MainWindowViewModel : ObservableObject{    // 被选中的导航项属性    [ObservableProperty]    private NavItem _selectedItem;        // 当前显示的视图对象属性    [ObservableProperty]    private object _currentView;        // 导航栏项目数组，包含所有可用的导航选项    public NavItem[] NavItems { get; init; }        public MainWindowViewModel()    {        // 初始化三个导航项：首页、设置、关于，分别关联对应的视图类型        NavItems =        [            new NavItem("首页", "
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
笔记WPF通过侧边导航

使用道具 举报

相关推荐
羔迪
4 小时前

举报

程序园永久vip申请，500美金$，无限下载程序园所有程序/软件/数据/等
鼓励转贴优秀软件安全工具和文档！
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
皇甫佳文
4 小时前

0

粉丝关注

16

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫