基本 WPF 切换按钮模板

Basic WPF ToggleButton Template

提问by MoonKnight

I require a toggle button that has not border when IsChecked = Falseand has a simple 1pt border of a certain color when IsChecked = True. I have the following style but my border when the button IsChecked = Trueis being set to Transparent(using Snoop to inspect)

我需要一个没有边框的切换按钮，IsChecked = False当IsChecked = True. 我有以下样式，但是当按钮IsChecked = True设置为我的边框时Transparent（使用 Snoop 进行检查）

<Style x:Key="InfoToggleButton"
         TargetType="{x:Type ToggleButton}">
    <Setter Property="Background" Value="#EEEEF2"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Border CornerRadius="0" 
                          BorderBrush="{TemplateBinding BorderBrush}"
                          BorderThickness="{TemplateBinding BorderThickness}">
                    <ContentPresenter x:Name="contentPresenter" 
                                            ContentTemplate="{TemplateBinding ContentTemplate}" 
                                            Content="{TemplateBinding Content}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="BorderBrush" Value="#007ACC"/>
                        <Setter Property="BorderThickness" Value="1"/>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="False">
                        <Setter Property="BorderBrush" Value="Transparent"/>
                        <Setter Property="BorderThickness" Value="0"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The button works and displays properly, but when I check/click it, the border does not get displayed.

该按钮可以正常工作并显示，但是当我检查/单击它时，边框不会显示。

I implement this style like

我实现了这种风格

<ToggleButton Grid.Column="0"
    Style="{StaticResource InfoToggleButton}" 
    IsChecked="{Binding IsDisplayingBetInfo, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
    Content="{Binding BetInfoIconSource}"/>

How can I get a simple toggle button with border?

如何获得带边框的简单切换按钮？

Thanks for your time.

谢谢你的时间。

回答by F????? A???

I've figured out the problem and the solution but don't exactly know why it happens.
Problem:Some value other than {x:Null}must be set as the content of the toggle button. Solution:However, a blank string can be set as the content.
My reasoning:When no content is set, the ContentPresenter is nulland thus cannot be clicked.

我已经弄清楚了问题和解决方案，但不完全知道为什么会发生。
问题：{x:Null}必须将某些值设置为切换按钮的内容以外的值。 解决方法：但是，可以设置一个空字符串作为内容。
我的推理：当没有设置内容时，ContentPresenter 为空，因此无法点击。

The problem can be solved by setting the default content to ""like this:

可以通过将默认内容设置为""这样来解决问题：

<Style x:Key="InfoToggleButton"
     TargetType="{x:Type ToggleButton}">
        <Setter Property="Background" Value="#EEEEF2"/>
        <Setter Property="Content" Value=""/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Border CornerRadius="0" 
                      BorderBrush="{TemplateBinding BorderBrush}"
                      BorderThickness="{TemplateBinding BorderThickness}">
                        <ContentPresenter x:Name="contentPresenter" 
                                        ContentTemplate="{TemplateBinding ContentTemplate}" 
                                        Content="{TemplateBinding Content}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="BorderBrush" Value="#007ACC"/>
                            <Setter Property="BorderThickness" Value="1"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="False">
                            <Setter Property="BorderBrush" Value="Transparent"/>
                            <Setter Property="BorderThickness" Value="0"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

回答by DavideDM

you have to assign a name at the Border tag like in this way

你必须像这样在 Border 标签上分配一个名字

<Border x:Name="MyBorderName"...

<Border x:Name="MyBorderName"...

then the you have to assign the TargetName at the property. Example

那么您必须在该属性上分配 TargetName。例子

<Setter TargetName="MyBorderName" Property="BorderBrush" Value="#007ACC"/>
<Setter TargetName="MyBorderName" Property="BorderThickness" Value="1"/>

Otherwise WPF does not know who to assign the Property BorderBrush and BorderThickness

否则 WPF 不知道给谁分配属性 BorderBrush 和 BorderThickness