使用GeometryDrawing改造button显示的内容

先来看下效果



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 button 图片效果
个人分类: WPF
上一篇C#管理员权限调用cmd以及以管理员身份生成程序
下一篇C#动态编译类
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭