• 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,上图的效果是使用该控件库实现的,非常强大。

    C# WPF抽屉效果实现(C# WPF Material Design UI: Navigation Drawer & PopUp Menu)

    3.2 工程结构

    3.3 App.xaml添加MD控件样式

    添加4个样式

     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_com”添加关注

    如有收获,请大力转发,给Dotnet9赞助和支持,谢谢大家对dotnet技术的关注和支持 。

  • 相关阅读:
    Leetcode 814. 二叉树剪枝
    Leetcode 104. 二叉树的最大深度
    Leetcode 617. 合并二叉树
    Leetcode 226. 翻转二叉树
    Leetcode 654.最大二叉树
    【Leetcode】413. Arithmetic Slices
    【Leetcode】128. Longest Consecutive Sequence
    【Leetcode】605. Can Place Flowers
    【Leetcode】647. Palindromic Substrings
    高可用架构
  • 原文地址:https://www.cnblogs.com/Dotnet9-com/p/12104442.html
Copyright © 2020-2023  润新知