当前位置：首页 > 编程语言 > .NET CORE(C#) WPF 方便的实现用户控件切换（祝大家新年快乐）

.NET CORE(C#) WPF 方便的实现用户控件切换（祝大家新年快乐）

2021-01-15 15:16

阅读：761

标签：模块   ber   dem   bre   gif   一个   blend   template   模块化   

原文:.NET CORE(C#) WPF 方便的实现用户控件切换（祝大家新年快乐）

微信公众号：Dotnet9，网站：Dotnet9，问题或建议：请网站留言，
如果对您有所帮助：欢迎赞赏。

.NET CORE(C#) WPF 方便的实现用户控件切换（祝大家新年快乐）

快到2020年了，祝大家新年快乐，今年2019最后一更，谢谢大家支持！

阅读导航

  1. 本文背景
  2. 代码实现
  3. 本文参考
  4. 源码

1. 本文背景

一个系统主界面，放上一个菜单，点击菜单在客户区切换不同的展示界面，这是很常规的设计，见下面展示效果图：

技术图片

左侧一个菜单，点击菜单，右侧切换界面，界面切换动画使用MD控件的组件实现（自己使用动画也能实现）。

2. 代码实现

使用 .NET CORE 3.1 创建名为 “MenuChange” 的WPF模板项目，添加1个Nuget库：MaterialDesignThemes，版本为最新预览版3.1.0-ci948。

解决方案主要文件目录组织结构：

  • AnimatedMenu
    • App.xaml
    • MainWindow.xaml
      • MainWindow.xaml.cs
    • ..[数个演示模块用户控件]

2.1 引入样式

文件【App.xaml】，在 StartupUri 中设置启动的视图【MainWindow.xaml】，并在【Application.Resources】节点增加 MaterialDesignThemes库的样式文件：

Application.Resources>
ResourceDictionary> ResourceDictionary.MergedDictionaries> ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" /> ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" /> ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml" /> ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Indigo.xaml" /> ResourceDictionary.MergedDictionaries> ResourceDictionary> Application.Resources>

2.2 演示窗体

文件【MainWindow.xaml】，布局代码、动画代码都在此文件中，源码如下：

Window x:Class="MenuChange.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Height="600" Width="1024" WindowStartupLocation="CenterScreen" ResizeMode="NoResize" WindowStyle="None" >
    Grid Background="#FFEEEEEE" MouseDown="Grid_MouseDown">
        StackPanel VerticalAlignment="Top">
            Grid Background="#FF0069C0" Height="10"/>
            Grid Margin="5">
                StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
                    TextBlock Text="Dotnet9.com" VerticalAlignment="Center" FontSize="20" FontFamily="Champagne & Limousines" Margin="20 0"/>
                    Button Width="30" Height="30" Background="{x:Null}" BorderBrush="{x:Null}" Padding="0" Foreground="Gray">
                        materialDesign:PackIcon Kind="Wechat"/>
                    Button>
                    Button Width="30" Height="30" Background="{x:Null}" BorderBrush="{x:Null}" Padding="0" Foreground="Gray">
                        materialDesign:PackIcon Kind="Qqchat"/>
                    Button>
                    Button Width="30" Height="30" Background="{x:Null}" BorderBrush="{x:Null}" Padding="0" Foreground="Gray">
                        materialDesign:PackIcon Kind="GithubBox"/>
                    Button>
                StackPanel>
                StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="10 0">
                    Button Width="30" Height="30" Background="{x:Null}" BorderBrush="{x:Null}" Padding="0" Foreground="Gray">
                        materialDesign:PackIcon Kind="BellOutline"/>
                    Button>
                    Button Width="30" Height="30" Background="{x:Null}" BorderBrush="{x:Null}" Padding="0" Foreground="Gray" Margin="0 0 10 0">
                        materialDesign:PackIcon Kind="Settings"/>
                    Button>
                    Button x:Name="ButtonFechar" Width="30" Height="30" Background="{x:Null}" BorderBrush="{x:Null}" Padding="0" Foreground="Gray" Click="ButtonFechar_Click">
                        materialDesign:PackIcon Kind="Close"/>
                    Button>
                StackPanel>
            Grid>
        StackPanel>

        Grid Margin="250 55 0 0">
            Grid x:Name="GridPrincipal" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        Grid>

        Grid Width="250" HorizontalAlignment="Left" Background="#FF222222">
            materialDesign:TransitioningContent x:Name="TrainsitionigContentSlide" OpeningEffect="{materialDesign:TransitionEffect SlideInFromLeft, Duration=0:0:0.2}">
                Grid x:Name="GridCursor" Margin="0 100 0 0" Background="#FF0069C0" Width="10" HorizontalAlignment="Left" Height="60" VerticalAlignment="Top"/>
            materialDesign:TransitioningContent>
            Image Source="https://img.dotnet9.com/logo-head.png" VerticalAlignment="Top"/>
            Image Source="https://img.dotnet9.com/logo-foot.png" VerticalAlignment="Bottom"/>
            ListView x:Name="ListViewMenu" Margin="0 100" Foreground="LightGray" FontFamily="Champagne & Limousines" FontSize="18" SelectionChanged="ListViewMenu_SelectionChanged" SelectedIndex="0">
                ListViewItem Height="60">
                    StackPanel Orientation="Horizontal">
                        materialDesign:PackIcon Kind="Home" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                        TextBlock Text="首页" FontSize="17" VerticalAlignment="Center" Margin="20 0"/>
                    StackPanel>
                ListViewItem>
                ListViewItem Height="60">
                    StackPanel Orientation="Horizontal">
                        materialDesign:PackIcon Kind="LanguageCsharp" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                        TextBlock Text="WPF" FontSize="17" VerticalAlignment="Center" Margin="20 0"/>
                    StackPanel>
                ListViewItem>
                ListViewItem Height="60">
                    StackPanel Orientation="Horizontal">
                        materialDesign:PackIcon Kind="LanguageCsharp" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                        TextBlock Text="Winform" FontSize="17" VerticalAlignment="Center" Margin="20 0"/>
                    StackPanel>
                ListViewItem>
                ListViewItem Height="60">
                    StackPanel Orientation="Horizontal">
                        materialDesign:PackIcon Kind="LanguageCsharp" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                        TextBlock Text="ASP.NET CORE" FontSize="17" VerticalAlignment="Center" Margin="20 0"/>
                    StackPanel>
                ListViewItem>
                ListViewItem Height="60">
                    StackPanel Orientation="Horizontal">
                        materialDesign:PackIcon Kind="LanguageCsharp" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                        TextBlock Text="Xamarin.Forms" FontSize="17" VerticalAlignment="Center" Margin="20 0"/>
                    StackPanel>
                ListViewItem>
                ListViewItem Height="60">
                    StackPanel Orientation="Horizontal">
                        materialDesign:PackIcon Kind="LanguageCpp" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                        TextBlock Text="C++" FontSize="17" VerticalAlignment="Center" Margin="20 0"/>
                    StackPanel>
                ListViewItem>
            ListView>
        Grid>

    Grid>
Window>

简单说明下：

  1. "GridPrincipal" 作为客户区子模块界面容器，展示新界面时，先移除旧用户控件，再添加新用户控件（站长以前使用时，是遍历容器中所有用户界面，对非选择用户控件作隐藏操作，然后添加新用户控件或者对已存在的被选择用户控件作显示操作）。
  2. 左侧菜单项使用 "ListView" 进行布局，实际开发需要运用模板，使用MVVM做成动态菜单，方便扩展。
  3. 右侧切换的子模块界面应该使用Prism或者其他框架（自已实现的模块dll）实现的子界面，方便动态扩展（需要和左侧菜单项进行关联）。

文件【MainWindow.xaml.cs】，后台关闭窗体、菜单点击切换子模块界面、窗体移动等事件处理：

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace MenuChange
{
    /// 
    /// Interaction logic for MainWindow.xaml
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void ButtonFechar_Click(object sender, RoutedEventArgs e)
        {
            Application.Current.Shutdown();
        }

        private void Grid_MouseDown(object sender, MouseButtonEventArgs e)
        {
            DragMove();
        }

        private void ListViewMenu_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            int index = ListViewMenu.SelectedIndex;
            MoveCursorMenu(index);

            switch (index)
            {
                case 0:
                    GridPrincipal.Children.Clear();
                    GridPrincipal.Children.Add(new UserControlMain());
                    break;
                case 1:
                    GridPrincipal.Children.Clear();
                    GridPrincipal.Children.Add(new UserControlWPF());
                    break;
                case 2:
                    GridPrincipal.Children.Clear();
                    GridPrincipal.Children.Add(new UserControlWinform());
                    break;
                case 3:
                    GridPrincipal.Children.Clear();
                    GridPrincipal.Children.Add(new UserControlASPNETCORE());
                    break;
                case 4:
                    GridPrincipal.Children.Clear();
                    GridPrincipal.Children.Add(new UserControlXamarinForms());
                    break;
                case 5:
                    GridPrincipal.Children.Clear();
                    GridPrincipal.Children.Add(new UserControlCPP());
                    break;
                default:
                    break;
            }
        }

        private void MoveCursorMenu(int index)
        {
            TrainsitionigContentSlide.OnApplyTemplate();
            GridCursor.Margin = new Thickness(0, (100 + (60 * index)), 0, 0);
        }
    }
}

方便演示，点击菜单，切换子用户控件时时写死的，见上面的说明，左侧菜单及右侧切换的子用户控件需要进行关联配置，方便扩展，建议使用Prism的模块化开发。

2.3 演示主模块

文件【UserControlMain.xaml】，只展示其中一个子模块用户控件吧，其他类似，文末有源码、可运行Demo供下载参考。

注意： 需要使用MD控件的 TransitioningContent 组件将用户控件可视区域包裹起来，用于使用MD的移动切换动画，其中 OpeningEffect 见名思意，即是展示此用户控件时，动画如何播放，见下面代码，SlideInFromLeft 是指示展示时由左向右缓动，相反 SlideInFromRight即是由右向左缓动，其他属性可查阅MD官网或者Demo研究。

UserControl x:Class="MenuChange.UserControlMain"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             Height="auto" Width="auto">
    Grid>
        materialDesign:TransitioningContent x:Name="TrainsitionigContentSlide" OpeningEffect="{materialDesign:TransitionEffect SlideInFromLeft, Duration=0:0:0.8}">
            StackPanel Background="#33ff0000">
                TextBox HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Foreground="White" Text="https://dotnet9.com"/>
                Image Source="https://img.dotnet9.com/20200124165746.png"/>
            StackPanel>
        materialDesign:TransitioningContent>
    Grid>
UserControl>

已奉上关键代码，全部代码文末有下载链接...

3.本文参考

  1. 视频一：C# WPF Material Design UI: Fast Food Sales，配套源码：Pizzaria1。
  2. C# WPF开源控件库《MaterialDesignInXAML》

4.源码

站长方便演示，文中的图片使用的本站外链图片：

演示Demo下载

除非注明，文章均由 Dotnet9 整理发布，欢迎转载。

转载请注明本文地址：https://dotnet9.com/7743.html

欢迎扫描下方二维码关注 Dotnet9 的微信公众号，本站会及时推送最新技术文章

技术图片

时间如流水，只能流去不流回！

点击《【阅读原文】》，本站还有更多技术类文章等着您哦！！！

此刻顺便为我点个《【再看】》可好？

.NET CORE(C#) WPF 方便的实现用户控件切换（祝大家新年快乐）

标签：模块   ber   dem   bre   gif   一个   blend   template   模块化   

原文地址：https://www.cnblogs.com/lonelyxmas/p/12239123.html

上一篇：C# WPF 一个设计界面

下一篇：Windows10如何在终端创建文件和删除文件

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：.NET CORE(C#) WPF 方便的实现用户控件切换（祝大家新年快乐）
文章链接：http://soscw.com/index.php/essay/42297.html

评论

亲，登录后才可以留言！

热门文章

推荐文章

最新文章

置顶文章

关于我们 | 版权声明 | 常见问题 | 素材投稿 | 联系我们 | 网站地图 |
搜素材网素材除本站原创外均由用户分享，若发现权利被侵害，请联系及时联系我们，我们会在第一时间进行处理。
特别说明：本站所有资源除本站原创外仅供学习与参考，请勿用于商业用途,如有侵犯您的版权请联系客服服务QQ：点击这里给我发消息
Copyright © 2024 soscw.com 搜素材网素材网版权所有 蜀ICP备18015633号-1