WPF实战项目二：设计首页导航条

痕迹灬

已于 2024-03-29 13:44:44 修改

阅读量1.6k

点赞数

分类专栏： WPF 文章标签： wpf

于 2023-07-11 10:14:24 首次发布

本文链接：https://blog.csdn.net/yigu4011/article/details/131191520

版权

WPF 专栏收录该内容

25 篇文章 6 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何使用MaterialDesignThemes在WPF项目中实现首页导航条的设计。通过从github获取并集成代码，设置ColorZone，添加最小化、最大化、关闭按钮以及头像，并实现了头像的圆角显示。同时，在解决方案中添加了图片资源，设置了按钮的点击事件和导航栏的交互功能，最终呈现出理想的界面效果。

摘要由CSDN通过智能技术生成

通过MaterialDesignThemes的github地址，下载代码，将导航条代码复制到MainWindow.xaml中

添加代码到<window..>

xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        TextElement.FontWeight="Regular"
        TextElement.FontSize="13"
        TextOptions.TextFormattingMode="Ideal" 
        TextOptions.TextRenderingMode="Auto"        
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{DynamicResource MaterialDesignFont}"

设置materialDesign的 x:Name="ColorZone"

添加三个按钮最小化、最大化、关闭，添加头像，设置头像为圆角显示，总体代码如下

<Window x:Class="WPFProject.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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:local="clr-namespace:WPFProject"
        mc:Ignorable="d"
        WindowStyle="None"
        WindowStartupLocation="CenterScreen"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        TextElement.FontWeight="Regular"
        TextElement.FontSize="13"
        TextOptions.TextFormattingMode="Ideal" 
        TextOptions.TextRenderingMode="Auto"
        AllowsTransparency="True"
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{DynamicResource MaterialDesignFont}"
        Title="MainWindow"  
        Width="800"
        Height="450">


    <materialDesign:DialogHost DialogTheme="Inherit"
                             Identifier="RootDialog"
                             SnackbarMessageQueue="{Binding ElementName=MainSnackbar, Path=MessageQueue}">

        <materialDesign:DrawerHost IsLeftDrawerOpen="{Binding ElementName=MenuToggleButton, Path=IsChecked}">
            <materialDesign:DrawerHost.LeftDrawerContent>
                <DockPanel MinWidth="220">

                </DockPanel>
            </materialDesign:DrawerHost.LeftDrawerContent>

            <DockPanel>
                <materialDesign:ColorZone Padding="16"
                                          x:Name="ColorZone"
                                  materialDesign:ElevationAssist.Elevation="Dp4"
                                  DockPanel.Dock="Top"
                                  Mode="PrimaryMid">
                    <DockPanel LastChildFill="True">
                        <StackPanel DockPanel.Dock="Right" Orientation="Horizontal">
                            <Image Source="./Images/user.jpg" Height="25" Width="25">
                                <Image.Clip><!--裁剪图片-->
                                    <EllipseGeometry Center="12.5,12.5" RadiusX="12.5" RadiusY="12.5"/>
                                </Image.Clip>
                            </Image>
                            <!--设置水平往右排列-->
                            <Button x:Name="BtnMin" Content="—" Style="{StaticResource MaterialDesignFlatMidBgButton}"/>
                            <Button x:Name="BtnMax" Content="☐" Style="{StaticResource MaterialDesignFlatMidBgButton}"/>
                            <Button x:Name="BtnClose" Content="✕" Style="{StaticResource MaterialDesignFlatMidBgButton}"/>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <ToggleButton x:Name="MenuToggleButton"
                            AutomationProperties.Name="HamburgerToggleButton"
                            IsChecked="False"
                            Style="{StaticResource MaterialDesignHamburgerToggleButton}" />

                            <Button Margin="24,0,0,0"
                      materialDesign:RippleAssist.Feedback="{Binding RelativeSource={RelativeSource Self}, Path=Foreground, Converter={StaticResource BrushRoundConverter}}"
                      Command="{Binding MovePrevCommand}"
                      Content="{materialDesign:PackIcon Kind=ArrowLeft,
                                                        Size=24}"
                      Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"
                      Style="{StaticResource MaterialDesignToolButton}"
                      ToolTip="Previous Item" />

                            <Button Margin="16,0,0,0"
                      materialDesign:RippleAssist.Feedback="{Binding RelativeSource={RelativeSource Self}, Path=Foreground, Converter={StaticResource BrushRoundConverter}}"
                      Command="{Binding MoveNextCommand}"
                      Content="{materialDesign:PackIcon Kind=ArrowRight,
                                                        Size=24}"
                      Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"
                      Style="{StaticResource MaterialDesignToolButton}"
                      ToolTip="Next Item" />

                            <TextBlock Margin="16,0"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       AutomationProperties.Name="Material Design In XAML Toolkit"
                       FontSize="22"
                       Text="WPFProject" />
                        </StackPanel>
                    </DockPanel>
                </materialDesign:ColorZone>
            </DockPanel>
        </materialDesign:DrawerHost>
    </materialDesign:DialogHost>
</Window>

在解决方案窗体下添加图片文件夹，添加头像图片

设置三个按钮的点击事件和拖动导航栏、双击导航栏的点击事件

public MainWindow()
        {
            InitializeComponent();

            BtnMin.Click += (s, e) =>
            {
                this.WindowState = WindowState.Minimized;
            };
            BtnMax.Click += (s, e) => 
            {
                if (this.WindowState == WindowState.Maximized)
                    this.WindowState = WindowState.Normal;
                else
                    this.WindowState = WindowState.Maximized;
            };
            BtnClose.Click += (s, e) =>
            {
                this.Close();
            };
            ColorZone.MouseMove += (s, e) =>
            {
                if (e.LeftButton == MouseButtonState.Pressed)
                    this.DragMove();
            };
            ColorZone.MouseDoubleClick += (s, e) =>
            {
                if (this.WindowState == WindowState.Normal)
                    this.WindowState = WindowState.Maximized;
                else
                    this.WindowState = WindowState.Normal;
            };
        }

界面显示为：