代码之家 › 专栏 › 技术社区 › geometrikal

如何在WPF中编辑完整的ToggleButton模板的副本?缺少某些触发器

wpf

geometrikal · 技术社区 · 6 年前

我对在VS2017中编辑WPF控制模板的正确方法感到困惑。

我想更改ToggleButton模板,以便选中该模板时,底角会出现一个勾号。

所以我创建了一个切换按钮,右键单击它,然后按“编辑模板”->编辑副本…导致代码如下:

但是,此代码缺少IsChecked的触发器!而且,它似乎定义了我想象的真实模板中系统中的颜色。

我在网上搜索到了 https://docs.microsoft.com/en-us/dotnet/framework/wpf/controls/togglebutton-syles-and-templates 但它似乎不正确,因为它是组合框的模板。

正确的模板是什么?

<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<Style x:Key="ToggleButtonStyle1" TargetType="{x:Type ToggleButton}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
    <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
    <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                    <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="Button.IsDefaulted" Value="true">
                        <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                        <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

2 回复 | 直到 6 年前

Andy 6 年前

在Visual Studio中。

选择XAML中的切换按钮。

查找属性>其他>模板

单击右边的小正方形

从上下文菜单中,选择“转换为新资源”。

在Win10上,您应该获得:

    <ControlTemplate x:Key="ToggleButtonControlTemplate1" TargetType="{x:Type ToggleButton}">
        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="Button.IsDefaulted" Value="True">
                <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" TargetName="border" Value="#FFBEE6FD"/>
                <Setter Property="BorderBrush" TargetName="border" Value="#FF3C7FB1"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="Background" TargetName="border" Value="#FFC4E5F6"/>
                <Setter Property="BorderBrush" TargetName="border" Value="#FF2C628B"/>
            </Trigger>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="Background" TargetName="border" Value="#FFBCDDEE"/>
                <Setter Property="BorderBrush" TargetName="border" Value="#FF245A83"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" TargetName="border" Value="#FFF4F4F4"/>
                <Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/>
                <Setter Property="Foreground" Value="#FF838383"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

Dean Chalk 6 年前

您拥有的模板是当前正确的模板,并且颜色设置正确。你必须明白 ToggleButton 自2006年以来一直保持不变,所以它的样式没有被优化,它的触发器也没有被替换 VisualStateManager 这是目前的标准。

标准的toggleButton在选中时不会更改其外观,这就是为什么模板中没有“is checked”属性的触发器,但是您可以像这样轻松地添加这些

<Trigger Property="IsChecked" Value="true">
    <Setter Property="Background" TargetName="border" 
            Value="Red"/>
    <Setter Property="BorderBrush" TargetName="border" 
            Value="Yellow"/>
    <Setter Property="TextElement.Foreground" 
            TargetName="contentPresenter" Value="Black"/>
</Trigger>

它并不能完全满足你的需求,这很容易实现,但能让你知道从哪里开始。