Silverlight 按钮样式卡在全屏上答案

【问题标题】：Silverlight Button Style gets stuck on fullscreenSilverlight 按钮样式卡在全屏上
【发布时间】：2010-12-26 21:28:25
【问题描述】：

所以我在 Silverlight 中有许多由图像制作的按钮。在每种情况下，按钮都有一个常规图像和一个悬停图像。我使用 Blend 让悬停图像在悬停时淡入超过 0.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"/>

【问题讨论】：

标签： silverlight templates styles

【解决方案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;
        }

【讨论】：