代码之家  ›  专栏  ›  技术社区  ›  Mike Blandford

Silverlight按钮样式卡在全屏上

  •  0
  • Mike Blandford  · 技术社区  · 15 年前

    所以我在Silverlight中有一些按钮是用图片制作的。在每种情况下,按钮都有一个常规图像和一个悬停图像。我用Blend让悬停图像在悬停时淡入超过.15秒。

    问题是我再也无法理解如何访问这些图像,因为它们嵌入在样式中。 因此,我为每个按钮都有一个单独的样式,而不是一个带有两个可交换图像的用户控件。

    我还有一组两个按钮:全屏和退出全屏。在这种情况下,悬停图像会卡住:

    1. 按全屏。退出全屏按钮现在位于不同的位置。
    2. 按退出全屏。全屏按钮回到原来的位置。即使鼠标不在按钮上,也会显示悬停动画。

    代码:

    <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"/>
    
    1 回复  |  直到 15 年前
        1
  •  0
  •   Mike Blandford    15 年前

    最后我只做了一个用户控件,并用代码做了动画。

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