如何设计WPF ToggleButton的样式，如星形按钮

appbar_star

静态资源是从

开始切换按钮样式

<Style x:Key="StarToggleButtonStyle" TargetType="ToggleButton">
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="BorderBrush" Value="Black"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                      RecognizesAccessKey="True"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      Margin="{TemplateBinding Padding}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                </Border>
                <ControlTemplate.Triggers>

                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<ToggleButton cal:Message.Attach="Favorite($dataContext)" Width="15" Height="15" Style="{StaticResource StarToggleButtonStyle}" Margin="10,0,0,0">
                                                                    <Rectangle Width="10" Height="10" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ToggleButton}}}">
                                                                        <Rectangle.OpacityMask>
                                                                            <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_star}" />
                                                                        </Rectangle.OpacityMask>
                                                                    </Rectangle>
                                                                </ToggleButton>

用法

<Style x:Key="StarToggleButtonStyle" TargetType="ToggleButton">
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="BorderBrush" Value="Black"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                      RecognizesAccessKey="True"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      Margin="{TemplateBinding Padding}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                </Border>
                <ControlTemplate.Triggers>

                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<ToggleButton cal:Message.Attach="Favorite($dataContext)" Width="15" Height="15" Style="{StaticResource StarToggleButtonStyle}" Margin="10,0,0,0">
                                                                    <Rectangle Width="10" Height="10" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ToggleButton}}}">
                                                                        <Rectangle.OpacityMask>
                                                                            <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_star}" />
                                                                        </Rectangle.OpacityMask>
                                                                    </Rectangle>
                                                                </ToggleButton>

然而，以下是我从上述标记中得到的信息：

---

我希望边框沿着内容图标，而不是方形边框。如何做到这一点？

我采用了一种稍有不同的方法，从您列出的资源中抓取了带有路径的

画布，并在
Kaxaml
中使用自定义
ControlTemplate
（我想这是您所追求的行为）：



重要的一点是，我们使用
Path
上的
StrokeThickness
和
Stroke
属性来提供控件的轮廓；在选择按钮之前，
Fill
是透明的，然后在切换按钮时，触发器负责将
Fill
属性更改为黄色


分别切换和不切换。
或者用一个圆代替矩形。我不明白。。。矩形与任何东西有什么关系？现代图标中的图标大多是画布，因此我使用OpacityMask的矩形来放置图标，并使其成为ToggleButton的内容。我愿意接受建议。我可能不明白你在说什么。当您谈到“边框”时，我假设它来自您引用和讨论的矩形，可能还有它的任何默认样式。也许我很困惑。你是在追求视觉效果（轮廓），还是想让可点击区域跟随形状？我正在尝试创建一个星形按钮。就这样。如果我从StarToggleButtonStyle中删除
，我将得到一个星形按钮，因为我将按钮的内容设置为星形图标。问题是，如果没有选中ToggleButton，我希望星形是透明的，带有边框。选中ToggleButton时，我希望星形为黄色填充。我知道如何使用触发器，但我不知道如何显示恒星周围的边界。这太棒了。谢谢，但是我怎样才能绑定这个按钮的宽度/高度？它太大了，我试图用模板绑定
画布的宽度/高度，但不起作用。您必须将
宽度
/
高度
绑定更改为
宽度=“{TemplateBinding width}”
，
高度=“{TemplateBinding height}
。在
控制模板
中的
画布
/
路径
（我相信它只在
路径
上需要）。它不起作用。我所做的是将画布包装到
中，并对ViewBox的宽度/高度进行模板绑定。谢谢