使用GeometryDrawing改造button显示的内容

来源：互联网发布：推推棒淘宝店在哪里编辑：程序博客网时间：2024/06/02 03:35

先来看下效果

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>

0 0