Silverlight ToggleButton檢查VisualState不工作

Question

我想在Silverlight上的ToggleButton上設置VisualState樣式。一切正常，除了Checked狀態不符合Rectangle.Fill中的更改，但文本顏色更改工作正常，因此Checked被觸發。

我想檢查具有與Pressed相同的VisualState，並且Pressed工作正常，但是當按下ToggleButton並且狀態被Checked時，Rectangle.Fill將恢復到開始狀態，而不是我爲檢查狀態。任何幫助深表感謝。

<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

實際上，風格改變，但你擁有鼠標按鍵，鼠標懸停動畫在經過動畫後觸發。您可以刪除MouseOver動畫以獲得所需的行爲，但是當您將鼠標懸停在按鈕上時，樣式不會更改。

使用ToggleButton，MouseOver上不能有不同的樣式，因爲此狀態屬於常用狀態。不過，您可以創建自己的控件來支持此操作。 This same question has already been asked here。

Answer 2

請參閱my answer here 我認爲你可以在風格上使用相同的方法。