WPF自定义模板--ToggleButton

默认格式

<Style x:Key="ToggleButtonStyle" 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" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 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>

解释

1. Border: 外部的边框，用于包裹ToggleButton的内容。其背景色、边框颜色和边框厚度都通过TemplateBinding绑定到ToggleButton的对应属性。
2. ContentPresenter: 用于显示按钮的内容，可以是文本或其他控件。它的对齐方式和间距通过TemplateBinding绑定到ToggleButton的对应属性。
3. Triggers: 触发器定义了当某些属性改变时的响应行为。在这里：

• • 当IsChecked属性为True时，设置边框的背景色为HighlightBrushKey，并设置前景色为HighlightTextBrushKey。
  • 当IsEnabled属性为False时，设置边框的背景色和边框颜色为灰色，并设置前景色为灰色。

自定义

<Style x:Key="ToggleButtonStyleDemo" TargetType="{x:Type ToggleButton}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual1}"/>
    <Setter Property="Background" Value="{StaticResource Button.Static.Background1}"/>
    <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border1}"/>
    <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="ToggleButton">
                <Border x:Name="border" BorderThickness="2" CornerRadius="5" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
                    <Grid>
                        <Ellipse x:Name="ellipse" Fill="Transparent" Margin="2"/>
                        <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True"/>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="border" Property="Background" Value="LightBlue"/>
                        <Setter TargetName="ellipse" Property="Fill" Value="Blue"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="border" Property="Background" Value="Gray"/>
                        <Setter TargetName="ellipse" Property="Fill" Value="DarkGray"/>
                        <Setter Property="Foreground" Value="LightGray"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

解释

1. Border: 包含了一个圆角（CornerRadius）和边框厚度（BorderThickness），从而改变ToggleButton的外观。
2. Grid: 使用Grid容器来包含一个Ellipse元素和一个ContentPresenter元素。
3. Ellipse: 一个椭圆形，用于装饰ToggleButton的外观。
4. ContentPresenter: 用于显示按钮的内容，可以是文本或其他控件。
5. Triggers: 增加了两个触发器：

• • 当IsChecked属性为True时，设置边框的背景色为浅蓝色（LightBlue），并设置椭圆形的填充颜色为蓝色（Blue）。
  • 当IsEnabled属性为False时，设置边框的背景色为灰色，椭圆形的填充颜色为深灰色（DarkGray），并设置前景色为浅灰色（LightGray）。

ToggleButton 和 CheckBox 模板可以互用