Time is like water, you can not go back into the flow!
Thumbs up again, a habit, which is that you give me creative power!
This article Dotnet9 https://dotnet9.com already been included, the owners are happy to share dotnet related technologies, such as Winform, WPF, ASP.NET Core, etc., are also related to the desktop C ++ Qt Quick and Qt Widgets, just share their own familiar, own will.
Read Navigation:
- First, look at the effect
- Second, text background
- Third, code implementation
- Fourth, the article reference
- Fifth, the code download
First, look at the effect
Forms Mobile
Two screen transition effects
Second, text background
YouTube big and Design com WPF God acquisition, alarm clock with the new interface transitions.
Third, code implementation
3.1 Add Nuget library
Master Core 3.1 using .Net WPF project created to create "Transitions" the solution, we need to add two Nuget libraries: MaterialDesignThemes and MaterialDesignColors, the figure is the effect of using the control library to achieve, very powerful.
3.2 of engineering structures
3.3 App.xaml control style add MD
Add four styles
1 <Application x:Class="Transitions.App" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:local="clr-namespace:Transitions" 5 StartupUri="MainWindow.xaml"> 6 <Application.Resources> 7 <ResourceDictionary> 8 <ResourceDictionary.MergedDictionaries> 9 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml"/> 10 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml"/> 11 <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml"/> 12 <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Indigo.xaml"/> 13 </ResourceDictionary.MergedDictionaries> 14 </ResourceDictionary> 15 </Application.Resources> 16 </Application>
3.4 主窗体
MainWindow.xaml代码如下
1 <Window x:Class="Transitions.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6 xmlns:local="clr-namespace:Transitions" 7 mc:Ignorable="d" 8 xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes" 9 Title="" Height="600" Width="1080" ResizeMode="NoResize" 10 WindowStartupLocation="CenterScreen" 11 FontFamily="Microsoft YaHei UI Light" 12 WindowStyle="None" MouseDown="Window_MouseDown"> 13 <Grid> 14 <materialDesign:Transitioner SelectedIndex="0" AutoApplyTransitionOrigins="True"> 15 <Grid> 16 <local:UserControlAlarms/> 17 </Grid> 18 <materialDesign:TransitionerSlide> 19 <materialDesign:TransitionerSlide.BackwardWipe> 20 <materialDesign:CircleWipe/> 21 </materialDesign:TransitionerSlide.BackwardWipe> 22 <materialDesign:TransitionerSlide.ForwardWipe> 23 <materialDesign:SlideWipe Direction="Right"/> 24 </materialDesign:TransitionerSlide.ForwardWipe> 25 <local:UserControlNewAlarm/> 26 </materialDesign:TransitionerSlide> 27 </materialDesign:Transitioner> 28 </Grid> 29 </Window>
简单讲解：
1)需要先添加MD控件命名空间
xmlns:materialDesign=”http://materialdesigninxaml.net/winfx/xaml/themes”
2)设置无边框窗体样式并拖动
ResizeMode="NoResize"
WindowStartupLocation="CenterScreen"
FontFamily="Microsoft YaHei UI Light"
WindowStyle="None" MouseDown="Window_MouseDown"
窗体拖动方法
private void Window_MouseDown(object sender, MouseButtonEventArgs e) { DragMove(); }
3)设置闹钟列表用户控件和新增闹钟用户控件动画排版
默认显示闹钟列表用户控件local:UserControlAlarms，动画切换时显示新增闹钟用户控件local:UserControlNewAlarm
1 <materialDesign:Transitioner SelectedIndex="0" AutoApplyTransitionOrigins="True"> 2 <Grid> 3 <local:UserControlAlarms/> 4 </Grid> 5 <materialDesign:TransitionerSlide> 6 <materialDesign:TransitionerSlide.BackwardWipe> 7 <materialDesign:CircleWipe/> 8 </materialDesign:TransitionerSlide.BackwardWipe> 9 <materialDesign:TransitionerSlide.ForwardWipe> 10 <materialDesign:SlideWipe Direction="Right"/> 11 </materialDesign:TransitionerSlide.ForwardWipe> 12 <local:UserControlNewAlarm/> 13 </materialDesign:TransitionerSlide> 14 </materialDesign:Transitioner>
3.5 闹钟列表用户控件
代码简单，就是简单展示
1 <UserControl x:Class="Transitions.UserControlAlarms" 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:Transitions" 7 xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes" 8 mc:Ignorable="d" 9 d:DesignHeight="450" d:DesignWidth="800"> 10 <Grid> 11 <Grid.RowDefinitions> 12 <RowDefinition Height="200"/> 13 <RowDefinition Height="50"/> 14 <RowDefinition Height="*"/> 15 </Grid.RowDefinitions> 16 <materialDesign:ColorZone Grid.Row="0" Mode="Dark" VerticalAlignment="Stretch" 17 HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch"> 18 <TextBlock Text="闹钟" FontSize="50" Margin="80" VerticalAlignment="Center"/> 19 </materialDesign:ColorZone> 20 <Button Style="{DynamicResource MaterialDesignFloatingActionButton}" 21 Command="{x:Static materialDesign:Transitioner.MoveNextCommand}" 22 HorizontalAlignment="Left" 23 VerticalAlignment="Bottom" 24 Grid.Row="0" Grid.RowSpan="2" Margin="20"> 25 <materialDesign:PackIcon Kind="AddAlarm"/> 26 </Button> 27 <ListView Grid.Row="2" Margin="10"> 28 <ListViewItem Opacity="0.5"> 29 <Grid Width="300"> 30 <StackPanel> 31 <TextBlock FontSize="30">05:01</TextBlock> 32 <TextBlock FontSize="30" Opacity="0.8">关闭</TextBlock> 33 </StackPanel> 34 <ToggleButton HorizontalAlignment="Right" VerticalAlignment="Top" Margin="10"/> 35 </Grid> 36 </ListViewItem> 37 <ListViewItem Opacity="0.5"> 38 <Grid Width="300"> 39 <StackPanel> 40 <TextBlock FontSize="30">05:01</TextBlock> 41 <TextBlock>晴 | 7点48分后响铃</TextBlock> 42 </StackPanel> 43 <ToggleButton IsChecked="True" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="10"/> 44 </Grid> 45 </ListViewItem> 46 </ListView> 47 </Grid> 48 </UserControl>
3.6 新增闹钟用户控件
代码也不多，简单控件布局
1 <UserControl x:Class="Transitions.UserControlNewAlarm" 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:Transitions" 7 xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes" 8 mc:Ignorable="d" 9 d:DesignHeight="450" d:DesignWidth="800"> 10 <Grid> 11 <Grid.RowDefinitions> 12 <RowDefinition Height="200"/> 13 <RowDefinition Height="*"/> 14 </Grid.RowDefinitions> 15 <materialDesign:ColorZone Mode="PrimaryMid" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 16 VerticalContentAlignment="Stretch"> 17 <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 18 <TextBlock Style="{DynamicResource MaterialDesignHeadlineTextBlock}" Margin="15" 19 VerticalAlignment="Bottom" FontSize="30">新闹钟</TextBlock> 20 </Grid> 21 </materialDesign:ColorZone> 22 <StackPanel Orientation="Horizontal" Grid.Row="1" HorizontalAlignment="Right" Margin="20"> 23 <Button Style="{DynamicResource MaterialDesignFlatButton}" Margin="5" 24 Command="{x:Static materialDesign:Transitioner.MovePreviousCommand}" 25 HorizontalAlignment="Right" VerticalAlignment="Bottom" Content="取消"/> 26 <Button Margin="5" 27 Command="{x:Static materialDesign:Transitioner.MovePreviousCommand}" 28 HorizontalAlignment="Right" VerticalAlignment="Bottom" Content="保存"/> 29 </StackPanel> 30 </Grid> 31 </UserControl>
四、文章参考
建议直接打开大神视频学习，他的YouTube上还有很多代码视频哦，参考：
Design com WPF： https://www.youtube.com/watch?v=Bt9swbh_Wfw 。
五、代码下载
文章中代码几乎已经全部贴出，就是这么多。
除非注明，文章均由 Dotnet9 整理发布，欢迎转载。
转载请注明本文地址：https://dotnet9.com/6711.html
欢迎扫描下方二维码关注 Dotnet9 的微信公众号，本站会及时推送最新技术文章（微信公众号“dotnet9_com”）：
如有收获，请大力转发，给Dotnet9赞助和支持，谢谢大家对dotnet技术的关注和支持 。