時間如流水，只能流去不流回！
點贊再看，養成習慣，這是您給我創作的動力！
本文 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個樣式
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技術的關注和支持 ，
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/16117.html
標籤：WPF
上一篇：AduSkin - UI
下一篇：WPF-命令-基礎知識