龙空技术网

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

沙漠尽头的狼 676

前言:

目前各位老铁们对“net后台实现流水号自增”大约比较关切,我们都想要了解一些“net后台实现流水号自增”的相关文章。那么小编也在网络上网罗了一些有关“net后台实现流水号自增””的相关文章,希望大家能喜欢,咱们一起来了解一下吧!

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

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

阅读导航

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

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



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

2. 代码实现

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

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

AnimatedMenuApp.xamlMainWindow.xamlMainWindow.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=";        xmlns:materialDesign=";        xmlns:d=";        xmlns:x=";        xmlns:mc=";        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="; VerticalAlignment="Top"/>            <Image Source="; 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>

简单说明下:

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

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

using System.Windows;using System.Windows.Controls;using System.Windows.Input;namespace MenuChange{    /// <summary>    /// Interaction logic for MainWindow.xaml    /// </summary>    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=";             xmlns:materialDesign=";             xmlns:d=";             xmlns:x=";             xmlns:mc=";             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=";/>                <Image Source=";/>            </StackPanel>        </materialDesign:TransitioningContent>    </Grid></UserControl>
已奉上关键代码,全部代码文末有下载链接...3.本文参考视频一:C# WPF Material Design UI: Fast Food Sales,配套源码:Pizzaria1。C# WPF开源控件库《MaterialDesignInXAML》4.源码

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

演示Demo下载

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

转载请注明本文地址:

时间如流水,只能流去不流回!

标签: #net后台实现流水号自增 #net怎么调整页面布局