微信公眾號：Dotnet9，網站：Dotnet9，問題或建議，請網站留言；如果您覺得Dotnet9對您有幫助，歡迎讚賞

C# WPF 響應式佈局和抽屜式菜單導航

內容目錄

實現效果
業務場景
編碼實現
本文參考
源碼下載

1.實現效果

效果

2.業務場景

常規業務

3.編碼實現

3.1 添加Nuget庫

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

MaterialDesign控件庫

3.2 工程結構

3個文件變動：

App.xaml：添加MD控件樣式
MainWindow.xaml：主窗口實現效果
MainWindow.xaml.cs：主窗口後臺實現抽屜菜單開和閉

3.3 App.xaml引入MD控件樣式

關鍵樣式引用代碼

<code><application.resources>
    <resourcedictionary>
        <resourcedictionary.mergeddictionaries>
            <resourcedictionary>
            <resourcedictionary>
            <resourcedictionary>
            <resourcedictionary>
        /<resourcedictionary.mergeddictionaries>
    /<resourcedictionary>
/<application.resources>/<code>

3.4 主窗體 MainWindow.xaml

全部代碼，菜單及右側佈局

<code><window>        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ResponsiveLayout"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"> 

    <window.resources>
        <storyboard>
            <doubleanimationusingkeyframes>
                <easingdoublekeyframe>
                <easingdoublekeyframe>
            /<doubleanimationusingkeyframes>
        /<storyboard>
        <storyboard>
            <doubleanimationusingkeyframes>
                <easingdoublekeyframe>
                <easingdoublekeyframe>
            /<doubleanimationusingkeyframes>
        /<storyboard>
    /<window.resources>
    <grid>
        <grid>
            <grid.columndefinitions>
                <columndefinition>
                <columndefinition>
            /<grid.columndefinitions>
            <grid>
                <grid>
                    <grid>
                        <grid.columndefinitions>
                            <columndefinition>
                            <columndefinition>
                            <columndefinition>
                            <columndefinition>
                        /<grid.columndefinitions>

                        <border>
                            <textblock>
                        /<border>
                        <border>
                            <textblock>
                        /<border>
                        <border>
                            <textblock>
                        /<border>
                        <border>
                            <textblock>
                        /<border>
                    /<grid>
                /<grid>
            /<grid>
            <grid>
                <button>
                    <packicon>
                /<button>
            /<grid> 

        /<grid>
    /<grid>
/<window>/<code>

3.5 MainWindow.xaml.cs

關鍵代碼，簡單的菜單開、閉動畫播放

<code>private void Button_Click(object sender, RoutedEventArgs e)
{
    if (MenuClosed)
    {
        Storyboard openMenu = (Storyboard)button.FindResource("OpenMenu");
        openMenu.Begin();
    }
    else
    {
        Storyboard closeMenu = (Storyboard)button.FindResource("CloseMenu");
        closeMenu.Begin();
    }

    MenuClosed = !MenuClosed;
}/<code>