Wpf之图片按钮

最新推荐文章于 2025-05-30 09:20:03 发布
最新推荐文章于 2025-05-30 09:20:03 发布
阅读量946 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44564948/article/details/98747275
版权
本文介绍了在WPF中如何自定义图片按钮的样式，通过设置按钮模板和触发器，实现按钮背景的动态变化，提供了具体的XAML代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 Wpf之图片按钮

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： Visual Studio 2015 * SQL Server

作者：

撰写时间：2019年07月17日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

在做项目中一般我们都不会使用按钮的原生按钮，在wpf中定义按钮的样式可以有很多，可以自定义改变它的样式，可以重写它的模板，接下来我说的是自定义改变它的样式，

先在页面写一个button的按钮

<Grid Margin="3">

                        <Grid.RowDefinitions>

                            <RowDefinition/>

                            <RowDefinition/>

                        </Grid.RowDefinitions>

                        <Button Grid.Row="0" Name="btnHospitalWork" Width="40"  Style="{StaticResource btnMenu}" Margin="11,0,11.4,32.6" Grid.RowSpan="2">

                            <Image Width="35" Height="35" Source="Images/0028.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>

                        </Button>

                        <Label Grid.Row="1" Content="文件(F)" Height="25" Name="labHospitalWork" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black"/>

                    </Grid>

 

 

然后在资源字典写它的样式，引用，然后在button按钮上引用静态资源字典即可。

<Style x:Key="btnMenu" TargetType="Button">

        <!--SnapsToDevicePixels默认值false-->

        <Setter Property="SnapsToDevicePixels" Value="True"/>

        <Setter Property="OverridesDefaultStyle" Value="True"/>

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type Button}">

                    <Grid>

                        <Ellipse Fill="{TemplateBinding Background}"/>

                        <Ellipse x:Name="RefractionLayer">

                            <!--椭圆填充色渐变-->

                            <Ellipse.Fill>

                                <RadialGradientBrush GradientOrigin="0.496, 1.052">

                                    <RadialGradientBrush.RelativeTransform>

                                        <!--变化效果合并-->

                                        <TransformGroup>

                                            <!--平移-->

                                            <!--平移:包含X、Y 两种属性，以原来的对象为坐标原点(0,0),然后向X轴、Y轴进行平移变换。-->

                                            <TranslateTransform X="0.02" Y="0.3"/>

                                            <!--缩放：包括属性ScaleX、ScaleY、CenterX、CenterY，其中ScaleX、ScaleY属性表示对象在X、Y轴进行缩放的倍数，使用CenterX 和 CenterY属性指定一个中心点。-->

                                            <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>

 

                                        </TransformGroup>

 

                                    </RadialGradientBrush.RelativeTransform>

                                    <GradientStop Offset="1" Color="#00000000"/>

                                    <GradientStop Offset="0.4" Color="#FFFFFFFF"/>

                                </RadialGradientBrush>

 

                            </Ellipse.Fill>

                        </Ellipse>

                        <Path x:Name="ReflectionLayer" VerticalAlignment="Top" Stretch="Fill">

                            <Path.RenderTransform>

                                <ScaleTransform ScaleY="0.5"/>

                            </Path.RenderTransform>

                            <Path.Data>

                                <!--路径绘图-->

                                <PathGeometry>

                                    <PathFigure IsClosed="True" StartPoint="98.999,45.499">

                                        <BezierSegment Point1="98.999, 54.170" Point2="89.046, 52.258" Point3="85.502,51.029"/>

                                        <BezierSegment IsSmoothJoin="True"    Point1="75.860,47.685" Point2="69.111,45.196" Point3="50.167,45.196"/>

                                        <BezierSegment Point1="30.805,45.196" Point2="20.173,47.741" Point3="10.665,51.363"/>

                                        <BezierSegment IsSmoothJoin="True"    Point1="7.469,52.580"  Point2="1.000,53.252"  Point3="1.000,44.999"/>

                                        <BezierSegment Point1="1.000,39.510" Point2="0.884,39.227" Point3="2.519,34.286"/>

                                        <BezierSegment IsSmoothJoin="True"   Point1="9.106,14.370" Point2="27.875,0" Point3="50,0"/>

                                        <BezierSegment Point1="72.198,0" Point2="91.018,14.466" Point3="97.546,34.485"/>

                                        <BezierSegment IsSmoothJoin="True"  Point1="99.139,39.369" Point2="98.999,40.084" Point3="98.999,45.499"/>

                                    </PathFigure>

                                </PathGeometry>

                            </Path.Data>

                            <Path.Fill>

                                <RadialGradientBrush GradientOrigin="0.498, 0.526">

                                    <RadialGradientBrush.RelativeTransform>

                                        <TransformGroup>

                                            <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1" ScaleY="1.997"/>

                                            <TranslateTransform X="0" Y="0.5"/>

                                        </TransformGroup>

                                    </RadialGradientBrush.RelativeTransform>

                                    <GradientStop Offset="1" Color="#FFFFFFFF"/>

                                    <GradientStop Offset="0.85" Color="#92FFFFFF"/>

                                    <GradientStop Offset="0" Color="#00000000"/>

                                </RadialGradientBrush>

                            </Path.Fill>

                        </Path>

                        <ContentPresenter Margin="0,2,0,0" HorizontalAlignment="Center" VerticalAlignment="Center"/>

                    </Grid>

                    <!--定义触发器-->

                    <ControlTemplate.Triggers>

                        <!--触发器:鼠标悬停-->

                        <Trigger Property="IsMouseOver" Value="True">

                            <Setter TargetName="RefractionLayer" Property="Fill">

                                <Setter.Value>

                                    <!--径向渐变-->

                                    <RadialGradientBrush GradientOrigin="0.496, 1.052">

                                        <RadialGradientBrush.RelativeTransform>

                                            <TransformGroup>

                                                <!--缩放变化-->

                                                <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>

                                                <!--平移变化-->

                                                <TranslateTransform X="0.02" Y="0.3"/>

                                            </TransformGroup>

                                        </RadialGradientBrush.RelativeTransform>

                                        <GradientStop Offset="1" Color="#00000000"/>

                                        <GradientStop Offset="0.45" Color="#FFFFFFFF"/>

                                    </RadialGradientBrush>

                                </Setter.Value>

                            </Setter>

                            <Setter TargetName="ReflectionLayer" Property="Fill">

                                <Setter.Value>

                                    <RadialGradientBrush GradientOrigin="0.498, 0.526">

                                        <RadialGradientBrush.RelativeTransform>

                                            <TransformGroup>

                                                <ScaleTransform  CenterX="0.5" CenterY="0.5"  ScaleX="1" ScaleY="1.997"/>

                                                <TranslateTransform X="0" Y="0.5"/>

                                            </TransformGroup>

                                        </RadialGradientBrush.RelativeTransform>

                                        <GradientStop Offset="1" Color="#CCFFFFFF"/>

                                        <GradientStop Offset="0.85" Color="#66FFFFFF"/>

                                        <GradientStop Offset="0" Color="#00000000"/>

                                    </RadialGradientBrush>

                                </Setter.Value>

                            </Setter>

                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

                            

狮子ye叶子
关注
跨域问题解决
Java后端技术栈
03-08 1749
同源不同源一句话就可以判断：就是url中 scheme（协议），host（域名）， port（端口） 都相同即为同源。不同源就是出现跨域问题 前端解决办法：jsonp 后端解决办法：CORS 运维解决办法：ngnix 参考博客： 百度安全验证 别在问我跨域问题了，跨域详解以及前端、后端、运维解决的方法统统写在这里了。_星宇大前端-优快云博客_跨域前端解决还是后端解决 ...
js跨域解决方案
06-25
js跨域解决方案
umi-request的具体使用案例
热门推荐
weixin_38122772的博客
05-19 1万+
放上参考文档: https://github.com/umijs/umi-request request.ts文件 import { extend } from 'umi-request'; import { notification, message } from 'antd'; import _omit from 'lodash/omit'; const codeMessage = { 200: '服务器成功返回请求的数据。', 201: '新建或修改数据成功。', 202: '一个请求已
微前端umi + qiankun从搭建到部署的实践
Mine____的博客
07-01 4546
近期在项目中需要使用qiankun实现微前端的微服务化，分享记录一下搭建的过程以及遇到的问题 项目框架 整体为umi搭建的主应用，两个子应用均为create-react-app搭建，进入系统，菜单main为主应用页面，点击菜单sub-react切换第一个子应用，菜单sec-sub切换第二个子应用， 项目根目录下是主应用,child文件夹下为子应用sub-react，sec-sub，搭建后的初始目录结构如下： 主应用配置 非umi搭建主应用 主应用负责导航的渲染和登录态的下发，为子应用提供一个挂载的容器
umi搭建react+antd项目（四）axios请求数据
侞婼冇罪
11-13 5812
1.下载axios yarn add axios 2.在src下新建文件夹conf，再新增js文件：axiosConf.js import axios from 'axios' axios.defaults.baseURL = "http://localhost:8000/"//api前缀 const instance = axios.create({ xsrfCookieNa...
说说JSONP
yjclsx的博客
07-31 1020
原文地址：http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jQuery.html 一、前言： 说到AJAX就会不可避免的面临两个问题，第一个是AJAX以何种格式来交换数据？第二个是跨域的需求如何解决？这两个问题目前都有不同的解决方案，比如数据可以用自定义字符串、XML、JSON等等来描述，跨域可以通过服务器端代理（如...
JSONP原理及简单实现
10-22
JSONP（JSON with Padding）是一种解决跨域请求限制的方法。在Web2.0时代，AJAX是前端开发中不可或缺的技术，然而出于安全考虑，浏览器对跨域请求进行了限制。在同源策略的限制下，浏览器只允许与自己域内的服务器...
java中的JSONP使用实例详解
10-19
JSONP（JSON with Padding）是一种跨域数据交互协议，它利用了`<script>`标签可以跨域加载资源的特性来实现浏览器与服务器之间的数据通信。在JavaScript中，由于同源策略的限制，Ajax通常无法进行跨域请求，而JSONP...
VUE2.0中Jsonp的使用方法
10-18
在VUE2.0中使用JSONP是一种跨域数据请求的技术，它允许在不同的源之间共享数据，尤其是在浏览器端发起跨域请求时，JSONP（JSON with Padding）可以绕过浏览器同源策略的限制。这种技术的核心在于动态创建script元素...
Vue项目中使用jsonp抓取跨域数据的方法
10-16
在终端中运行`npm install jsonp`，这将安装一个名为`jsonp`的npm包，该包提供了JSONP的实现。 接下来，我们创建一个新的`jsonp.js`文件，在其中封装一个名为`jsonp`的函数。这个函数接收三个参数：`url`、`data`和...
UMI项目或者Ant Design Pro项目中如何实现跨域访问？
Believe980的博客
02-19 4119
UMI项目或者Ant Design Pro项目中如何实现跨域访问？ 在开发过程中，经常会遇到这样的问题：从某个项目中的页面，想要跳到另一个项目中的页面，那怎么办呢。首先我们来看一下何为跨域？ 跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。跨域的严格一点的定义是：只要 协议，域名，端口有任何一个的不同，就被当作是...
基于Umi搭建的个人Dva脚手架（二） - HTTP请求的封装
夕阳枫的博客
03-11 1509
1、基本概述   基于前后端分离的开发模式下，前端通过HTTP请求接口数据是前后端连接的纽带。HTTP协议中规定了GET、POST、PUT、DELETE等请求方式，在通常的业务开发中，最常用的请求方式是GET、POST。被我们熟知的是GET的参数会携带在URL上，POST请求的参数跟随HTTP请求的body传递，关于GET请求和POST的区别，可以自行研究。   在实际开发过程中，HTTP的Hea...
wordpress迁移到Hostinger
s11show_163的博客
05-27 341
Wordpress搬家很多同学还是比较喜欢使用All in one wp migration插件，确实快速方便，但是有个缺点就是免费版只能导入500M以内的网站文件，对于更大的文件就需要付费pro版本才可以导入。而Migrate Guru这款插件则是可以高速搬迁最大200GB的文件，且支持无流量限制的网站迁移，完美解决大站点的搬家难题。在将要迁移到的服务器添加新网站，例如hostinger添加新网站，hostinger仪表盘-websites-websites list。
WordPress搜索引擎优化的最佳重定向插件：进阶指南
web_geek的博客
05-29 814
在网站优化的过程中，选择合适的重定向插件是提升SEO表现的重要一步。本文介绍了几款适合进阶用户的WordPress重定向插件，它们在功能、易用性和安全性方面各有优势。无论你是希望全面优化SEO，还是有特定需求，这些插件都能帮助你更好地管理网站链接，提升在搜索引擎中的排名。
火柴INIBOX专业矿机登场，碾压现有Initverse挖矿设备
metatime的博客
05-27 439
若生态落地加速，INI流通性与价值有望同步提升，为矿友们带来更好的收益机会。可以看到，同样的功耗，类似的价格，火柴INIBOX的算力是高性能CPU的1100多倍，电费成本降低90%以上，矿友们会怎么选择不言而喻，可以遇见的是，火柴INIBOX会快速淘汰传统CPU挖矿设备，成为INIChain挖矿专用设备。火柴INIBOX：算力850 MH/S±5%，465W±5%，每瓦算力高达1.7Mh/s，显著优于行业平均标准，静音设计（噪音＜55分贝），体积仅196*165*125mm，完美适配家庭环境。
WordPress SureTriggers插件认证绕过漏洞(CVE-2025-3102)
最新发布
m0_50125527的博客
05-30 264
WordPress SureTriggers 是一款自动化工作流插件，专为简化网站任务而设计。它支持 WordPress 与 1000+ 应用（如 Slack、Google Sheets、Zapier）的无缝集成，通过直观的拖拽界面实现自动化触发和操作，例如自动发送邮件、更新数据库或同步社交媒体。该插件提供条件逻辑、延迟操作和多步骤流程，无需编程即可提升效率，适用于电商订单处理、表单提交响应等场景，是优化网站工作流的强大工具。
phpstudy(1) -- 记录
xflm的博客
05-27 572
记录一个小工具phpstudy
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值