Question

所以我在Silverlight中有许多按钮，我是用图像制作的。在每种情况下，按钮都有一个常规图像和一个悬停图像。我已经使用Blend让悬停图像在悬停时超过.15秒。

问题在于我无法弄清楚如何访问图像，因为它们嵌入了样式中。因此，我为每个按钮设置了单独的样式，而不是单个UserControl，带有两个可互换的图像。

我还有一组两个按钮：FullScreen和ExitFullScreen。在这种情况下，悬停图像会卡住：

按全屏。退出全屏按钮现在位于不同的位置。
按全屏退出。全屏按钮又回到原始位置。即使鼠标未在按钮上，也会显示悬停动画。

代码： -

<Style x:Key="ExitFullScreenButton" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused"/>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="00:00:00.1500000" To="MouseOver"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed"/>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Image Source="Images/ControlBar/exitFullScreenButton.png"/>
                            <Image x:Name="image" Opacity="0" Source="Images/ControlBar/exitFullScreenButtonHover.png"/>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="" ToolTipService.ToolTip="Full Screen"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


<Button x:Name="ExitFullScreenButton" Click="ExitFullScreenButton_Click" Canvas.Top="14"
                  Style="{StaticResource ExitFullScreenButton}" 
                  Width="32" Content="Button" Visibility="Collapsed"/>

Answer 1

我最终只是制作用户控件并在代码中执行动画。

private Storyboard hoverAnimation = new Storyboard();

private void CreateAnimation()
        {
            SizeChanged += OnSizeChanged;

            Duration duration = new Duration(TimeSpan.FromMilliseconds(150));
            hoverAnimation.Duration = duration;

            DoubleAnimation animation = new DoubleAnimation();
            animation.Duration = duration;
            hoverAnimation.Children.Add(animation);

            Storyboard.SetTarget(animation, HoverIcon);
            Storyboard.SetTargetProperty(animation, new PropertyPath(Image.OpacityProperty));

            animation.To = 1;
        }

Silverlight按钮样式卡在全屏上

1 个答案: