时间如流水，只能流去不流回！
点赞再看，养成习惯，这是您给我创作的动力！
本文 Dotnet9 https://dotnet9.com 已收录，站长乐于分享dotnet相关技术，比如Winform、WPF、ASP.NET Core等，亦有C 桌面相关的Qt Quick和Qt Widgets等，只分享自己熟悉的、自己会的。
阅读导航：
- 一、先看效果
- 二、本文背景
- 三、代码实现
- 四、文章参考
- 五、代码下载
一、先看效果
窗体移动
两个界面过渡效果
二、本文背景
YouTube Design com WPF 大神处习得，闹钟与新增闹钟界面切换效果。
三、代码实现
3.1 添加Nuget库
站长使用.Net Core 3.1创建的WPF工程，创建“Transitions”解决方案后，需要添加两个Nuget库：MaterialDesignThemes和MaterialDesignColors，上图的效果是使用该控件库实现的，非常强大。
3.2 工程结构
3.3 App.xaml添加MD控件样式
添加4个样式
<Application x:Class="Transitions.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Transitions"
StartupUri="MainWindow.xaml">
<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>
</Application>
3.4 主窗体
MainWindow.xaml代码如下
<Window x:Class="Transitions.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Transitions"
mc:Ignorable="d"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
Title="" Height="600" Width="1080" ResizeMode="NoResize"
WindowStartupLocation="CenterScreen"
FontFamily="Microsoft YaHei UI Light"
WindowStyle="None" MouseDown="Window_MouseDown">
<Grid>
<materialDesign:Transitioner SelectedIndex="0" AutoApplyTransitionOrigins="True">
<Grid>
<local:UserControlAlarms/>
</Grid>
<materialDesign:TransitionerSlide>
<materialDesign:TransitionerSlide.BackwardWipe>
<materialDesign:CircleWipe/>
</materialDesign:TransitionerSlide.BackwardWipe>
<materialDesign:TransitionerSlide.ForwardWipe>
<materialDesign:SlideWipe Direction="Right"/>
</materialDesign:TransitionerSlide.ForwardWipe>
<local:UserControlNewAlarm/>
</materialDesign:TransitionerSlide>
</materialDesign:Transitioner>
</Grid>
</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
<materialDesign:Transitioner SelectedIndex="0" AutoApplyTransitionOrigins="True">
<Grid>
<local:UserControlAlarms/>
</Grid>
<materialDesign:TransitionerSlide>
<materialDesign:TransitionerSlide.BackwardWipe>
<materialDesign:CircleWipe/>
</materialDesign:TransitionerSlide.BackwardWipe>
<materialDesign:TransitionerSlide.ForwardWipe>
<materialDesign:SlideWipe Direction="Right"/>
</materialDesign:TransitionerSlide.ForwardWipe>
<local:UserControlNewAlarm/>
</materialDesign:TransitionerSlide>
</materialDesign:Transitioner>
3.5 闹钟列表用户控件
代码简单，就是简单展示
<UserControl x:Class="Transitions.UserControlAlarms"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Transitions"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="200"/>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<materialDesign:ColorZone Grid.Row="0" Mode="Dark" VerticalAlignment="Stretch"
HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch">
<TextBlock Text="闹钟" FontSize="50" Margin="80" VerticalAlignment="Center"/>
</materialDesign:ColorZone>
<Button Style="{DynamicResource MaterialDesignFloatingActionButton}"
Command="{x:Static materialDesign:Transitioner.MoveNextCommand}"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Grid.Row="0" Grid.RowSpan="2" Margin="20">
<materialDesign:PackIcon Kind="AddAlarm"/>
</Button>
<ListView Grid.Row="2" Margin="10">
<ListViewItem Opacity="0.5">
<Grid Width="300">
<StackPanel>
<TextBlock FontSize="30">05:01</TextBlock>
<TextBlock FontSize="30" Opacity="0.8">关闭</TextBlock>
</StackPanel>
<ToggleButton HorizontalAlignment="Right" VerticalAlignment="Top" Margin="10"/>
</Grid>
</ListViewItem>
<ListViewItem Opacity="0.5">
<Grid Width="300">
<StackPanel>
<TextBlock FontSize="30">05:01</TextBlock>
<TextBlock>晴 | 7点48分后响铃</TextBlock>
</StackPanel>
<ToggleButton IsChecked="True" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="10"/>
</Grid>
</ListViewItem>
</ListView>
</Grid>
</UserControl>
3.6 新增闹钟用户控件
代码也不多，简单控件布局
<UserControl x:Class="Transitions.UserControlNewAlarm"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Transitions"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="200"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<materialDesign:ColorZone Mode="PrimaryMid" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalContentAlignment="Stretch">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock Style="{DynamicResource MaterialDesignHeadlineTextBlock}" Margin="15"
VerticalAlignment="Bottom" FontSize="30">新闹钟</TextBlock>
</Grid>
</materialDesign:ColorZone>
<StackPanel Orientation="Horizontal" Grid.Row="1" HorizontalAlignment="Right" Margin="20">
<Button Style="{DynamicResource MaterialDesignFlatButton}" Margin="5"
Command="{x:Static materialDesign:Transitioner.MovePreviousCommand}"
HorizontalAlignment="Right" VerticalAlignment="Bottom" Content="取消"/>
<Button Margin="5"
Command="{x:Static materialDesign:Transitioner.MovePreviousCommand}"
HorizontalAlignment="Right" VerticalAlignment="Bottom" Content="保存"/>
</StackPanel>
</Grid>
</UserControl>
四、文章参考
建议直接打开大神视频学习，他的YouTube上还有很多代码视频哦，参考：
Design com WPF： https://www.youtube.com/watch?v=Bt9swbh_Wfw 。
五、代码下载
文章中代码几乎已经全部贴出，就是这么多。
除非注明，文章均由 Dotnet9 整理发布，欢迎转载。
转载请注明本文地址：https://dotnet9.com/6711.html
