首頁>技術>

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

內容目錄

效果

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控制元件樣式

關鍵樣式引用程式碼

<Application.Resources>    <ResourceDictionary>        <ResourceDictionary.MergedDictionaries>            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />            <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />            <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />        </ResourceDictionary.MergedDictionaries>    </ResourceDictionary></Application.Resources>
3.4 主窗體 MainWindow.xaml

全部程式碼,選單及右側佈局

<Window x:Class="ResponsiveLayout.MainWindow"        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 x:Key="CloseMenu">            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Width)" Storyboard.TargetName="grid">                <EasingDoubleKeyFrame KeyTime="0" Value="200"/>                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="70"/>            </DoubleAnimationUsingKeyFrames>        </Storyboard>        <Storyboard x:Key="OpenMenu">            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Width)" Storyboard.TargetName="grid">                <EasingDoubleKeyFrame KeyTime="0" Value="70"/>                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="200"/>            </DoubleAnimationUsingKeyFrames>        </Storyboard>    </Window.Resources>    <Grid>        <Grid>            <Grid.ColumnDefinitions>                <ColumnDefinition Width="auto"/>                <ColumnDefinition Width="*"/>            </Grid.ColumnDefinitions>            <Grid Background="#FFCBCBCB" Grid.Column="1">                <Grid Margin="0 20 0 0" Background="#FFEEEEEE">                    <Grid Height="100" Background="#FFEEEEEE" VerticalAlignment="Top" HorizontalAlignment="Stretch" Margin="10">                        <Grid.ColumnDefinitions>                            <ColumnDefinition Width="*"/>                            <ColumnDefinition Width="*"/>                            <ColumnDefinition Width="*"/>                            <ColumnDefinition Width="*"/>                        </Grid.ColumnDefinitions>                        <Border BorderBrush="White" BorderThickness="0 0 1 0" Grid.Column="0">                            <TextBlock FontSize="30" Text="R$ 860,90" Foreground="Black" Margin="15"/>                        </Border>                        <Border BorderBrush="White" BorderThickness="0 0 1 0" Grid.Column="1">                            <TextBlock FontSize="30" Text="R$ 750,90" Foreground="Black" Margin="15"/>                        </Border>                        <Border BorderBrush="White" BorderThickness="0 0 1 0" Grid.Column="2">                            <TextBlock FontSize="30" Text="R$ 60,90" Foreground="Black" Margin="15"/>                        </Border>                        <Border BorderBrush="White" BorderThickness="0 0 1 0" Grid.Column="3">                            <TextBlock FontSize="30" Text="R$ 865,90" Foreground="Black" Margin="15"/>                        </Border>                    </Grid>                </Grid>            </Grid>            <Grid x:Name="grid" Width="200" Background="#FF6C6C8D" RenderTransformOrigin="0.5,0.5" Grid.Column="0">                <Button x:Name="button" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="10" Style="{StaticResource MaterialDesignFlatButton}" Click="Button_Click">                    <materialDesign:PackIcon Kind="Menu" Foreground="White"/>                </Button>            </Grid>        </Grid>    </Grid></Window>
3.5 MainWindow.xaml.cs

關鍵程式碼,簡單的選單開、閉動畫播放

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;}
4.本文參考

Design com WPF 大神的學習視訊:Responsive Layout and Menu Navigation Drawer 開源控制元件庫:MaterialDesignInXamlToolkit 本站對MD開源控制元件庫的介紹:控制元件介紹

5.程式碼下載

Github原始碼下載:ResponsiveLayout

859

XAML

最新評論
  • BSA-TRITC(10mg/ml) TRITC-BSA 牛血清白蛋白改性標記羅丹明
  • QQ是怎麼樣做的程序不會被系統殺死