使用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;这方面也不是我的优势,幸好我有博客园,能记录一下学习的过程。在本记录中,为了更好的理解绘画与动画,多...
  • zhangjinyi
  • zhangjinyi
  • 2014年12月30日 20:38
  • 5112

wpf-DrawingBrush注意点

1.DrawingBrush是笔刷 :)2.用Drawing属性(Drawing类)来绘制区域3.GeometryDrawing(负责填充,它是笔,结合Geometry类抽象轮廊)用于绘制一个特定...
  • clingingboy
  • clingingboy
  • 2008年06月04日 15:06
  • 519

WPF学习(一)绘制图形的三种方法及区别

WPF中用于绘图的类主要有三个,分别是Shape类、Drawing类和DrawingVisual类,Shape类存在于System.Windows.Shapes命,而Drawing类和DrawingV...
  • lesshotyang
  • lesshotyang
  • 2013年03月02日 14:02
  • 2343

使用GeometryDrawing改造button显示的内容

先来看下效果 1.首先编辑button的style,使其应用GeometryDrawing来显示“图片”效果 ...
  • ff1990723
  • ff1990723
  • 2016年06月01日 16:06
  • 704

WPF DrawingVisual详解

代码如下:     public partial class MainWindow : Window     {         private DrawingVisual _drawingVisua...
  • wcc27857285
  • wcc27857285
  • 2016年09月19日 11:22
  • 993

Button按钮多行显示的实现方法

 Button按钮多行显示的实现方法一、VB中Button按钮多行显示的实现方法     先在记事本等文本文件中写上两行或多行文字,然后复制到Button按钮的Caption属性中即可。二、C#中Bu...
  • proglovercn
  • proglovercn
  • 2007年07月11日 17:08
  • 3610

Angular实现点击按钮后在上方显示输入内容

"en">   "UTF-8">   www.jb51.net Angular显示输入内容   "angular.min.js">        var myapp=angular.m...
  • y126_Info
  • y126_Info
  • 2018年01月08日 20:47
  • 72

在WPF中自定义你的绘制(二)

                                                   在WPF中自定义你的绘制(二)                                ...
  • zhouyinhui
  • zhouyinhui
  • 2007年07月17日 11:48
  • 549

WPF 自定义的图表(适用大量数据绘制)

在WPF中绘制图表比较简单,有很多的第三方控件,但是在绘制大量数据的时候,就显得有些吃力,即便是自己用StreamGeometry画也达不到理想的效果,要达到绘制大量数据而不会顿卡现象,只有一个途径,...
  • xiecailang
  • xiecailang
  • 2015年11月16日 16:26
  • 4828

android 根据button不同状态显示不同(背景)图片(background!!!!!)

网上的思路不错,我只做了基于xml的实现。先来贴一段网上的经典code: 这个文件放在drawable目录下面。命名为button_add_x.x...
  • lcfeng1982
  • lcfeng1982
  • 2011年10月21日 16:22
  • 4063
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用GeometryDrawing改造button显示的内容
举报原因:
原因补充:

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