Silverlight ToggleButton 检查 VisualState 不工作

Question

我正在尝试在 Silverlight 上的 ToggleButton 上设置 VisualStates 的样式。一切正常，除了 Checked 状态不支持 Rectangle.Fill 中的更改，但文本颜色更改工作正常，因此 Checked 被触发。

我希望 Checked 具有与 Pressed 相同的 VisualState，并且 Pressed 工作正常，但是当 ToggleButton 被按下并且状态随后被 Checked 时，Rectangle.Fill 恢复到开始状态，而不是我为 Checked 定义的状态状态。非常感谢任何帮助。

<UserControl.Resources>
        <Style x:Key="ToggleButtonStyle" TargetType="ToggleButton">
            <Setter Property="Background" Value="#FF1F3B53"/>
            <Setter Property="Foreground" Value="#FF000000"/>
            <Setter Property="Padding" Value="3"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFA3AEB9" Offset="0"/>
                        <GradientStop Color="#FF8399A9" Offset="0.375"/>
                        <GradientStop Color="#FF718597" Offset="0.375"/>
                        <GradientStop Color="#FF617584" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimation Duration="0" To="#E3E9F1" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
                                            <ColorAnimation Duration="0" To="#E3E9F1" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
                                            <ColorAnimation Duration="0" To="#C2C7D0" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
                                            <ColorAnimation Duration="0" To="#A8B0BB" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimation Duration="0" To="#FFD6DCE6" Storyboard.TargetProperty="Color" Storyboard.TargetName="scb"/>
                                            <ColorAnimation Duration="0" To="#FF0C6297" Storyboard.TargetProperty="Color" Storyboard.TargetName="dse"/>
                                            <ColorAnimation Duration="0" To="#0F72B0" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
                                            <ColorAnimation Duration="0" To="#127DC5" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
                                            <ColorAnimation Duration="0" To="#249CD5" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
                                            <ColorAnimation Duration="0" To="#2AAEEA" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled" />
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CheckStates">
                                    <VisualState x:Name="Checked">
                                        <Storyboard>
                                            <ColorAnimation Duration="0" To="#FFD6DCE6" Storyboard.TargetProperty="Color" Storyboard.TargetName="scb"/>
                                            <ColorAnimation Duration="0" To="#FF0C6297" Storyboard.TargetProperty="Color" Storyboard.TargetName="dse"/>
                                            <ColorAnimation Duration="0" To="#0F72B0" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
                                            <ColorAnimation Duration="0" To="#127DC5" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
                                            <ColorAnimation Duration="0" To="#249CD5" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
                                            <ColorAnimation Duration="0" To="#2AAEEA" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unchecked"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused"/>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <Rectangle x:Name="ThemesButton" Height="40" Stroke="#80858C" StrokeThickness="0.75" UseLayoutRounding="False" Width="174">
                                <Rectangle.Fill>
                                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                        <GradientStop Color="#E3E9F1" Offset="0"/>
                                        <GradientStop Color="#C2C7D0" Offset="0.09"/>
                                        <GradientStop Color="#A8B0BB" Offset="0.75"/>
                                        <GradientStop Color="#ABB2BC" Offset="1"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>

                            <TextBlock x:Name="ButtonText" TextWrapping="Wrap" Text="{TemplateBinding Content}" FontFamily="Calibri" FontSize="18.5" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center">
                                <TextBlock.Foreground>
                                    <SolidColorBrush Color="#FF555555" x:Name="scb" />
                                </TextBlock.Foreground>
                                <TextBlock.Effect>
                                    <DropShadowEffect BlurRadius="0" Color="#FFE6E6E6" ShadowDepth="1" x:Name="dse" />
                                </TextBlock.Effect>
                            </TextBlock>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <ToggleButton Style="{StaticResource ToggleButtonStyle}" Content="Test" />

Answer 1

实际上，样式是在变化的，但是当您将鼠标悬停在按钮上时，会在 Checked 动画之后触发 MouseOver 动画。您可以删除 MouseOver 动画以获得您想要的行为，但是当您将鼠标悬停在按钮上时样式不会改变。

使用 ToggleButton 您不能在 MouseOver 上拥有不同的样式，因为此状态属于常见状态。不过，您可以创建自己的控件来支持这一点。 This same question has already been asked here.

Answer 2

见my answer here 我认为您可以在风格上使用相同的方法。