具有选中 + 按下状态的 WPF ToggleButton

Question

我有一个 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 状态使用触发器，但这也会将其更改为 Checked + Pressed，这不是我想要的：

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

那么添加第四个视觉状态以组合 Checked + Pressed 的最简单、最干净的方法是什么？

Answer 1

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

<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>

具有选中 + 按下状态的 WPF ToggleButton

WPF ToggleButton with Checked + Pressed State

c#

wpf

xaml

visualstatemanager