C# WPF過渡效果實現（C# WPF Material Design UI: Transitions）

時間 2019-12-27

標籤 c# wpf 過渡效果實現 material design transitions 欄目 C# 简体版

原文原文鏈接

時間如流水，只能流去不流回！html

點贊再看，養成習慣，這是您給我創做的動力！express

本文 Dotnet9 https://dotnet9.com 已收錄，站長樂於分享dotnet相關技術，好比Winform、WPF、ASP.NET Core等，亦有C++桌面相關的Qt Quick和Qt Widgets等，只分享本身熟悉的、本身會的。微信

閱讀導航：app

1、先看效果
2、本文背景
3、代碼實現
4、文章參考
5、代碼下載

1、先看效果

窗體移動ide

兩個界面過渡效果佈局

2、本文背景

YouTube Design com WPF 大神處習得，鬧鐘與新增鬧鐘界面切換效果。學習

3、代碼實現

3.1 添加Nuget庫

站長使用.Net Core 3.1建立的WPF工程，建立「Transitions」解決方案後，須要添加兩個Nuget庫：MaterialDesignThemes和MaterialDesignColors，上圖的效果是使用該控件庫實現的，很是強大。動畫

3.2 工程結構

3.3 App.xaml添加MD控件樣式

添加4個樣式ui

 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代碼以下spa

 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>

4、文章參考

建議直接打開大神視頻學習，他的YouTube上還有不少代碼視頻哦，參考：
Design com WPF： https://www.youtube.com/watch?v=Bt9swbh_Wfw 。

5、代碼下載

文章中代碼幾乎已經所有貼出，就是這麼多。

除非註明，文章均由 Dotnet9 整理髮布，歡迎轉載。

轉載請註明本文地址：https://dotnet9.com/6711.html

歡迎掃描下方二維碼關注 Dotnet9 的微信公衆號，本站會及時推送最新技術文章（微信公衆號「dotnet9_com」）：

若有收穫，請大力轉發，給Dotnet9贊助和支持，謝謝你們對dotnet技術的關注和支持。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。