使用ObjectAnimator根据CheckState更改切换按钮的图像

时间:2011-04-13 10:34:32

标签: silverlight silverlight-4.0

我有下面的代码,它应该在检查ToggleButton时更改图像,但遗憾的是它什么也没做。有什么想法吗?

<Style x:Key="CustomButton" TargetType="ToggleButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid>
                        <Ellipse HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="CheckedImage" Visibility="Collapsed" >
                                <Ellipse.Fill>
                                    <ImageBrush ImageSource="Checked.png" Stretch="UniformToFill"></ImageBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <Ellipse HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="UnCheckedImage" Visibility="Collapsed">
                                <Ellipse.Fill>
                                    <ImageBrush ImageSource="UnChecked.png" Stretch="UniformToFill"></ImageBrush>
                                </Ellipse.Fill>
                        </Ellipse>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckedImage" Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="UnChecked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UnCheckedImage" Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Cursor" Value="Hand" />
    </Style>

2 个答案:

答案 0 :(得分:0)

尝试将DiscreteObjectKeyFrame更改为: -

  <DiscreteObjectKeyFrame KeyTime="0:0:0">
    <DiscreteObjectKeyFrame.Value>
      <Visibility>Collapsed</Visibility>
    </DiscreteObjectKeyFrame.Value>
  </DiscreteObjectKeyFrame>

我发现密钥时间不使用时间跨度格式时解析器失败。此外,XamlParser不知道值是Visibility类型,因此您需要明确。

答案 1 :(得分:0)

为您编辑:

<Style x:Key="CustomButton" TargetType="ToggleButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="CheckedImage">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="UnCheckedImage">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="UnChecked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="CheckedImage">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="UnCheckedImage">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked"/>
                                <VisualState x:Name="Indeterminate"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CommonStates" ei:ExtendedVisualStateManager.UseFluidLayout="True">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed"/>
                                <VisualState x:Name="Disabled"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <VisualStateManager.CustomVisualStateManager>
                            <ei:ExtendedVisualStateManager/>
                        </VisualStateManager.CustomVisualStateManager>
                        <Ellipse HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="CheckedImage" Visibility="Collapsed" >
                                <Ellipse.Fill>
                                    <ImageBrush ImageSource="Checked.png" Stretch="UniformToFill"/>
                                </Ellipse.Fill>
                            </Ellipse>
                            <Ellipse HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="UnCheckedImage">
                                <Ellipse.Fill>
                                    <ImageBrush ImageSource="UnChecked.png" Stretch="UniformToFill"/>
                                </Ellipse.Fill>
                        </Ellipse>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Cursor" Value="Hand" />
    </Style>