WPF 控件设计艺术[按钮篇四]

最新推荐文章于 2023-10-23 19:29:43 发布
最新推荐文章于 2023-10-23 19:29:43 发布
阅读量887 收藏 1
点赞数
分类专栏： WPF 控件设计艺术 文章标签： WPF 按钮设计 样式 图文按钮 自定义控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YouyoMei/article/details/112389701
版权

三、按钮篇

（四）图文合并按钮-IconTextButton

  • 同样的，我们找到我们需要设计的按钮样式，如下图左上角的主页按钮哦

    在这里插入图片描述

  • 来分析一下吧，我们通过使用WindowsSettings中的这个面板的按钮，可以分析出如下特点：

    • 按钮内容同时存在图标和文本，并且图标和文本都能根据不同功能变化。
    • 默认情况下，背景为透明
    • 鼠标放上去，有一个灰色背景色
    • 鼠标按上去，背景色加深，图标和文本加粗

  • 由于该按钮由一个图标和文本组成，因此我们就是用上个样式定义的IconButton类就可以了，使用IconData做图标，Button类的Content属性作为文本。

    文件路径：Deamon.UiCore.Controls.IconButton.cs

    using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace Deamon.UiCore.Controls
{
    /// <summary>
    /// 图标按钮
    /// </summary>
    public class IconButton : Button
    {
        public IconButton()
        {
            //((StreamGeometry)IconData).FillRule = FillRule.EvenOdd;
        }
        /// <summary>
        /// 图标数据
        /// </summary>
        public Geometry IconData
        {
            get { return (Geometry)GetValue(IconDataProperty); }
            set { SetValue(IconDataProperty, value); }
        }

        /// <summary>
        /// <see cref="IconData"/>
        /// </summary>
        public static readonly DependencyProperty IconDataProperty =
            DependencyProperty.Register(nameof(IconData), typeof(Geometry), typeof(IconButton), new PropertyMetadata(default(Geometry), (s, e) => { }));

    }
}

  • 接下来，打开VS，添加一个按钮，并编辑模板，我是直接定义到资源自定文件中的，如下图所示：

    在这里插入图片描述

  • 添加上我们自定义的颜色资源，设置模板样式，有些颜色资源在其他文件中已经定义过所以不完整哦：

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:controls="clr-namespace:Deamon.UiCore.Controls"
                    xmlns:local="clr-namespace:Deamon.UiCore.Styles">

    <SolidColorBrush x:Key="Button.Static.Background" Color="Transparent"/>
    <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#33000000"/>
    <SolidColorBrush x:Key="Button.Pressed.Background" Color="#33000000"/>
    <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
    <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
    <DropShadowEffect x:Key="DeepPathEffect" ShadowDepth="1" Color="Black" />
    <Style x:Key="IconTextButton" TargetType="{x:Type controls:IconButton}">
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
        <Setter Property="Foreground" Value="#FF000000"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type controls:IconButton}">
                    <Grid x:Name="root" Margin="0">
                        <Border x:Name="border" Background="{TemplateBinding Background}" 
                                    BorderThickness="{TemplateBinding BorderThickness}" 
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    SnapsToDevicePixels="true">
                        </Border>

                        <StackPanel Orientation="Horizontal">
                            <Border Padding="18" Width="60" >
                                <Viewbox>
                                    <Path Data="{TemplateBinding IconData}" 
                                          x:Name="path" Fill="{TemplateBinding Foreground}"
                                          Stretch="Uniform">
                                    </Path>
                                </Viewbox>
                            </Border>

                            <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                        </StackPanel>

                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
                        </Trigger> 
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
                            <Setter Property="Margin" TargetName="root" Value="3 0 0 0"/> 
                            <Setter Property="TextElement.FontWeight" TargetName="contentPresenter" Value="Black"/>
                            <Setter Property="Effect" TargetName="path" Value="{StaticResource DeepPathEffect}"/>
                        </Trigger> 
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

  • 最后在Main Window.xaml中使用

    • 先引用资源

      <Application x:Class="Deamon.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Deamon"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="UiCore/Styles/IconOnlyButton.xaml"/>
                <ResourceDictionary Source="UiCore/Styles/IconTextButton.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

    • 使用

      <Window x:Class="Deamon.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:Deamon"
        xmlns:controls="clr-namespace:Deamon.UiCore.Controls"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid>
            <StackPanel >
                <Button Style="{DynamicResource TextOnlyButton}" HorizontalAlignment="Center" Content="夜间模式设置"/>
                <Button Style="{DynamicResource TextOnlyButton}" Padding="0 5" HorizontalAlignment="Center" Content="Windows HD Color 设置"/>
                <Button Style="{DynamicResource TextOnlyButton}" Padding="5 0" HorizontalAlignment="Center" Content="高级缩放设置"/>
                <Button Style="{DynamicResource TextOnlyButton}" Padding="10 0" HorizontalAlignment="Center" Content="获取帮助"/>
                <Button Style="{DynamicResource TextOnlyButton}" Padding="10 0" HorizontalAlignment="Center" IsEnabled="False"  Content="提供反馈"/>

                <Button Style="{DynamicResource TextOnlyButton}" FontSize="20" HorizontalAlignment="Center" Content="连接到无线显示器"/>
                <Button Style="{DynamicResource TextOnlyButton}" FontSize="14" HorizontalAlignment="Center" Content="了解更多关于 Windows HD Color 的信息"/>
                <Button Style="{DynamicResource TextOnlyButton}" FontSize="13" HorizontalAlignment="Center" Content="了解更多关于 Windows HD Color 的信息"/>
                <Button Style="{DynamicResource TextOnlyButton}" FontSize="12" HorizontalAlignment="Center" Content="了解更多关于 Windows HD Color 的信息"/>
                <Button Style="{DynamicResource TextOnlyButton}" FocusVisualStyle="{x:Null}" FontSize="12" HorizontalAlignment="Center" Content="了解更多关于 Windows HD Color 的信息"/>

                <Button Style="{DynamicResource BackDropButton}"  Margin="5" Width="100" HorizontalAlignment="Center" VerticalAlignment="Center" Content="检测"/>
                <Button Style="{DynamicResource BackDropButton}"  Margin="5" Width="100" HorizontalAlignment="Center" VerticalAlignment="Center" Content="更改"/>
                <Button Style="{DynamicResource BackDropButton}"  Margin="5" Width="100" HorizontalAlignment="Center" VerticalAlignment="Center" Content="设置默认值"/>
                <Button Style="{DynamicResource BackDropButton}"  Margin="5" Width="100" HorizontalAlignment="Center" VerticalAlignment="Center" Content="清楚"/>
                <Button Style="{DynamicResource BackDropButton}"  Margin="5" Width="100" HorizontalAlignment="Center" VerticalAlignment="Center" IsEnabled="False" Content="允许"/>

            </StackPanel>

            <controls:IconButton Style="{DynamicResource IconOnlyButton}"  Width="50" Height="30" HorizontalAlignment="Left" Content="sdasdad"  VerticalAlignment="Top">
                <controls:IconButton.IconData>
                    <StreamGeometry>M928 464H247.936L569.984 141.76l-56.56-56.688-418.608 418.56 418.608 418.56 56.56-56.352L247.936 544H928z</StreamGeometry>
                </controls:IconButton.IconData>
            </controls:IconButton>

            <StackPanel HorizontalAlignment="Left"  Margin="0 50 0 0">
                <controls:IconButton Style="{DynamicResource IconTextButton}"
                              Width="300"
                             FontSize="14"
                             Height="50" Content="主页">
                    <controls:IconButton.IconData>
                        <StreamGeometry>M874.666667 896H618.666667a21.333333 21.333333 0 0 1-21.333334-21.333333V640h-170.666666v234.666667a21.333333 21.333333 0 0 1-21.333334 21.333333H149.333333a21.333333 21.333333 0 0 1-21.333333-21.333333V405.333333a21.376 21.376 0 0 1 9.024-17.429333l362.666667-256a21.354667 21.354667 0 0 1 24.618666 0l362.666667 256A21.376 21.376 0 0 1 896 405.333333v469.333334a21.333333 21.333333 0 0 1-21.333333 21.333333z m-234.666667-42.666667h213.333333V416.405333L512 175.445333 170.666667 416.405333V853.333333h213.333333V618.666667a21.333333 21.333333 0 0 1 21.333333-21.333334h213.333334a21.333333 21.333333 0 0 1 21.333333 21.333334z</StreamGeometry>
                    </controls:IconButton.IconData>
                </controls:IconButton>

                <controls:IconButton Style="{DynamicResource IconTextButton}"
                              Width="300"
                             FontSize="14"
                             Height="50" Content="主页">
                    <controls:IconButton.IconData>
                        <StreamGeometry>M874.666667 896H618.666667a21.333333 21.333333 0 0 1-21.333334-21.333333V640h-170.666666v234.666667a21.333333 21.333333 0 0 1-21.333334 21.333333H149.333333a21.333333 21.333333 0 0 1-21.333333-21.333333V405.333333a21.376 21.376 0 0 1 9.024-17.429333l362.666667-256a21.354667 21.354667 0 0 1 24.618666 0l362.666667 256A21.376 21.376 0 0 1 896 405.333333v469.333334a21.333333 21.333333 0 0 1-21.333333 21.333333z m-234.666667-42.666667h213.333333V416.405333L512 175.445333 170.666667 416.405333V853.333333h213.333333V618.666667a21.333333 21.333333 0 0 1 21.333333-21.333334h213.333334a21.333333 21.333333 0 0 1 21.333333 21.333334z</StreamGeometry>
                    </controls:IconButton.IconData>
                </controls:IconButton>
            </StackPanel>

        </Grid>

    </Grid>
</Window>

  • 看一看效果吧
    在这里插入图片描述

积跬步以至千里:) (:一阵没来由的风
哔哩哔哩同步视频 或者搜索用户：一阵没来由的风

一阵没来由的风
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF_开发教程(_中文版)
05-21
1. **基本元素和控件**：WPF提供了一系列预定义的UI控件，如按钮、文本框、列表视图等，这些控件基于**控件模板**，可以自定义外观和行为。 2. **布局系统**：WPF的布局系统包括网格、堆栈面板、 dock面板和相对...
wpf视频教程4
04-27
这个教程对于初学者来说非常有价值，因为它涵盖了WPF中几个核心的UI设计和交互元素。通过深入理解并掌握这些概念，开发者能够创建出更具吸引力和用户体验良好的桌面应用程序。无论是自定义控件的外观，还是实现复杂...
WPF常用的按钮样式(添加图片和设置圆角)
最新发布
Hat_man_的博客
10-23 1251
【代码】WPF常用的按钮样式(添加图片和设置圆角)
WPF 控件设计艺术[按钮篇五]
YouyoMei的博客
01-10 829
三、按钮篇 （五）带描述图文按钮-WithDescIconTextButton 按钮内容同时存在图标、主要文本以及对按钮功能的描述补充文本，并且图标、主要文本和描述文本都能根据不同功能变化。我们看下我们参考的按钮的样子吧，如下图所示： 接下来我们分析下，按钮的效果： 默认情况下，背景为透明 鼠标放上去，有一个灰色背景色 鼠标按上去，背景色加深，图标和文本加粗 在实现时，我们同样使用自定义控件，继承之前的IconButton 并添加添加对应的Description依赖属性即可，DescIco
WPF制作开关按钮
weixin_44588263的博客
06-23 3102
今天我们用WPF来制作一个开关按钮，什么是开关按钮，请看下图。 开关按钮就是由一个圆加一个矩形组成的，当我们点击它是，圆就改变位置，并且改变矩形的颜色。就是这么个原理 接下来我来看下代码，这是一个待审核的开关按钮， // 一个开关布局 <Grid > <Grid.ColumnDefinitions> <ColumnDefinition /> <Colu
WPF自定义漂亮的按钮样式
微软新技术
05-02 5077
首先打开 Microsoft Visual Studio 2008 ，新建一个WPF项目，在上面随便放几个按钮：然后给各个按钮设置不同的背景颜色：设置好之后就是这样啦：然后我们就开始在 App.xaml 文件中定义按钮样式了：定义的样式代码如下：以下为引用的内容：    xmlns="http://schemas.microsoft.com/wi
C#WPF项目连接MySQL数据库（VSCode或VS2017）
Carmelo_7的博客
12-20 4180
C#WPF项目连接MySQL数据库，通过NuGet导入包，以VS2017和VSCode为例
WPF音乐播放器
10-21
WPF是微软推出的用于构建Windows客户端应用的UI框架，它提供了丰富的图形渲染能力、数据绑定机制和强大的用户体验设计工具。这款音乐播放器是使用Visual Studio（VS）开发平台，特别是VS2012或更高版本，用C#编程...
《WPF全视角分析》章节源代码
06-14
- **控件与布局**: WPF提供了一系列内置控件，如按钮、文本框、列表视图等，它们都支持丰富的样式和模板。布局系统包括StackPanel、Grid、Canvas等，帮助开发者灵活地组织UI元素。 **2. 数据绑定** - **MVVM模式*...
C# WPF IE7样式控件
08-31
WPF控件是构建用户界面的基本元素，包括按钮、文本框、菜单等。它们可以通过设置属性、模板和样式来自定义外观和行为。在IE7样式控件中，开发者可能会关注如下的知识点： 1. **样式和模板**：在WPF中，我们可以使用...
一套科技感很强的图标
06-10
这种2D仿3D的图标很流行哦说不清楚什么风格
WPF Themes WPF酷炫主题包 高级程序员必备
05-26
此主题稍加引用，便让您的软件焕发生机，一看就不一般 使用方法： //只需要加下面一句
WPF自定义控件和样式之自定义按钮（Button）
12-31
一、前言 程序界面上的按钮多种多样，常用的就这几种：普通按钮、图标按钮、文字按钮、图片文字混合按钮。本文章记录了不同样式类型的按钮实现方法。下面话不多说了，来一起看看详细的介绍吧。 二、固定样式的按钮 固定样式的按钮一般在临时使用时或程序的样式比较固定时才会使用，按钮整体样式不需要做大的改动。 2.1 普通按钮-扁平化风格 先看效果： 定义Button的样式，详见代码： <Style x:Key=BtnInfoStyle TargetType=Button> <Setter Property=
WPFButton样式
10-09
WPFButton样式，6种button样式，简单的按钮样式，美化界面按钮
好看的WPF自定义按钮样式（绝对不亏）
09-30
全部出自个人之手。 预览地址http://csdn-1252047526.cossh.myqcloud.com/button.gif
WPF UI开发教程自定义带图片按钮
liaohaiyin的专栏
08-22 590
在这篇博文中，我将向您展示如何创建自定义控件 ImageButton。在这个控件中，我们将使用 Grid 控件来定位我们的图像，按钮的内容将始终位于它的中心。您不必指定按钮内容 - 在这种情况下，它只是一个图像按钮。ImageButton 继承自 Button，因此您可以访问所有按钮的属性。此外，您可以设置以下属性： 图像源 ImageLocation（左、上、右、下、中） 图像宽度 图像高度 如何使用此控件的示例代码： <local:ImageButton Width="200" H
WPF 图片按钮
热门推荐
stybill的博客
12-06 4万+
WPF 动态切换按钮图片
CSDNcjy123的博客
05-27 2196
WPF动态切换按钮图片就是在鼠标移上去的时候显示另一张图片 首先先把三张图片放上去 第一张 第二张 第三张 然后给他们一个值，鼠标移上去的时候是true，显示图片，鼠标移开的时候显示false不显示图片，代码如下 效果 鼠标移上去的效果 ...
WPF 控件设计艺术[按钮篇一]
YouyoMei的博客
01-09 2462
三、按钮篇 （一）纯文本按钮-TextOnlyButton 创建一个Button按钮，设置宽高 右键设计窗口中的按钮，找到编辑模板的编辑副本，并点击它。如下图所示。 此时会弹出一个对话框，提示我们选择创建资源名称和定义位置，如下图所示。 我们可以不用管，但为了方便，我们设置一下名称TextOnlyButton，然后点击确定。 此时，会在我们MainWindow中的Resources中创建一些资源信息，如下图所示。 我们可以简单将上面的资源文件划分为三类，如下图所示，分别是：焦

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值