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";
}

该按钮还需要具有Pressed状态，其中FontSize相对于其当前FontSize减小。换句话说，它应该像这样工作：

正常：字体大小= 22

按下：字体大小= 20

已检查：字体大小= 17

已检查+已按下：字体大小= 15

我知道我可以轻松地使用IsPressed State的触发器，但这也会改变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>

带有Checked + Pressed State的WPF ToggleButton

1 个答案: