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>
相关推荐
九鼎科技-Leo13 小时前
什么是 WPF 中的依赖属性？有什么作用？
windows·c#·.net·wpf
麻花20131 天前
C#之WPF的C1FlexGrid空间的行加载事件和列事件变更处理动态加载的枚举值
开发语言·c#·wpf
lcintj1 天前
【WPF】Prism学习（九）
学习·wpf·prism
界面开发小八哥1 天前
界面控件DevExpress WPF中文教程：网格视图数据布局的列和卡片字段
wpf·界面控件·devexpress·ui开发·用户界面
△曉風殘月〆1 天前
如何在WPF中嵌入其它程序
wpf
Crazy Struggle1 天前
功能齐全的 WPF 自定义控件资源库（收藏版）
.net·wpf·ui控件库
shepherd枸杞泡茶2 天前
WPF动画
c#·.net·wpf
lcintj2 天前
【WPF】Prism学习（十）
学习·wpf·prism
wyh要好好学习2 天前
WPF数据加载时添加进度条
ui·wpf
code_shenbing2 天前
跨平台WPF框架Avalonia教程 三
前端·microsoft·ui·c#·wpf·跨平台·界面设计
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作