微信公眾號：Dotnet9，網站：Dotnet9，問題或建議：請網站留言，
如果對您有所幫助：歡迎贊賞，
.NET CORE(C#) WPF 值得推薦的影片選單設計
閱讀導航
- 本文背景
- 代碼實作
- 本文參考
- 原始碼
1. 本文背景
YouTube上老外的一個設計，站長覺得不錯，分享給大家作為參考，抽屜選單的影片做的非常不錯，
運行起始界面：
站長運行操作一遍，錄制了影片大家看看：
2. 代碼實作
使用 .NET CORE 3.1 創建名為 “AnimatedMenu” 的WPF模板專案，添加1個Nuget庫：MaterialDesignThemes，版本為最新預覽版3.1.0-ci948，
解決方案主要檔案目錄組織結構：
- 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=https://www.cnblogs.com/Dotnet9-com/p/"0"/>
簡單說明下：
- "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.本文參考
- 視頻一：C# WPF Material Design UI: Animated Menu，配套原始碼：AnimatedMenu1，
- C# WPF開源控制元件庫《MaterialDesignInXAML》
4.原始碼
效果圖實作代碼在文中已經全部給出，站長方便演示，文中的圖片使用的本站外鏈圖片，代碼可直接Copy，按解決方案目錄組織代碼檔案即可運行，
演示Demo下載
除非注明，文章均由 Dotnet9 整理發布，歡迎轉載，
轉載請注明本文地址：https://dotnet9.com/7669.html
歡迎掃描下方二維碼關注 Dotnet9 的微信公眾號，本站會及時推送最新技術文章
時間如流水，只能流去不流回！
點擊《【閱讀原文】》，本站還有更多技術類文章等著您哦！！！
此刻順便為我點個《【再看】》可好？
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/8194.html
標籤：WPF