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的值了。