.NET CORE(C#) WPF 值得推薦的動畫菜單設計
.NET CORE(C#) WPF 值得推薦的動畫菜單設計
閱讀導航git
- 本文背景
- 代碼實現
- 本文參考
- 源碼
1. 本文背景
YouTube上老外的一個設計，站長以爲不錯，分享給你們做爲參考，抽屜菜單的動畫作的很是不錯。github
運行起始界面：express
站長運行操做一遍，錄製了動畫你們看看：c#
2. 代碼實現
使用 .NET CORE 3.1 建立名爲 「AnimatedMenu」 的WPF模板項目，添加1個Nuget庫：MaterialDesignThemes，版本爲最新預覽版3.1.0-ci948。微信
解決方案主要文件目錄組織結構：app
- AnimatedMenu
- App.xaml
- MainWindow.xaml
- MainWindow.xaml.cs
2.1 引入樣式
文件【App.xaml】，在 StartupUri 中設置啓動的視圖【MainWindow.xaml】，並在【Application.Resources】節點增長 MaterialDesignThemes庫的樣式文件：佈局
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.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.Blue.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
2.2 演示窗體
文件【MainWindow.xaml】，佈局代碼、動畫代碼都在此文件中，源碼以下：學習
<Window x:Class="AnimatedMenu.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" MouseLeftButtonDown="MoveWindow_MouseLeftButtonDown"
Height="600" Width="1024" WindowStyle="None" WindowStartupLocation="CenterScreen">
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="0"/>
</WindowChrome.WindowChrome>
<Window.Resources>
<Storyboard x:Key="OpenMenu">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="GridMain">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="250"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="GridMain">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="50"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="StackPanelMenu">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="250"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="listViewItem">
<EasingDoubleKeyFrame KeyTime="0" Value="-250"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-250"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="listViewItem1">
<EasingDoubleKeyFrame KeyTime="0" Value="-250"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-250"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="listViewItem2">
<EasingDoubleKeyFrame KeyTime="0" Value="-250"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-250"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="listViewItem3">
<EasingDoubleKeyFrame KeyTime="0" Value="-250"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-250"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="listViewItem4">
<EasingDoubleKeyFrame KeyTime="0" Value="-250"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-250"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="button">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="button">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="CloseMenu">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="GridMain">
<EasingDoubleKeyFrame KeyTime="0" Value="250"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="GridMain">
<EasingDoubleKeyFrame KeyTime="0" Value="50"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="StackPanelMenu">
<EasingDoubleKeyFrame KeyTime="0" Value="250"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpenMenu">
<BeginStoryboard Storyboard="{StaticResource OpenMenu}"/>
</EventTrigger>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonCloseMenu">
<BeginStoryboard x:Name="CloseMenu_BeginStoryboard" Storyboard="{StaticResource CloseMenu}"/>
</EventTrigger>
</Window.Triggers>
<Grid Background="#FF3580BF">
<StackPanel x:Name="StackPanelMenu" Width="250" HorizontalAlignment="Left" Margin="-250 0 0 0" RenderTransformOrigin="0.5,0.5">
<StackPanel.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</StackPanel.RenderTransform>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Height="100" HorizontalAlignment="Center">
<Button Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Background="{x:Null}" BorderBrush="{x:Null}" Padding="0" Width="50" Height="50" Margin="10">
<materialDesign:PackIcon Kind="Settings" Width="40" Height="40"/>
</Button>
<Button x:Name="button" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" BorderBrush="{x:Null}" Padding="0" Width="80" Height="80" Margin="10" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Button.RenderTransform>
<Button.Background>
<ImageBrush ImageSource="https://img.dotnet9.com/logo.png" Stretch="UniformToFill"/>
</Button.Background>
</Button>
<Button Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Background="{x:Null}" BorderBrush="{x:Null}" Padding="0" Width="50" Height="50" Margin="10">
<materialDesign:PackIcon Kind="InformationOutline" Width="40" Height="40"/>
</Button>
</StackPanel>
<ListView>
<ListViewItem x:Name="listViewItem" Height="60" RenderTransformOrigin="0.5,0.5">
<ListViewItem.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ListViewItem.RenderTransform>
<StackPanel Orientation="Horizontal" Margin="10 0">
<materialDesign:PackIcon Kind="Home" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
<TextBlock Text="主頁" Margin="10" VerticalAlignment="Center"/>
</StackPanel>
</ListViewItem>
<ListViewItem x:Name="listViewItem1" Height="60" RenderTransformOrigin="0.5,0.5">
<ListViewItem.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ListViewItem.RenderTransform>
<StackPanel Orientation="Horizontal" Margin="10 0">
<materialDesign:PackIcon Kind="AccountSearch" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
<TextBlock Text="搜索" Margin="10" VerticalAlignment="Center"/>
</StackPanel>
</ListViewItem>
<ListViewItem x:Name="listViewItem2" Height="60" RenderTransformOrigin="0.5,0.5">
<ListViewItem.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ListViewItem.RenderTransform>
<StackPanel Orientation="Horizontal" Margin="10 0">
<materialDesign:PackIcon Kind="Wechat" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
<TextBlock Text="微信" Margin="10" VerticalAlignment="Center"/>
</StackPanel>
</ListViewItem>
<ListViewItem x:Name="listViewItem3" Height="60" RenderTransformOrigin="0.5,0.5">
<ListViewItem.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ListViewItem.RenderTransform>
<StackPanel Orientation="Horizontal" Margin="10 0">
<materialDesign:PackIcon Kind="Qqchat" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
<TextBlock Text="QQ" Margin="10" VerticalAlignment="Center"/>
</StackPanel>
</ListViewItem>
<ListViewItem x:Name="listViewItem4" Height="60" RenderTransformOrigin="0.5,0.5">
<ListViewItem.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ListViewItem.RenderTransform>
<StackPanel Orientation="Horizontal" Margin="10 0">
<materialDesign:PackIcon Kind="Facebook" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
<TextBlock Text="臉書" Margin="10" VerticalAlignment="Center"/>
</StackPanel>
</ListViewItem>
</ListView>
</StackPanel>
<Grid x:Name="GridMain" Background="#FFFBFBFB" Width="1024" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="250"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" Background="#FF3580BF">
<Image Height="150" VerticalAlignment="Top" Source="https://dotnet9.com/wp-content/uploads/2017/04/About-Header.jpg" Stretch="UniformToFill"/>
<Ellipse Height="100" Width="100" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="20 100" Stroke="White">
<Ellipse.Fill>
<ImageBrush ImageSource="https://img.dotnet9.com/logo.png" Stretch="UniformToFill"/>
</Ellipse.Fill>
</Ellipse>
<TextBlock Text="Dotnet9" Foreground="White" FontSize="28" FontFamily="Nirmala UI Semilight" Margin="10 100" VerticalAlignment="Top"/>
<StackPanel Margin="0 150">
<Grid Height="60" Margin="20 50 20 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<TextBlock Text="追隨者" VerticalAlignment="Bottom" Foreground="#FFFBFBFB" Margin="5,0,5,5"/>
<TextBlock Text="1.5K" VerticalAlignment="Top" Foreground="#FFFBFBFB" Grid.Row="1" Margin="10 0"/>
<TextBlock Text="跟隨" VerticalAlignment="Bottom" Foreground="#FFFBFBFB" Margin="5,0,5,5" Grid.Column="1"/>
<TextBlock Text="2.3K" VerticalAlignment="Top" Foreground="#FFFBFBFB" Grid.Row="1" Margin="10 0" Grid.Column="1"/>
</Grid>
<TextBlock TextWrapping="Wrap" Margin="10" Foreground="#FFFBFBFB" FontSize="14">
<Run Text="網名：沙漠盡頭的狼"/>
<LineBreak/>
<LineBreak/>
<Run Text="網站：https://dotnet9.com"/>
<LineBreak/>
<Run Text=" Dotnet9的博客 - 一個熱衷於互聯網分享精神的我的博客站點"/>
<LineBreak/>
<LineBreak/>
<Run Text="座右銘：時間如流水，只能流去不流回。"/>
</TextBlock>
</StackPanel>
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="ButtonCloseMenu" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Width="30" Height="30" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5" Click="ButtonCloseMenu_Click" Visibility="Collapsed">
<materialDesign:PackIcon Kind="Menu" Foreground="#FF3580BF"/>
</Button>
<Button x:Name="ButtonOpenMenu" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Width="30" Height="30" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5" Click="ButtonOpenMenu_Click">
<materialDesign:PackIcon Kind="Menu" Foreground="#FF3580BF"/>
</Button>
<TextBlock Text="照片" Foreground="#FF3580BF" FontSize="30" FontWeight="Bold" Margin="5" Grid.Row="1"/>
<Grid Margin="5" Grid.Row="2" Grid.Column="0">
<Grid.Effect>
<DropShadowEffect BlurRadius="20" Color="#FFEEEEEE" ShadowDepth="1"/>
</Grid.Effect>
<Image Source="https://dotnet9.com/wp-content/uploads/2019/12/wpf.png" Stretch="UniformToFill"/>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom">
<materialDesign:PackIcon Kind="Heart" Foreground="#FFFBFBFB"/>
<TextBlock Text="25" Foreground="#FFFBFBFB"/>
</StackPanel>
</Grid>
<Grid Margin="5" Grid.Row="2" Grid.Column="1">
<Grid.Effect>
<DropShadowEffect BlurRadius="20" Color="#FFEEEEEE" ShadowDepth="1"/>
</Grid.Effect>
<Image Source="https://dotnet9.com/wp-content/uploads/2019/12/winform.png" Stretch="UniformToFill"/>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom">
<materialDesign:PackIcon Kind="Heart" Foreground="#FFFBFBFB"/>
<TextBlock Text="50" Foreground="#FFFBFBFB"/>
</StackPanel>
</Grid>
<Grid Margin="5" Grid.Row="2" Grid.Column="2">
<Grid.Effect>
<DropShadowEffect BlurRadius="20" Color="#FFEEEEEE" ShadowDepth="1"/>
</Grid.Effect>
<Image Source="https://dotnet9.com/wp-content/uploads/2019/12/asp-net-core.png" Stretch="UniformToFill"/>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom">
<materialDesign:PackIcon Kind="Heart" Foreground="#FFFBFBFB"/>
<TextBlock Text="18" Foreground="#FFFBFBFB"/>
</StackPanel>
</Grid>
<Grid Margin="5" Grid.Row="3" Grid.Column="0">
<Grid.Effect>
<DropShadowEffect BlurRadius="20" Color="#FFEEEEEE" ShadowDepth="1"/>
</Grid.Effect>
<Image Source="https://img.dotnet9.com/Xamarin.Forms.png" Stretch="UniformToFill"/>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom">
<materialDesign:PackIcon Kind="Heart" Foreground="#FFFBFBFB"/>
<TextBlock Text="32" Foreground="#FFFBFBFB"/>
</StackPanel>
</Grid>
<Grid Margin="5" Grid.Row="3" Grid.Column="1">
<Grid.Effect>
<DropShadowEffect BlurRadius="20" Color="#FFEEEEEE" ShadowDepth="1"/>
</Grid.Effect>
<Image Source="https://dotnet9.com/wp-content/uploads/2019/12/front-end.png" Stretch="UniformToFill"/>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom">
<materialDesign:PackIcon Kind="Heart" Foreground="#FFFBFBFB"/>
<TextBlock Text="32" Foreground="#FFFBFBFB"/>
</StackPanel>
</Grid>
</Grid>
</Grid>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Height="40" HorizontalAlignment="Right" Margin="10">
<Button Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Width="30" Height="30" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}">
<materialDesign:PackIcon Kind="Bell"/>
</Button>
<Button x:Name="ButtonClose" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Width="30" Height="30" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}" Click="ButtonClose_Click">
<materialDesign:PackIcon Kind="Close"/>
</Button>
</StackPanel>
</Grid>
</Window>
簡單說明下：動畫
- "StackPanelMenu" 做爲左側菜單容器，默認是顯示在窗體外，距離窗體左邊緣-250，點擊左上角菜單按鈕圖標可控制此容器的顯示與隱藏，注：菜單開關由兩個按鈕組成 "ButtonOpenMenu" 和 "ButtonCloseMenu"。
- 左側菜單項使用 "ListView" 進行佈局，實際開發須要運用模板，使用MVVM作成動態菜單，方便擴展。
- 中間的5張演示照片，也和2相似。直接使用Grid進行的佈局，實際上都須要作成模板。
- 抽屜菜單動畫見 Window.Resouces 中的動畫代碼，展開抽屜菜單動畫是 "OpenMenu"，左側菜單向右、向下移動，右側展現區域及我的信息概況界面同時也是向右、向下移動；關閉抽屜菜單動畫是 "CloseMenu"，動畫移動方向與展開時相反（說的是廢話），這段動畫代碼值得好好學習、複用。
文件【MainWindow.xaml.cs】，後臺關閉窗體、抽屜菜單按鈕切換、窗體移動等事件處理：
private void ButtonClose_Click(object sender, RoutedEventArgs e)
{
Application.Current.Shutdown();
}
private void ButtonOpenMenu_Click(object sender, RoutedEventArgs e)
{
ButtonOpenMenu.Visibility = Visibility.Collapsed;
ButtonCloseMenu.Visibility = Visibility.Visible;
}
private void ButtonCloseMenu_Click(object sender, RoutedEventArgs e)
{
ButtonOpenMenu.Visibility = Visibility.Visible;
ButtonCloseMenu.Visibility = Visibility.Collapsed;
}
private void MoveWindow_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
DragMove();
}
代碼已所有奉上...
3.本文參考
4.源碼
效果圖實現代碼在文中已經所有給出，站長方便演示，文中的圖片使用的本站外鏈圖片，代碼可直接Copy，按解決方案目錄組織代碼文件便可運行。
除非註明，文章均由 Dotnet9 整理髮布，歡迎轉載。
轉載請註明本文地址：https://dotnet9.com/7669.html
歡迎掃描下方二維碼關注 Dotnet9 的微信公衆號，本站會及時推送最新技術文章
時間如流水，只能流去不流回！
點擊《【閱讀原文】》，本站還有更多技術類文章等着您哦！！！
此刻順便爲我點個《【再看】》可好？
相關文章
- 1. WPF 動畫收縮菜單
- 2. 值得推薦的視頻
- 3. 值得推薦的web報表設計器(報表工具)
- 4. 10個值得推薦的免費設計模板網站
- 5. 值得推薦的幾款原型圖設計工具
- 6. 動畫庫推薦
- 7. 值得推薦的微軟技術公衆號推薦
- 8. 2020年最值得推薦的10款UI動效設計工具
- 9. 3D動畫菜單
- 10. .NET CORE(C#) WPF 抽屜式菜單
- 更多相關文章...
- • 移動設備 統計 - 瀏覽器信息
- • Eclipse 菜單 - Eclipse 教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • IntelliJ IDEA代碼格式化設置
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. WPF 動畫收縮菜單
- 2. 值得推薦的視頻
- 3. 值得推薦的web報表設計器(報表工具)
- 4. 10個值得推薦的免費設計模板網站
- 5. 值得推薦的幾款原型圖設計工具
- 6. 動畫庫推薦
- 7. 值得推薦的微軟技術公衆號推薦
- 8. 2020年最值得推薦的10款UI動效設計工具
- 9. 3D動畫菜單
- 10. .NET CORE(C#) WPF 抽屜式菜單