C# WPF过渡效果实现(C# WPF Material Design UI: Transitions)

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

点赞再看，养成习惯，这是您给我创作的动力！

本文 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