微信公眾號(hào)：Dotnet9，網(wǎng)站：Dotnet9，問題或建議，請(qǐng)網(wǎng)站留言；如果您覺得Dotnet9對(duì)您有幫助，歡迎贊賞

C# WPF 響應(yīng)式布局和抽屜式菜單導(dǎo)航

內(nèi)容目錄

實(shí)現(xiàn)效果
業(yè)務(wù)場(chǎng)景
編碼實(shí)現(xiàn)
本文參考
源碼下載

1.實(shí)現(xiàn)效果

效果

2.業(yè)務(wù)場(chǎng)景

常規(guī)業(yè)務(wù)

3.編碼實(shí)現(xiàn)

3.1 添加Nuget庫

使用 .Net Core 3.1 創(chuàng)建名為 “ResponsiveLayout” 的WPF解決方案，添加兩個(gè)Nuget庫：MaterialDesignThemes和MaterialDesignColors。

MaterialDesign控件庫

3.2 工程結(jié)構(gòu)

3個(gè)文件變動(dòng)：

App.xaml：添加MD控件樣式
MainWindow.xaml：主窗口實(shí)現(xiàn)效果
MainWindow.xaml.cs：主窗口后臺(tái)實(shí)現(xiàn)抽屜菜單開和閉

3.3 App.xaml引入MD控件樣式

關(guān)鍵樣式引用代碼

&lt;Application.Resources&gt;    &lt;ResourceDictionary&gt;        &lt;ResourceDictionary.MergedDictionaries&gt;            &lt;ResourceDictionary Source=&#34;pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml&#34; /&gt;            &lt;ResourceDictionary Source=&#34;pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml&#34; /&gt;            &lt;ResourceDictionary Source=&#34;pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml&#34; /&gt;            &lt;ResourceDictionary Source=&#34;pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml&#34; /&gt;        &lt;/ResourceDictionary.MergedDictionaries&gt;    &lt;/ResourceDictionary&gt;&lt;/Application.Resources&gt;

3.4 主窗體 MainWindow.xaml

全部代碼，菜單及右側(cè)布局

&lt;Window x:Class=&#34;ResponsiveLayout.MainWindow&#34;        xmlns=&#34;http://schemas.microsoft.com/winfx/2006/xaml/presentation&#34;        xmlns:x=&#34;http://schemas.microsoft.com/winfx/2006/xaml&#34;        xmlns:d=&#34;http://schemas.microsoft.com/expression/blend/2008&#34;        xmlns:mc=&#34;http://schemas.openxmlformats.org/markup-compatibility/2006&#34;        xmlns:local=&#34;clr-namespace:ResponsiveLayout&#34;        xmlns:materialDesign=&#34;http://materialdesigninxaml.net/winfx/xaml/themes&#34;        mc:Ignorable=&#34;d&#34;        Title=&#34;MainWindow&#34; Height=&#34;450&#34; Width=&#34;800&#34;&gt;    &lt;Window.Resources&gt;        &lt;Storyboard x:Key=&#34;CloseMenu&#34;&gt;            &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=&#34;(Grid.Width)&#34; Storyboard.TargetName=&#34;grid&#34;&gt;                &lt;EasingDoubleKeyFrame KeyTime=&#34;0&#34; Value=&#34;200&#34;/&gt;                &lt;EasingDoubleKeyFrame KeyTime=&#34;0:0:0.4&#34; Value=&#34;70&#34;/&gt;            &lt;/DoubleAnimationUsingKeyFrames&gt;        &lt;/Storyboard&gt;        &lt;Storyboard x:Key=&#34;OpenMenu&#34;&gt;            &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=&#34;(Grid.Width)&#34; Storyboard.TargetName=&#34;grid&#34;&gt;                &lt;EasingDoubleKeyFrame KeyTime=&#34;0&#34; Value=&#34;70&#34;/&gt;                &lt;EasingDoubleKeyFrame KeyTime=&#34;0:0:0.4&#34; Value=&#34;200&#34;/&gt;            &lt;/DoubleAnimationUsingKeyFrames&gt;        &lt;/Storyboard&gt;    &lt;/Window.Resources&gt;    &lt;Grid&gt;        &lt;Grid&gt;            &lt;Grid.ColumnDefinitions&gt;                &lt;ColumnDefinition Width=&#34;auto&#34;/&gt;                &lt;ColumnDefinition Width=&#34;*&#34;/&gt;            &lt;/Grid.ColumnDefinitions&gt;            &lt;Grid Background=&#34;#FFCBCBCB&#34; Grid.Column=&#34;1&#34;&gt;                &lt;Grid Margin=&#34;0 20 0 0&#34; Background=&#34;#FFEEEEEE&#34;&gt;                    &lt;Grid Height=&#34;100&#34; Background=&#34;#FFEEEEEE&#34; VerticalAlignment=&#34;Top&#34; HorizontalAlignment=&#34;Stretch&#34; Margin=&#34;10&#34;&gt;                        &lt;Grid.ColumnDefinitions&gt;                            &lt;ColumnDefinition Width=&#34;*&#34;/&gt;                            &lt;ColumnDefinition Width=&#34;*&#34;/&gt;                            &lt;ColumnDefinition Width=&#34;*&#34;/&gt;                            &lt;ColumnDefinition Width=&#34;*&#34;/&gt;                        &lt;/Grid.ColumnDefinitions&gt;                        &lt;Border BorderBrush=&#34;White&#34; BorderThickness=&#34;0 0 1 0&#34; Grid.Column=&#34;0&#34;&gt;                            &lt;TextBlock FontSize=&#34;30&#34; Text=&#34;R$ 860,90&#34; Foreground=&#34;Black&#34; Margin=&#34;15&#34;/&gt;                        &lt;/Border&gt;                        &lt;Border BorderBrush=&#34;White&#34; BorderThickness=&#34;0 0 1 0&#34; Grid.Column=&#34;1&#34;&gt;                            &lt;TextBlock FontSize=&#34;30&#34; Text=&#34;R$ 750,90&#34; Foreground=&#34;Black&#34; Margin=&#34;15&#34;/&gt;                        &lt;/Border&gt;                        &lt;Border BorderBrush=&#34;White&#34; BorderThickness=&#34;0 0 1 0&#34; Grid.Column=&#34;2&#34;&gt;                            &lt;TextBlock FontSize=&#34;30&#34; Text=&#34;R$ 60,90&#34; Foreground=&#34;Black&#34; Margin=&#34;15&#34;/&gt;                        &lt;/Border&gt;                        &lt;Border BorderBrush=&#34;White&#34; BorderThickness=&#34;0 0 1 0&#34; Grid.Column=&#34;3&#34;&gt;                            &lt;TextBlock FontSize=&#34;30&#34; Text=&#34;R$ 865,90&#34; Foreground=&#34;Black&#34; Margin=&#34;15&#34;/&gt;                        &lt;/Border&gt;                    &lt;/Grid&gt;                &lt;/Grid&gt;            &lt;/Grid&gt;            &lt;Grid x:Name=&#34;grid&#34; Width=&#34;200&#34; Background=&#34;#FF6C6C8D&#34; RenderTransformOrigin=&#34;0.5,0.5&#34; Grid.Column=&#34;0&#34;&gt;                &lt;Button x:Name=&#34;button&#34; HorizontalAlignment=&#34;Right&#34; VerticalAlignment=&#34;Top&#34; Margin=&#34;10&#34; Style=&#34;{StaticResource MaterialDesignFlatButton}&#34; Click=&#34;Button_Click&#34;&gt;                    &lt;materialDesign:PackIcon Kind=&#34;Menu&#34; Foreground=&#34;White&#34;/&gt;                &lt;/Button&gt;            &lt;/Grid&gt;        &lt;/Grid&gt;    &lt;/Grid&gt;&lt;/Window&gt;

3.5 MainWindow.xaml.cs

關(guān)鍵代碼，簡(jiǎn)單的菜單開、閉動(dòng)畫播放

private void Button_Click(object sender, RoutedEventArgs e){    if (MenuClosed)    {        Storyboard openMenu = (Storyboard)button.FindResource(&#34;OpenMenu&#34;);        openMenu.Begin();    }    else    {        Storyboard closeMenu = (Storyboard)button.FindResource(&#34;CloseMenu&#34;);        closeMenu.Begin();    }    MenuClosed = !MenuClosed;}

4.本文參考

Design com WPF 大神的學(xué)習(xí)視頻：Responsive Layout and Menu Navigation Drawer
開源控件庫：MaterialDesignInXamlToolkit
本站對(duì)MD開源控件庫的介紹：控件介紹

5.代碼下載

Github源碼下載：ResponsiveLayout

除非注明，文章均由 Dotnet9 整理發(fā)布，歡迎轉(zhuǎn)載。
轉(zhuǎn)載請(qǐng)注明本文地址：https://dotnet9.com/6833.html

中文字幕在线中文乱码不卡24_国产在线网站_国产精品扒开腿做爽爽爽的事情_亚洲男人A∨资源网

C# WPF 響應(yīng)式布局和抽屜式菜單導(dǎo)航

C# WPF 響應(yīng)式布局和抽屜式菜單導(dǎo)航

1.實(shí)現(xiàn)效果

2.業(yè)務(wù)場(chǎng)景

3.編碼實(shí)現(xiàn)

3.1 添加Nuget庫

3.2 工程結(jié)構(gòu)

3.3 App.xaml引入MD控件樣式

3.4 主窗體 MainWindow.xaml

3.5 MainWindow.xaml.cs

4.本文參考

5.代碼下載

24小時(shí)排行