Silverlight ToggleButton с изображениями

Question

Я пытаюсь создать стиль кнопки Silverlight Toggle, который бы переключался между знаком плюс и минус.К сожалению, это всегда показывает знак минус.Может кто-нибудь сказать мне, в чем проблема с этим стилем:

<Style x:Key="PlusMinusToggleButtonStyle" TargetType="ToggleButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Unchecked">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="UncheckedVisual" Storyboard.TargetProperty="Opacity" To="0" Duration="1" />
                                    <DoubleAnimation Storyboard.TargetName="CheckedVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Checked">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="UncheckedVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                    <DoubleAnimation Storyboard.TargetName="CheckedVisual" Storyboard.TargetProperty="Opacity" To="0" Duration="1" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid>
                        <Image x:Name="UncheckedVisual" Source="plus.png" Stretch="None" />
                        <Image x:Name="CheckedVisual" Source="minus.png" Stretch="None" />
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

Вам необходимо расширить DoubleAnimation, добавить анимацию KeyFrame.Также установите базовую непрозрачность на 0, а затем постепенно добавьте нужную вам.Например:

  <VisualState x:Name="Checked">
      <Storyboard>
           <DoubleAnimationUsingKeyFrames Storyboard.TargetName="CheckedVisual" Storyboard.TargetProperty="Opacity">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
       </Storyboard>
   </VisualState>

Каждый раз, когда состояние изменяется, оно возвращается к базовому состоянию, а затем к состоянию, которое было вызвано.Поскольку тумблер всегда находится во включенном или выключенном состоянии, он не будет находиться в невидимом состоянии.