使用GeometryDrawing改造button显示的内容

最新推荐文章于 2023-11-16 11:02:14 发布

原创最新推荐文章于 2023-11-16 11:02:14 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#WPF #button #图片效果

WPF 专栏收录该内容

14 篇文章

订阅专栏

本文展示了如何利用WPF的GeometryDrawing为button定制图片效果，通过修改button样式并利用几何画图来实现独特的内容展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先来看下效果

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>