在WPF中更改ToggleButton的自定义行为

Question

我是WPF的新手。

如何改变ToggleButton的行为方式？ 变成 并且具有黑色背景和无边框。 需要使用控件模板吗？

- Nakul Chaudhary

Answer 1

你需要修改控件模板或样式，以改变现有控件的外观和感觉。看一下这个示例，它与你的要求有些相似。我所做的是改变了 Chrome（Windows 的默认样式），并创建了带有边框和内容呈现器的自定义样式。然后我为样式创建了触发器。为了可视化，在鼠标悬停和选中事件中，我正在更改边框的背景颜色。

<Window.Resources>
    <Style x:Key="ToggleButtonStyle1" TargetType="{x:Type ToggleButton}">
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <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">
                        <ContentPresenter 
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                        RecognizesAccessKey="True" TextElement.Foreground="White" HorizontalAlignment="Center"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsKeyboardFocused" Value="true"/>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter Property="Background" TargetName="border" Value="#FF6C6C6C"/>
                            <Setter Property="CornerRadius" TargetName="border" Value="5"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="border" Value="#FF282828"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#ADADAD"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid x:Name="LayoutRoot">
    <ToggleButton HorizontalAlignment="Left" Margin="136,59,0,0" Style="{DynamicResource ToggleButtonStyle1}" VerticalAlignment="Top" Width="27" Height="24" Content="-" FontSize="21.333" FontWeight="Bold" HorizontalContentAlignment="Center" Padding="0" VerticalContentAlignment="Center" IsThreeState="True"/>
</Grid>

- Kishore Kumar

Answer 2

是的，您需要使用ControlTemplate来更改ToggleButton的外观。请查看ToggleButton页面以及这篇文章：通过创建ControlTemplate自定义现有控件的外观，以帮助您入门。

- Tim