带图像的 Silverlight ToggleButton答案

【问题标题】：Silverlight ToggleButton with images带图像的 Silverlight ToggleButton
【发布时间】：2011-03-09 13:34:39
【问题描述】：

我正在尝试创建一个可以在加号和减号之间切换的 Silverlight 切换按钮样式。不幸的是，它总是显示一个减号。谁能告诉我这种风格有什么问题：

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

【问题讨论】：

标签： silverlight visualstatemanager togglebutton

【解决方案1】：

你需要在DoubleAnimation上展开，在里面放入KeyFrame Animation。还将基本不透明度设置为 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>

每次更改状态时，它都会返回到基本状态，然后再返回被调用的状态。因为切换按钮始终处于打开或关闭状态，所以它不会处于不可见状态。

【讨论】：