WPF复杂形状按钮

方法很简单,将图片转换为<path>就可以了(需要用到Photoshop)

不过一般情况下制作按钮都不会用到这种方法,通常只要用image填充一张图片或者把路径转成按钮控件就可以了。

之所以这样做,是见到一位坛友提问说:如何根据PNG图片的形状来决定按钮的形状,大概意思可能就是只有在PNG

图像形状范围内触发器才有效,不过他说的我也没怎么听明白,呵呵。。。自己试着做了一下。目前就想到了这个方法,也许还有更好的方法!

点击打开下载链接

Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Path x:Name="形状_1" Data="M 32.9626,1.52588e-005C 64.8366,-1.05113 86.9761,13.3906 90.2887,40.0549C 121.366,22.922 167.447,36.5059 190.609,52.9298C 196.819,60.0817 203.031,67.2358 209.24,74.3877C 218.587,80.7901 229.685,81.6765 236.47,90.1236C 238.66,92.8495 248.286,130.997 249.369,135.901C 258.248,176.097 225.629,230.492 199.208,228.885C 210.609,245.719 247.47,243.846 260.834,260.357C 258.446,264.648 256.057,268.941 253.668,273.232C 254.624,273.232 255.579,273.232 256.535,273.232C 266.144,278.475 277.516,274.548 286.631,271.801C 286.631,278 286.631,284.2 286.631,290.398C 270.758,292.489 258.952,283.729 243.636,286.107C 231.045,288.061 212.93,298.373 196.342,291.829C 187.923,288.507 176.727,274.685 167.679,268.94C 169.112,257.974 170.545,247.004 171.978,236.038C 171.501,236.038 171.023,236.038 170.545,236.038C 158.23,240.139 147.846,241.445 150.481,257.496C 153.347,257.973 156.214,258.45 159.08,258.927C 157.574,270.027 155.171,292.206 163.38,301.843C 167.201,303.75 171.023,305.658 174.845,307.565C 178.188,315.194 181.533,322.825 184.877,330.453C 196.377,340.356 212.387,340.294 222.139,351.911C 148.1,351.911 74.0389,351.911 0,351.911C 2.38837,349.05 4.77742,346.189 7.16574,343.328C 26.8224,334.338 23.7874,310.676 37.262,296.12C 45.8601,298.028 54.4607,299.935 63.0588,301.843C 63.5364,300.412 64.0143,298.981 64.4919,297.551C 62.1036,285.154 59.7145,272.754 57.3262,260.357C 56.8485,260.357 56.3707,260.357 55.893,260.357C 55.893,267.986 55.893,275.617 55.893,283.246C 55.4153,283.246 54.9375,283.246 54.4599,283.246C 54.4599,282.292 54.4599,281.338 54.4599,280.385C 48.716,268.591 52.2378,254.85 53.0267,240.33C 42.9823,238.522 30.6873,236.171 25.7968,228.885C 20.3403,219.725 16.4283,166.867 14.3315,155.928C 25.3332,155.55 33.2694,151.907 37.262,144.484C 42.9325,134.876 41.5233,110.573 44.4278,98.7068C 43.4724,99.1836 42.5168,99.6605 41.5615,100.137C 36.665,114.747 29.8112,126.853 25.7968,144.484C 25.3191,144.484 24.8413,144.484 24.3636,144.484C 20.4211,118.72 25.9583,98.0166 34.3957,81.5404C 21.5746,91.6128 18.1252,106.513 10.0321,121.595C 9.55441,121.595 9.0766,121.595 8.59889,121.595C 8.59889,121.119 8.59889,120.642 8.59889,120.165C 18.9555,78.4881 36.1168,33.5594 88.8555,41.4855C 82.3319,4.01784 40.9382,1.40187 8.59889,12.8748C 9.55426,11.4444 10.5099,10.0137 11.4652,8.58327C 18.6303,5.72243 25.7975,2.86086 32.9626,1.52588e-005 Z " 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="图层 1.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="形状_1">
                                    <Setter.Value>
                                        <TransformGroup>
                                            <ScaleTransform ScaleX="1.01" ScaleY="1.01"/>
                                            <SkewTransform/>
                                            <RotateTransform/>
                                            <TranslateTransform/>
                                        </TransformGroup>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Effect" TargetName="形状_1">
                                    <Setter.Value>
                                        <DropShadowEffect BlurRadius="22" Color="Red" ShadowDepth="0"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False"/>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

转载:http://blog.csdn.net/cmis7645/article/details/7592372

时间: 2024-11-01 00:18:54

WPF复杂形状按钮的相关文章

WPF界面按钮美化

在App.xaml里加入全局按钮样式 <Application x:Class="WpfButton.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:WpfButton&quo

写自己的WPF样式 - 按钮

做一个后台管理小程序,据说WPF的界面比较"炫",于是选择使用WPF来开发.既然用了WPF当然需要做好看点了,于是稍微研究了下WPF的样式,废话不多说下面开始自定义一个按钮样式: (1)在App.xaml文件里自定义一个按钮样式 ,"MyWpfButton": <Application x:Class="WPFCustomerStyleStudy.App" xmlns="http://schemas.microsoft.com/w

wpf 自定义按钮

一  代码结构       如图所示,采用自定义控件(CustomControl)的方式对Button控件进行封装.其中ImageButton.xaml为默认控件模板,ImageButton.cs为控件的逻辑控制文件,其中包含了ImageButton控件所需要的新的依赖属性,包括图片源属性等. 二 模板代码 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x

WPF圆角按钮例程

<Window x:Class="WpfApp3.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

[01]可拖动、可调节大小、自定义按钮风格的无边框WPF程序

初学WPF,用VS2012写了一个可拖动.可调节大小.自定义按钮风格的无边框程序.效果如下: 实现过程:一.拖动.调节大小.无边框主要参考了: http://blog.csdn.net/dlangu0393/article/details/12548731 二.自己主要完成自定义按钮效果. 1.  WPF定义按钮风格方法 (1) 添加一个Resource Dictionary文件,如Style.xaml.例如: <ResourceDictionary xmlns="http://schem

WPF中DPI的问题

先搞清楚一下几个概念: DPI:dots  per  inch ,每英寸的点数.我们常说的鼠标DPI,是指鼠标移动一英寸的距离滑过的点数:打印DPI,每英寸的长度打印的点数:扫描DPI,每英寸扫描了多少个点.(更多请参考百度百科http://baike.baidu.com/view/49853.htm) 像素:pixel,picute和element的缩写.像素可以简单的理解为DPI里面的点.例如,显示器的分辨率为1024像素*768像素,就是说显示器的横向可显示1024个点(像素),纵向科研可

WPF快速入门系列(7)——深入解析WPF模板

一.引言 模板从字面意思理解是“具有一定规格的样板".在现实生活中,砖块都是方方正正的,那是因为制作砖块的模板是方方正正的,如果我们使模板为圆形的话,则制作出来的砖块就是圆形的,此时我们并不能说圆形的”砖块“不是砖块吧.因为形状只是它们的外观,其制作材料还是一样的.所以,模板可以理解为表现形式.WPF中的模板同样是表现形式的意思. 在WPF中包括三种模板:控件模板.数据模版和面板模板.它们都继承于FrameworkTemplate基类,其继承层次结果如下图所示: 从上图可以发现,Framewor

年度巨献-WPF项目开发过程中WPF小知识点汇总(原创+摘抄)

WPF中Style的使用 Styel在英文中解释为”样式“,在Web开发中,css为层叠样式表,自从.net3.0推出WPF以来,WPF也有样式一说,通过设置样式,使其WPF控件外观更加美化同时减少了大量的复杂属性的设置. 在WPF中,设置外观样式我们有很多种方式,比如通过设置控件的属性来控制控件的外观样式:或者通过在每一个控件中分别设置Style:或者通过在整个Window.Resource中设置Style,又或者在App.xaml的Application.Resource设置Style. 在

WPF学习笔记-用Expression Blend制作自定义按钮

1.从Blend工具箱中添加一个Button,按住shift,将尺寸调整为125*125; 2.右键点击此按钮,选择Edit control parts(template)>Edit a copy... 3.在弹出的Create style resource对话框中,修改新按钮样式的名称 4.在左侧的Object and timeline面板中选中ContentPresenter元素,按Ctrl+X将此标记临时保存到内存中 5.选中Chrome,按Delete键删除 6.选中Template,在