WPF 如何绘制不规则按钮,并且有效点击范围也是不规则的

最近在做一个东西,如地图,点击地图上的某一区域,这一区域需要填充成其他颜色。区域是不规则的,而且点击该区域的任一点,都能够变色。普通的按钮只是简单的加载一幅图肯定是不行的。查了很多资料,终于把它搞定了。实现方法不是原创,也是参照了网上的实现。

具体的思想:就是根据图片文件来画这个按钮,画出的按钮,形状正好是该图片的样子。

这里的图片是有要求的,背景必须是透明的PNG图片,而且该图片必须是建立了路径的。

样式实现:

<Style x:Key="ButtonStyle_Custom" TargetType="{x:Type Button}">
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type Button}">
						<Grid>
							<Path x:Name="形状_按钮" Data="F1M65,0C71.072,5.661 68.992,31.801 70,39 70.667,39.333 71.333,39.667 72,40 71.963,30 79.816,19.657 88,18 90.609,25.973 98.555,34.278 104,40 102.771,51.429 101.249,47.261 104,57 104.667,57.333 105.333,57.667 106,58 110.999,57.333 116,56.667 121,56 126.957,75.151 140.382,91.215 151,106 150.333,108.666 149.667,111.334 149,114 155.316,117.562 156.873,124.347 162,129 175.626,129.513 176.194,120.399 187,119 193.606,118.144 193.509,122.108 201,118 202.676,105.532 195.254,95.461 198,80 207.325,70.973 212.507,66.518 209,52 213.931,48.253 216.275,45.56 223,43 221.982,37.984 221.159,36.172 222,31 223.333,29.667 224.667,28.333 226,27 232.999,26.667 240.001,26.333 247,26 245.778,33.02 243.327,32.154 242,39 249.304,42.227 248.304,47.975 246,55 249.333,55.667 252.667,56.333 256,57 260,53.667 264,50.333 268,47 272.699,48.032 274.808,49.587 277,53 281.332,61.884 279.079,71.45 275,79 268.428,79.27 267.771,81.972 264,83 258.791,84.42 246.055,78.491 245,79 243.333,81 241.666,83 240,85 239.667,85 239.333,85 239,85 228.231,83.353 230.699,83.039 223,89 222.667,89.667 222.333,90.333 222,91 225.125,97.358 223.967,105.496 227,112 232.675,110.816 241.65,106.05 247,103 252.415,107.379 255.741,111.299 259,118 253.666,126.069 251.448,137.334 247,147 250.883,152.204 259.648,156.255 264,163 264.333,164 264.667,165 265,166 258.795,170.791 254.043,182.834 256,195 256.667,195.333 257.333,195.667 258,196 262.659,193.837 268.301,194.488 274,194 277.958,198.685 280.615,200.15 282,208 292.167,208.854 300.625,205.218 310,206 312.666,210 315.334,214 318,218 316.667,223.666 315.333,229.334 314,235 304.936,236.344 273.574,247.295 268,253 268,255.333 268,257.667 268,260 257.272,264.753 251.323,269.036 240,266 240,266.667 240,267.333 240,268 239.333,271 238.667,274 238,277 236.667,277.333 235.333,277.667 234,278 231.005,273.77 227.628,269.689 222,268 219.936,274.78 217.755,272.541 212,271 210.886,276.624 209.199,277.81 206,281 196.42,278.664 194.943,272.184 184,270 181,274 178,278 175,282 166.283,282.076 159.877,281.311 156,281 153.681,292.124 159.806,322.436 163,328 156.24,334.183 149.299,331.073 137,331 134.259,325.227 132.711,318.408 132,310 117.801,313.229 109.424,325.14 94,317 92.76,313.295 87.258,299.365 84,297 76.618,292.882 67.227,293.571 59,292 58.667,290.333 58.333,288.666 58,287 63.758,276.878 65.372,265.575 71,256 70,255 69,254 68,253 59.548,255.495 55.357,251.244 50,248 49.307,233.318 44.301,224.716 42,212 26.04,210.045 16.338,218.218 3,220 2,218.667 1,217.333 0,216 1.371,211.198 3.976,209.023 7,206 1.632,185.209 -1.563,197.009 8,177 10.61,171.538 7.794,167.038 11,163 14.216,158.95 18.886,162.372 22,158 25.753,152.731 22.584,149.691 28,146 31.103,147.148 30.972,147.407 34,147 37.763,136.924 60.637,89.05 43,71 38.447,73.391 37.75,74.175 33,72 28.555,58.704 22.982,41.774 37,34 37,34.667 37,35.333 37,36 38.333,38.333 39.667,40.667 41,43 43.666,42.333 46.334,41.667 49,41 49,40.667 49,40.333 49,40 45.742,30.05 46.139,23.935 47,13 52.156,11.131 54.007,10.915 58,11 58.54,3.039 60.727,3.642 65,0z" Stretch="Fill" RenderTransformOrigin="0.5,0.5">
								<Path.RenderTransform>
									<TransformGroup>
										<ScaleTransform/>
										<SkewTransform/>
										<RotateTransform/>
										<TranslateTransform/>
									</TransformGroup>
								</Path.RenderTransform>
								<Path.Effect>
									<DropShadowEffect ShadowDepth="0" BlurRadius="22" Color="#FF646464"/>
								</Path.Effect>
								<Path.Fill>
									<ImageBrush ImageSource="test1.png"/>
								</Path.Fill>
							</Path>
							<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content=""/>
						</Grid>
						<ControlTemplate.Triggers>
							<Trigger Property="IsFocused" Value="True"/>
							<Trigger Property="IsDefaulted" Value="True"/>
							<Trigger Property="IsMouseOver" Value="True">
								<Setter Property="RenderTransform" TargetName="形状_按钮">
									<Setter.Value>
										<TransformGroup>
											<ScaleTransform ScaleX="1.01" ScaleY="1.01"/>
											<SkewTransform/>
											<RotateTransform/>
											<TranslateTransform/>
										</TransformGroup>
									</Setter.Value>
								</Setter>
							</Trigger>
							<Trigger Property="IsFocused" Value="True">
                                <Setter Property="Fill" Value="#D0379F" TargetName="形状_按钮"/>
							</Trigger>
							<Trigger Property="IsEnabled" Value="False"/>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>

 添加按钮

<Grid x:Name="LayoutRoot">
        <Button Margin="56,43,0,0" Style="{DynamicResource ButtonStyle_Custom}" Height="128"
        HorizontalAlignment="Left" VerticalAlignment="Top" Width="144">button1</Button>
 </Grid>

点击前:

点击后:

可能有人会有这样的疑惑,为何我把上面的代码复制过来,把图片替换成自己的图片,为何不行呢,原因是上面的style的Path的Data是根据图片生成的,图片变了,Data也要变才行。Data是从哪里来的呢?

首先你的PNG图片背景必须是透明的,然后用PS工具打开该图片。

1、按住CTR键,点击图层,是图片处于选中状态

2、切换到路径面板,点击【从选区生成工作路径】

3、点击菜单栏上的【图层】--【矢量蒙版】--【当前路径】

3、点击【文件】--【存储为】psd文件。

4、用Blend工具导入该PSD文件,就可以看到Data的值了。

时间: 2024-10-13 23:03:17

WPF 如何绘制不规则按钮,并且有效点击范围也是不规则的的相关文章

【原】cocos2d-x开发笔记:获取Sprite上某一个点的透明度,制作不规则按钮

本篇文章主要讲一下怎么做一个不规则的按钮,比如如下图的八卦,点击绿色和点击红色部分,需要执行不同的事件 一般情况下,如果要检测某一个精灵是否被点中,做法如下 bool HelloWorld::ccTouchBegan(cocos2d::CCTouch* pTouch, cocos2d::CCEvent* pEvent) { CCSize sprSize = pSpr->getContentSize(); CCPoint point = pSpr->convertTouchToNodeSpace

iOS中防止两个按钮同时点击的方法

在iOS开发中通常会遇到,两个靠的很近的按钮,一不小心两个按钮同时点击了. 神奇的bug就产生了,如果两个按钮事件都是跳转页面的话,就会出现连跳两个页面的情况. 通常解决此问题的方法是:定义一个BaseViewController. 设置一个方法setExclusiveTouchForButtons:(UIView *)myView -(void)setExclusiveTouchForButtons:(UIView *)myView { for (UIView * v in [myView s

Android中按钮的点击事件的四种写法

如题,在Android中按钮的点击事件有四种写法,如下图. 界面为四个Button+一个TextView+一个ImageView activity_main布局文件如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="

ios开发-UI基础-应用管理(单纯界面)改进5-使用代理实现监听下载按钮的点击(delegate)

[注意]转载时请注明出处博客园-吃唐僧肉的小悟空http://www.cnblogs.com/hukezhu/ 前几篇文章介绍了一个应用管理的小应用,从最开始的单纯实现功能,一步一步就行改进\封装,上篇文章是使用xib进行了优化,本篇文章使用代理实现监听下载按钮的点击. 在原来的基础上,使用代理的主要思路分析: 首先要新建一个协议 声明协议的要实现的方法(一般为optional) 声明一个遵守该协议的代理的属性 使用代理,通知其代理完成操作 在代理中的实现步骤: 遵守协议 设置代理(一般通过拖线

在Activity中响应ListView内部按钮的点击事件

最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在Adapter中响应? 对于这个问题,我最初给他的解答是,在Adapter中定义一个回调接口,在Activity中实现该接口,从而实现对点击事件的响应. 下班后思考了一下,觉得有两种方式都能比较好的实现:使用接口回调和使用抽象类回调. 正好可以复习一下接口和抽象类的区别,于是写了两个Demo: 1.使用接口回调: Adapter类 1 package com.ivan.adapter; 2 3

(转载)在Activity中响应ListView内部按钮的点击事件

使用接口回调和使用抽象类回调. 1.使用接口回调: Adapter类 1 package com.ivan.adapter; 2 3 import java.util.List; 4 5 import android.content.Context; 6 import android.util.Log; 7 import android.view.LayoutInflater; 8 import android.view.View; 9 import android.view.View.OnCl

三种方式实现按钮的点击事件

在android中,实现按钮的点击事件,其中心是实现接口OnClickListener,并且绑定OnClickListener的实例. 在上述基础上,又细分为3种方式实现点击事件,分别是:1.匿名内部类实现接口OnClickListener:2.外部类实现接口OnClickListener:3.Activity类实现接口OnClickListener. 对应代码如下: MainActivity.java package com.example.administrator.test_hello_w

.net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器

1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.WebForm使用母版页进行登录时候的验证 //新建一个页面父类 public abstract class BasePage:Page { protected void Page_Load(object sender, EventArgs e) { //1.身份验证的方法 Session if (Se

[转] c# 模拟Asp.net页面中的某个按钮的点击,向web服务器发出请求

在没有做题目中所述的内容的时候,感觉这应该是很简单的东西,但是当真正开始做的时候却发现,有很多问题现在在这里写出来,供和我一样水平不高的参考一下. 在写本文之前参照了一下文章 欢迎使用CSDN论坛阅读器 : CSDN Reader(附全部源代码) 最新版本:20070212 http://www.cnblogs.com/feiyun0112/archive/2006/09/20/509783.html C#通过webRequest保持在同一Session中Post数据 http://blog.c