WPF自定义漂亮顶部工具栏 WPF自定义精致最大化关闭工具栏 wpf导航栏自定义 WPF快速开发工具栏

weijia36242024-01-11 0:03

在WPF应用程序开发中，自定义一个漂亮的顶部工具栏具有多重关键作用，它不仅增强了用户体验，还提升了整体应用的专业性和易用性。以下是对这一功能的详细介绍：

首先，自定义顶部工具栏是用户界面设计的重要组成部分，它集成了应用程序的核心操作入口，如关闭、最大化和最小化窗口按钮，这些直观而易于识别的控件赋予了用户对窗口状态的完全控制权，使他们能够轻松调整窗口大小或退出程序。

其次，工具栏的灵活性体现在其强大的内容承载能力上，开发者可以自由地将Menu菜单项、图片、图标甚至是复杂的数据可视化组件嵌入其中，从而实现快捷访问常用功能、展示重要信息或提供动态数据概览等目的。这种高度定制化的布局有助于根据特定应用场景和用户需求量身打造高效的交互方式。

再者，通过运用WPF强大的样式和模板机制，开发者能够创建出拥有独特视觉效果的工具栏，例如背景色渐变、动态动画等高级UI效果。这样的个性化设计不仅能凸显应用的品牌特色，还能营造舒适的操作环境，提高用户的使用愉悦感和软件的吸引力。

最后，优雅且功能齐全的顶部工具栏对于提升首屏界面的重要性不言而喻。它作为用户与应用程序互动的第一道门面，精心设计的工具栏有助于引导用户快速定位功能模块，简化操作流程，降低认知负荷，并彰显应用的精致品质和人性化考量。

WPF中自定义的漂亮顶部工具栏不仅是技术实力的展现，更是提升用户体验、塑造品牌形象和优化交互逻辑的关键设计元素之一，它的存在极大地影响着用户对整个应用程序的第一印象及长期使用的满意度。

下载源代码

XML 复制代码 
<Window x:Class="headBeautiful.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:hc="https://handyorg.github.io/handycontrol"
        xmlns:local="clr-namespace:headBeautiful"
        mc:Ignorable="d"
        WindowStyle="None"
        WindowStartupLocation="CenterScreen"
        WindowState="Maximized"
        Loaded="Window_Loaded"
        MouseLeftButtonDown="Window_MouseLeftButtonDown"
        Title="MainWindow" Height="850" Width="1200">
    <WindowChrome.WindowChrome>
        <WindowChrome CaptionHeight="0" ResizeBorderThickness="5"/>
    </WindowChrome.WindowChrome>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40" />
            <RowDefinition Height="300" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Grid.Background>
                <LinearGradientBrush StartPoint="0,1" EndPoint="1,1">
                    <GradientStop Offset="0" Color="#CCD5F0"/>
                    <GradientStop Offset="1" Color="#C4E2EC"/>
                </LinearGradientBrush>
            </Grid.Background>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="200"/>
            </Grid.ColumnDefinitions>
            <StackPanel Grid.Column="0" Orientation="Horizontal" VerticalAlignment="Center">
                <TextBlock Text="导航页" Foreground="#5a5e66" FontSize="16" FontWeight="Bold" Margin="15 0 0 0"/>
            </StackPanel>
            <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
                <Border BorderBrush="#5a5e66" BorderThickness="1" CornerRadius="5" Background="#FFFFFF" >
                    <Menu Background="Transparent" FontSize="14" VerticalAlignment="Center" BorderThickness="0" BorderBrush="Transparent">
                        <MenuItem Header="微软" Foreground="#5a5e66" />
                        <MenuItem Header="Google" Foreground="#5a5e66" />
                        <MenuItem Header="苹果" Foreground="#5a5e66" />
                        <MenuItem Header="小米" Foreground="#5a5e66" />
                        <MenuItem Header="联系" Foreground="#5a5e66" />
                        <MenuItem Header="退出" Foreground="#5a5e66" />
                    </Menu>
                </Border>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Grid.Column="2" HorizontalAlignment="Right">
                <Button Style="{StaticResource ButtonIcon}" Foreground="#5a5e66"  x:Name="MinWin" Click="MinWin_Click"
                            hc:IconElement.Geometry="{StaticResource WindowMinGeometry}" Visibility="Visible"/>
                <Button Style="{StaticResource ButtonIcon}" Foreground="#5a5e66"  x:Name="MaxWin" Click="MaxWin_Click"
                            hc:IconElement.Geometry="{StaticResource WindowRestoreGeometry}" Margin="0 0 10 0"/>
                <Button Style="{StaticResource ButtonIcon}" Foreground="#5a5e66"  x:Name="MaxWin2" Click="MaxWin2_Click"
                            hc:IconElement.Geometry="{StaticResource WindowMaxGeometry}" Margin="0 0 10 0"/>
                <Button Style="{StaticResource ButtonIcon}" Foreground="#5a5e66" x:Name="Close" Click="Close_Click"
                        hc:IconElement.Geometry="{StaticResource CloseGeometry}" Margin="0 0 10 0"/>
            </StackPanel>
        </Grid>
        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
            </Grid.RowDefinitions>
            <!--这两个broder是背景-->
            <Border Background="#409eff" Grid.Row="0"/>
            <Border Background="#F9F9FC" Grid.Row="1"/>

            <UniformGrid Grid.Row="0" Grid.RowSpan="2" Columns="3" Margin="0 40 0 40">

                <Border Margin="15" CornerRadius="5">
                    <Border.Background>
                        <LinearGradientBrush StartPoint="0,1" EndPoint="1,1">
                            <GradientStop Offset="0" Color="#FF8C69"/>
                            <GradientStop Offset="1" Color="#FF7000"/>
                        </LinearGradientBrush>
                    </Border.Background>

                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="1*"/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition Height="2*"/>
                        </Grid.RowDefinitions>

                        <TextBlock Text="Stock Total" Grid.Row="1" VerticalAlignment="Center" FontSize="16" Margin="10 0 0 0" Foreground="White"/>
                        <TextBlock Text="$150000" FontWeight="Bold" VerticalAlignment="Center" Grid.Row="2" FontSize="22" Margin="10 0 0 0" Foreground="White"/>
                        <TextBlock Text="Incrased by 60%" Grid.Row="3" FontSize="20" Foreground="White" Margin="10 0 0 0" VerticalAlignment="Center"/>

                        <Canvas ClipToBounds="True" Grid.RowSpan="4">
                            <Border Canvas.Right="-40" Canvas.Top="10" Grid.RowSpan="4" Width="110" Height="110"  CornerRadius="100" Background="#ffffff" Opacity="0.2" VerticalAlignment="Top"  HorizontalAlignment="Right"/>
                            <Border Canvas.Right="-10" Canvas.Top="100" Grid.RowSpan="4" Width="110" Height="110" CornerRadius="100" Background="#ffffff" Opacity="0.2" VerticalAlignment="Bottom"  HorizontalAlignment="Right"/>
                        </Canvas>

                    </Grid>

                </Border>

                <Border Margin="15" CornerRadius="5">
                    <Border.Background>
                        <LinearGradientBrush StartPoint="0,1" EndPoint="1,1">
                            <GradientStop Offset="0" Color="#FFD700"/>
                            <GradientStop Offset="1" Color="#FFC100"/>
                        </LinearGradientBrush>
                    </Border.Background>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="1*"/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition Height="2*"/>
                        </Grid.RowDefinitions>

                        <TextBlock Text="Total Proflt" Grid.Row="1" VerticalAlignment="Center" FontSize="16" Margin="10 0 0 0" Foreground="White"/>
                        <TextBlock Text="$250000" FontWeight="Bold" VerticalAlignment="Center" Grid.Row="2" FontSize="22" Margin="10 0 0 0" Foreground="White"/>
                        <TextBlock Text="Incrased by 30%" Grid.Row="3" FontSize="20" Foreground="White" Margin="10 0 0 0" VerticalAlignment="Center"/>


                        <Canvas ClipToBounds="True" Grid.RowSpan="4">
                            <Border Canvas.Right="-40" Canvas.Top="10" Grid.RowSpan="4" Width="110" Height="110"  CornerRadius="100" Background="#ffffff" Opacity="0.2" VerticalAlignment="Top"  HorizontalAlignment="Right"/>
                            <Border Canvas.Right="-10" Canvas.Top="100" Grid.RowSpan="4" Width="110" Height="110" CornerRadius="100" Background="#ffffff" Opacity="0.2" VerticalAlignment="Bottom"  HorizontalAlignment="Right"/>
                        </Canvas>

                    </Grid>
                </Border>

                <Border Margin="15" CornerRadius="5">
                    <Border.Background>
                        <LinearGradientBrush StartPoint="0,1" EndPoint="1,1">
                            <GradientStop Offset="0" Color="#00CED1"/>
                            <GradientStop Offset="1" Color="#59E6B5"/>
                        </LinearGradientBrush>
                    </Border.Background>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="1*"/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition Height="2*"/>
                        </Grid.RowDefinitions>

                        <TextBlock Text="Unique Visitors" Grid.Row="1" VerticalAlignment="Center" FontSize="16" Margin="10 0 0 0" Foreground="White"/>
                        <TextBlock Text="$250000" FontWeight="Bold" VerticalAlignment="Center" Grid.Row="2" FontSize="22" Margin="10 0 0 0" Foreground="White"/>
                        <TextBlock Text="Incrased by 80%" Grid.Row="3" FontSize="20" Foreground="White" Margin="10 0 0 0" VerticalAlignment="Center"/>

                        <Canvas ClipToBounds="True" Grid.RowSpan="4">
                            <Border Canvas.Right="-40" Canvas.Top="10" Grid.RowSpan="4" Width="110" Height="110"  CornerRadius="100" Background="#ffffff" Opacity="0.2" VerticalAlignment="Top"  HorizontalAlignment="Right"/>
                            <Border Canvas.Right="-10" Canvas.Top="100" Grid.RowSpan="4" Width="110" Height="110" CornerRadius="100" Background="#ffffff" Opacity="0.2" VerticalAlignment="Bottom"  HorizontalAlignment="Right"/>
                        </Canvas>
                    </Grid>
                </Border>


            </UniformGrid>

        </Grid>

    </Grid>
</Window>
相关推荐
晚安苏州7 小时前
WPF DataTemplate 数据模板
wpf
甜甜不吃芥末1 天前
WPF依赖属性详解
wpf
Hat_man_1 天前
WPF制作图片闪烁的自定义控件
wpf
晚安苏州3 天前
WPF Binding 绑定
wpf·wpf binding·wpf 绑定
wangnaisheng3 天前
【WPF】RenderTargetBitmap的使用
wpf
dotent·3 天前
WPF 完美解决改变指示灯的颜色
wpf
orangapple5 天前
WPF 用Vlc.DotNet.Wpf实现视频播放、停止、暂停功能
wpf·音视频
ysdysyn5 天前
wpf mvvm 数据绑定数据（按钮文字表头都可以），根据长度进行换行，并把换行的文字居中
c#·wpf·mvvm
orangapple5 天前
WPF 使用LibVLCSharp.WPF实现视频播放、停止、暂停功能
wpf
晚安苏州5 天前
WPF ControlTemplate 控件模板
wpf
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程