使用GeometryDrawing改造button显示的内容

原创 2016年06月01日 16:06:48

先来看下效果



1.首先编辑button的style,使其应用GeometryDrawing来显示“图片”效果

        <Style TargetType="{x:Type Button}">
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="Foreground" Value="#FF0070A0" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="Bd"
                                Width="{Binding RelativeSource={RelativeSource Mode=Self},
                                                Path=ActualHeight}"
                                BorderBrush="{TemplateBinding Foreground}"
                                BorderThickness="0"
                                Tag="{TemplateBinding Content}">
                            <Border.Background>
                                <DrawingBrush Stretch="Fill">
                                    <DrawingBrush.Drawing>
                                        <GeometryDrawing Brush="{Binding ElementName=Bd, Path=BorderBrush}" Geometry="{Binding ElementName=Bd, Path=Tag}" />
                                    </DrawingBrush.Drawing>
                                </DrawingBrush>
                            </Border.Background>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Bd" Property="BorderBrush" Value="#FFFF5F7F" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="Bd" Property="BorderBrush" Value="#FFFFAF00" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

2.两个button实例,content属性是geometry画图

 <Grid Width="400" Height="200">
        <Button 
                Width="100"
                Height="100"
                Margin="10,0,10,10"
                HorizontalAlignment="Left"
                VerticalAlignment="Stretch"
                Content="F1 M 5,25L 30,25C 32.7614,25 35,27.24 35,30L 35,35L 80,35C 82.7614,35 85,37.24 85,40L 85,50L 96.5286,50C 99.29,50 100.844,52.2386 100,55L 87.77,95C 86.93,97.76 84,100 81.24,100L 80,100L 5,100L 4.24,100C 2.4,100 1,99 0.68,97.52C 0.25,96.78 0,95.92 0,95L 0,30C 0,27.24 2.24,25 5,25 Z M 12.1176,32.5C 9.84,32.5 8,34.29 8,36.5L 8,71.3543L 13,55C 13.8442,52.24 16.7672,50 19.53,50L 77,50L 77,47C 77,44.8 75.16,43 72.88,43L 27.19,43L 27.19,36.5C 27.1902,34.2909 25.35,32.5 23.1,32.5L 12.1176,32.5 Z M 80,27.5L 70,27.5L 70,15L 60,15L 75,0L 90,15L 80,15L 80,27.5 Z" />
        <Button 
                Width="100"
                Height="100"
                Margin="10,0,10,10"
                HorizontalAlignment="Right"
                VerticalAlignment="Stretch"
                Click="BtnImage_Click"
                Content="F0 M 56.92,49.95C 61.1,44.7 63.6,38.12 63.6,30.98C 63.6,13.9 49.32,0 31.79,0 14.26,0 0,13.9 0,30.98C 0,48.1 14.26,61.96 31.79,61.96C 38.04,61.96 43.88,60.2 48.8,57.15L 55.71,63.9C 55.12,65 54.8,66.3 54.8,67.62C 54.8,69.83 55.68,71.9 57.28,73.46L 82,97.58C 83.64,99.14 85.77,100 88,100C 90.3,100 92.42,99.14 94,97.58L 97.52,94.17C 99.12,92.61 100,90.54 100,88.34C 100,86.13 99.12,84.1 97.52,82.5L 72.76,58.38C 71.16,56.82 69,56 66.77,56C 65.7,56 64.65,56.15 63.67,56.53L 56.92,50 Z M 7.9,31C 7.9,43.84 18.6,54.26 31.8,54.26C 45,54.26 55.68,43.84 55.68,31C 55.68,18.12 45,7.7 31.8,7.7C 18.6,7.7 7.9,18.12 7.91,31 Z M 31.8,16.6C 21.86,16.6 13.68,23.875 12.52,33.26C 12.43,32.51 12.37,31.75 12.37,31C 12.37,20.53 21.1,12.1 31.8,12.1C 42.52,12.1 51.22,20.53 51.22,31C 51.22,31.75 51.16,32.51 51.1,33.26C 50,23.875 41.73,16.6 31.79,16.6 Z" />
    </Grid>


相关文章推荐

WPF-画刷、绘图、几何绘图、图形的效果与滤镜、图形变换和动画

本篇将记录一下如何在WPF中绘画和设计动画,这方面一直都不是VS的强项,然而它有一套利器Blend;这方面也不是我的优势,幸好我有博客园,能记录一下学习的过程。在本记录中,为了更好的理解绘画与动画,多...

canvas之图形的变化(平移,缩放,旋转)

1、保存与恢复canvas状态 ctx.save();暂时将当前的状态保存到堆中 ctx.restore();该方法用于将上一个保存的状态从堆中再次取出,恢复该状态的所有设置。 ...

WPF之路——Canvas布局(画布)

Canvas为容器控件,用于定位 1.基本应用 可以把Canvas比作一个坐标系,所有的元素通过设置坐标来决定其在坐标系中的位置.这个坐标系的原点并不是在中央,而是位于它的左上角.见下图 元素设...

hidden.html button隐藏和显示内容

  • 2015年04月09日 18:45
  • 2KB
  • 下载

Android Studio使用Button等控件的英文内容字符串默认大写

在Android Studio中xml里面添加一个Button、EditText等控件后,内容为英文时候,总是会显示大写,即使你输入的字符串是小写也不行 View中控制字符串大小写的属性是 andr...

React.js初探-如何将一个普通button改造成类React组件

React.js初探 React.js目的在于提高前端组件的复用性,下面以一个常见的例子来解释一下。 小明是一个前端程序员,有一天老板叫小明实现一个功能,功能描述如下:一个按钮有两个状态,分...

jquery的Flexigrid改造,支持选中行内容获取,两个表格行相互移动,行选中事件,支持dwr

在flexigrid中增加了 $.fn.flexGetRows = function () { // function to add data to grid danielinbiti retur...

iOS_UIButton 实现button的内容左对齐以及图片和标题中间的间隔

要实现一个类似折叠效果的按钮  不多说 直接上代码和效果 - (void)createButton { UIButton *button = [[UIButton alloc]initWi...

Android自定义组合控件--EditText和Button组合成带有清空EditText内容功能的复合控件

目标:实现textview和ImageButton组合,可以通过Xml设置自定义控件的属性。        通过代码或者通过xml设置自定义控件的属性...

Java GUI Button组件上的内容中文乱码问题

1、在按照疯狂java讲义敲代码时,遇到一个问题。在GUI那一块,书上代码是这样的 而我实际操作的时候,在myeclipse里,运行得到的结果是 标题上的中文能正常显示,按钮上的中文却是方框,出现...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用GeometryDrawing改造button显示的内容
举报原因:
原因补充:

(最多只允许输入30个字)