Silverlight ToggleButton带图像

时间:2011-03-09 03:43:46

标签: silverlight visualstatemanager togglebutton

我正在尝试创建一个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>

1 个答案:

答案 0 :(得分:2)

你需要扩展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>

每次更改状态时,它都会返回基本状态,然后返回到被调用状态。因为togglebutton总是处于开启或关闭状态,所以它不会处于不可见状态。