最近在做一個東西，如地圖，點擊地圖上的某一區域，這一區域需要填充成其他顏色。區域是不規則的，而且點擊該區域的任一點，都能夠變色。普通的按鈕只是簡單的加載一幅圖肯定是不行的。查了很多資料，終於把它搞定了。實現方法不是原創，也是參照了網上的實現。
具體的思想：就是根據圖片文件來畫這個按鈕，畫出的按鈕，形狀正好是該圖片的樣子。
這里的圖片是有要求的，背景必須是透明的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的值了。