具有选中 + 按下状态的 WPF 切换按钮

本文关键字：WPF 按钮 状态 | 更新日期: 2023-09-27 18:34:39

我有一个 ToggleButton，它有一个标签。当它被选中时，标签文本会发生变化并变得更长，并且 FontSize 会变小：

<Style x:Key="MyToggleButtonStyle" TargetType="{x:Type ToggleButton}">
    <Setter Property="FontSize" Value="22" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Grid>
                    <Border Background="#FF0000"/>
                    <ContentPresenter x:Name="content"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="FontSize" Value="17" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<ToggleButton {StaticResource MyToggleButtonStyle}" Click="ToggleButton_Click">
    <TextBlock x:Name="ToggleButtonLabel" Text="Some Text"/>
</ToggleButton>

private void ToggleButton_Click(object sender, RoutedEventArgs e) {
    ToggleButtonLabel.Text = ((ToggleButton)sender).IsChecked == false ? "Some Text" : "Some Longer Text";
}

按钮还需要具有"已按下"状态，在该状态下，字体大小相对于其当前字体大小减小。换句话说，它应该像这样工作：

正常：字体大小 = 22

按下：字体大小 = 20

选中：字体大小 = 17

选中 + 按下：字体大小 = 15

我知道我可以轻松地将触发器用于 IsPressed 状态，但这也会将其更改为"已检查 + 按下"，这不是我想要的：

<Trigger Property="IsPressed" Value="True">
    <Setter Property="FontSize" Value="20" />
</Trigger>

那么，添加第四个视觉状态以组合"已检查 + 按下"的最简单、最干净的方法是什么？

具有选中 + 按下状态的 WPF 切换按钮

您可以通过多触发器轻松实现：

<Style x:Key="MyToggleButtonStyle" TargetType="{x:Type ToggleButton}">
    <Setter Property="FontSize" Value="22" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Grid>
                    <Border Background="#FF0000" />
                    <ContentPresenter x:Name="content" />
                </Grid>
                <ControlTemplate.Triggers>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsPressed"  Value="True" />
                            <Condition Property="IsChecked" Value="False" />
                        </MultiTrigger.Conditions>
                        <Setter Property="FontSize" Value="20" />
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsPressed" Value="False" />
                            <Condition Property="IsChecked" Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter Property="FontSize" Value="17" />
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsPressed" Value="True" />
                            <Condition Property="IsChecked" Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter Property="FontSize" Value="15" />
                    </MultiTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<ToggleButton Style="{StaticResource MyToggleButtonStyle}" Click="ToggleButton_Click">
    <TextBlock x:Name="ToggleButtonLabel" Text="Some Text" />
</ToggleButton>
相关文章：