WPF自定义按钮（Blend制作，无图片）

于 2025-02-18 00:21:54 发布
阅读量676 收藏 3
点赞数 23
文章标签： wpf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ly1h1/article/details/145694487
版权

背景：当前WPF的版本当中，对界面的要求越来越高，在此举例制作WPF的自定义按钮。

效果如下，分别是正常状态，悬浮状态和按下状态

1.Blend进行绘制

 1.1 打开Blend For Visual Studio软件，创建WPF应用程序

1.2 首先是往Window中拖出1个按钮

1.3 右键按钮，选择【编辑副本】，命名样式为【ButtonTestStyle】

1.4 剪切保留，contentpresenter

1.5 删除border

1.6 在对应的template处拖出Grid控件容器

1.7 再把contentpresenter粘贴到Grid

1.8 添加一个矩形，拖出到Window

1.9 接着是对矩形的一个样式绘图，这里跟PS有点相似，具体要看个人发挥，以下是个人发挥的效果：

2.0 绘制完第一版的样式后，则需要对其他按钮的状态样式进行绘制，建议是根据状态不同，绘制不同的颜色，分别是IsDefault、IsMourseOver、IsPressed这三个就够了。

2.1 点击左上角的【启动】按钮，即可实现效果。

Blend绘制后，对应的XAML代码如下：
 

<Window x:Class="UserButton.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:UserButton"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="FocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
        <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
        <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
        <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
        <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
        <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
        <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
        <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
        <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
        <Style x:Key="ButtonTestStyle" TargetType="{x:Type Button}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
            <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
            <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid Margin="2.461,3.939,26.583,11.814">
                            <Rectangle x:Name="rectangle" Margin="0,0,5.415,0" Stroke="#FFFBF9F9" StrokeThickness="2">
                                <Rectangle.Fill>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="Black" Offset="0.965"/>
                                        <GradientStop Color="#FF1941F7" Offset="0.524"/>
                                        <GradientStop Color="#FF1230BA" Offset="0.361"/>
                                        <GradientStop Color="#FF1334C8" Offset="0.321"/>
                                        <GradientStop Color="#FF020618" Offset="0.024"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <ContentPresenter x:Name="contentPresenter" Focusable="False"  Margin="0,0,0,0" TextElement.Foreground="White"  RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsDefaulted" Value="true"/>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Fill" TargetName="rectangle">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="Black" Offset="0.965"/>
                                            <GradientStop Color="#FF1941F7" Offset="0.524"/>
                                            <GradientStop Color="#FF1230BA" Offset="0.361"/>
                                            <GradientStop Color="#FF1334C8" Offset="0.321"/>
                                            <GradientStop Color="#FF5D74DC" Offset="0.024"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Fill" TargetName="rectangle">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="Black" Offset="1"/>
                                            <GradientStop Color="#FF1941F7" Offset="0.947"/>
                                            <GradientStop Color="#FF1230BA" Offset="0.361"/>
                                            <GradientStop Color="#FF1334C8" Offset="0.321"/>
                                            <GradientStop Color="#FFE4E5EE" Offset="0.024"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false"/>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Button x:Name="button" Content="Button" Foreground="White" Margin="136.296,97.543,173.953,132.357" Style="{DynamicResource ButtonTestStyle}"/>

    </Grid>
</Window>

2.在Visual Studio中，将Blend的样式，形成自定义控件。

 2.1 新建项目和对应的类库

2.2 创建Controls 和Themes文件夹

 

2.3 在Controls文件加内添加WPF自定义控件，CommControlButtonTest

2.4 将以上Blend软件绘制的样式，复制到CommControlButtonTest的xmal文件内，注意需要修改文件的大标签格式为ResourceDictionary，总体采用这个标签来识别自定义的控件，接着将Blend软件绘制的样式内的Style复制到文件内。

xmal如下

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


    <Style  TargetType="{x:Type local:CommControlButtonTest}">
       
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid Margin="2.461,3.939,26.583,11.814">
                        <Rectangle x:Name="rectangle" Margin="0,0,5.415,0" Stroke="#FFFBF9F9" StrokeThickness="2">
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="Black" Offset="0.965"/>
                                    <GradientStop Color="#FF1941F7" Offset="0.524"/>
                                    <GradientStop Color="#FF1230BA" Offset="0.361"/>
                                    <GradientStop Color="#FF1334C8" Offset="0.321"/>
                                    <GradientStop Color="#FF020618" Offset="0.024"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <ContentPresenter x:Name="contentPresenter" Focusable="False"  Margin="0,0,0,0" TextElement.Foreground="White"  RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsDefaulted" Value="true"/>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Fill" TargetName="rectangle">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="Black" Offset="0.965"/>
                                        <GradientStop Color="#FF1941F7" Offset="0.524"/>
                                        <GradientStop Color="#FF1230BA" Offset="0.361"/>
                                        <GradientStop Color="#FF1334C8" Offset="0.321"/>
                                        <GradientStop Color="#FF5D74DC" Offset="0.024"/>
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Fill" TargetName="rectangle">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="Black" Offset="1"/>
                                        <GradientStop Color="#FF1941F7" Offset="0.947"/>
                                        <GradientStop Color="#FF1230BA" Offset="0.361"/>
                                        <GradientStop Color="#FF1334C8" Offset="0.321"/>
                                        <GradientStop Color="#FFE4E5EE" Offset="0.024"/>
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false"/>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    

</ResourceDictionary>

cs代码如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;


namespace LibraryControls.Controls
{
    /// <summary>
    /// </summary>
    public class CommControlButtonTest : Button
    {
        static CommControlButtonTest()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(CommControlButtonTest), new FrameworkPropertyMetadata(typeof(CommControlButtonTest)));
        }
    }
}
2.5 在Themes文件夹内添加目录文件Generic.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:LibraryControls">

    <ResourceDictionary.MergedDictionaries>

        <ResourceDictionary Source="pack://application:,,,/LibraryControls;component/Controls/CommControlButtonTest.xaml"/>
    </ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

3.效果如下

观无
关注
WPF+MVVM案例实战（二）-自定义按钮实现（带图片文字虚线实线边框切换）
lingshuangcanxue
10-24 932
WPF+MVVM 自定义按钮实现（带图片文字虚线实线边框切换），案例给出两种状态变化控制，一种是两个按钮分开控制，通过按钮禁用边框变成虚线表示不可用状态，另一种时一个按钮控制状态变化，改变按钮文字描述和背景图片
WPF自定义开关切换按钮
qq_44544363的博客
06-07 2701
WPF自定义开关切换按钮 突发奇想先要自己写一个开关按钮，说干就开干了，以下为View视图布局代码，开关按钮的样式就直接在这里定义了，主要呢通过定义触发器来完成按钮的切换。 ```csharp <Window x:Class="DEMO.View.StatusWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsof
WPF界面设计工具---Blend学习（一）
热门推荐
https://github.com/he-ze-xi
10-22 1万+
最近在空闲时间学习WPF界面设计工具Blend，之前写WPF的界面都是完全依靠手敲代码的方式，这种方式往往很低效率而且很难做到一些复杂的效果。比如动画，手敲代码实现动画的话，往往要写很多代码；而用Blend的话，只需两三分钟就可以实现一个效果很不错的动画，方便快捷，因此开始记录Blend工具学习之路，一边摸索一边记录。这是花了半个小时用Blend工具设计出的一个简单界面，效果如下： 这是Blend自动生成的代码： 二.使用Blend 1.Blend工具版本 当我们下载Visual Studio时，会自动下
微软WPF的Blend简单教程
02-01
微软WPF的Blend简单教程，入门的教程，菜鸟同学可以看下
Wpf美化按钮，输入框，下拉框，dataGrid
最新发布
qq_41973721的博客
02-09 1063
wpf美化
WPF使用Blend
故里2130
05-19 2492
纯粹是了为了摸索和学习，所以进行记录。 1.打开Blend建立一个项目 2.拖动3个按钮（3个好看一点，其实一个按钮操作也是一样的 ） 3.建立动画，点击新建 这里选择了Grid，也就是应用下面3个按钮。 其中0，1，2分别表示从0到1秒，从1秒到2秒。 当在1秒的时候，改变按钮的形状和颜色 在2秒的时候，改变按钮的形状和颜色 点击上面的绿色三角，可以进行动画播放 4.创建触发器 点击加号增加触发器，前面要先选择grid，然后选择load...
WPF-Blend
06-07
Microsoft Expression Blend 2工欲善其事，必先利其器
WPF Blend for visual studio使用
lvxingzhe3的博客
01-02 5794
WPF Blend for visual studio使用
【WPF】Blend制作WPF的动画
Austin_Yan的博客
10-17 5441
文章目录连续动画目标效果Blend实现动画的调用路径动画Blend实现效果演示启动动画(程序)关闭动画 连续动画 基础的Storyboard、时间线什么的概念就不在这里写了，因为这个博客也就是我自己记录自己学习的历程，我还没到可以教别人的程度 用C#代码或者Xaml画一条线是很容易，但是要让线慢慢的一点点变长呢？用Timer计时器每隔一段时间修改line的宽度吗？不说Timer的时间精度问题，这样做出来想必也没有那么流畅的效果 目标效果 Blend实现 先创建一个Line的对象，放入Canvas容器内
WPF自定义用户控件一个小例子
08-04
在本文中，我们将深入探讨如何在Windows Presentation Foundation (WPF) 中自定义用户控件。WPF是.NET Framework的一部分，用于构建丰富的桌面应用程序，而自定义用户控件则是提升应用程序可复用性和功能的关键。 ...
WPF中自定义Scrollbar 滚动条 样式 图片
11-24
本文将深入探讨如何在WPF中自定义Scrollbar的样式，包括设置颜色和使用自定义图片。 首先，要自定义滚动条样式，我们需要创建一个`Style`对象，并将其应用于`ScrollBar`控件。`Style`可以包含多个`Setter`，用于...
中文界面blend_使用Blend设计出符合效果的WPF界面
weixin_28993311的博客
01-16 1376
之前不会用blend，感觉好难的，但美工给出的效果自己有没办法实现，所以研究了一下blend，感觉没有想象中的那么难废话不多说，开始界面设计今天拿到美工给的一个界面效果图这个界面说实话，还可以吧，勉强说得过去。拿到界面效果图，难的两个部分都让我框起来的，这一看就是wpf里面的控件TabControl美化而来，其他部分都是很好弄得，这一篇我们下来美化一个tabControl控件。如下图:这里我们借助...
WPF界面设计辅助工具--Blend
狂奔之林的博客
03-17 5125
篇外：Blend可以用来探究不熟悉控件组成结构 转自：https://blog.csdn.net/xpj8888/article/details/82715409 一、什么是Blend? 1、Blend是一款用于设计桌面和Web应用用户界面的可视化工具，用于UI设计，其功能和PS类似，但是比PS强大。其可以快速、精细地绘制图片，并可以生成.XAML文件，以便给VS工程使用。 2、VS自带有一款bl...
WPF 中 使用Blend进行交互式设计
05-24
WPF中的图形系统系列：使用Blend进行交互式设计，讲得很详细。各位朋友请注意不是代码，是幻灯片，谢谢。
Blend构建WPF用户界面
Java_c#
11-24 3418
一、Blend3 改变布局类型        二、
C# WPF Blend 按钮样式设置
雪梅暗香无人寻，酒淳巷深待君知
07-17 1268
最近学习WPF研究了一下关于按钮样式设置 第一次编辑样板选择编辑副本 IsMouseOver=True设置鼠标经过时候 我们这里将背景设置为我们的图片 前景色设置为无，透明度为80 然后我们设置鼠标按下以后Is=Pressed=True 设置缩放将大小设置为1.1 最后贴上代码 <ControlTemplate Targe...
wpf自定义窗体
05-27
标题提到的"wpf自定义窗体"是一个关于如何在WPF中设计并实现个性化窗口的实践案例。描述中提到了窗体的阴影部分可能过于臃肿，并暗示可以通过使用放射性渐变填充来优化这个问题，这涉及到图形渲染和UI设计的优化技巧...
WPF Blend Grid 布局
dongjing9625的博客
08-03 137
这几天都在用blend拖拽界面.我想要的效果是 放大后出现的效果是 但实际出来的效果是放大以后能看到所有的控件,缩小以后窗体就把控件个遮住了.怎么办? 在WPF中提供了9种布局方式，具体Grid，Canvas，StackPanel。。。记不住针对不同的界面实际用到的布局也是不同的，所谓的设计就是视情况而定 比方说上面的例子，自己从直接往上面托控件，然后手动去对齐。眼睛都成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值