如何在 Silverlight 5 中使用 VisualStateManager 重用 Storyboard

2024-01-04

这个问题以前曾被问过,但在大多数情况下不超过 2 年前,并且通常特定于 WPF。答案可能还是一样,但就这样了。我正在尝试构建一个三角形(箭头)按钮,当鼠标悬停在其上方时,该按钮会改变颜色并增大尺寸。我已经用一个按钮实现了这一点。但现在我需要带有指向不同方向的箭头的按钮。我想重用尽可能多的代码。如果不使用自定义按钮控件,我无法想出一种完全使用相同样式的方法,因此我尝试通过将鼠标悬停动画作为资源来重用它。当我在按钮模板的 VisualStateManager 中将 Storyboard 引用为 StaticResource 时,它​​使我的按钮完全消失。为什么这不起作用?

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:System="clr-namespace:System;assembly=mscorlib" mc:Ignorable="d"
x:Class="SilverlightTest.MainPage"
Width="640" Height="480">
<UserControl.Resources>
    <Storyboard x:Key="ArrowMouseOver">
        <DoubleAnimation Duration="0:0:0.165" To="1.25" Storyboard.TargetProperty="(UiElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="polygon"/>
        <DoubleAnimation Duration="0:0:0.165" To="1.25" Storyboard.TargetProperty="(UiElement.RenderTransform).(ScaleTransform.ScaleY)" Storyboard.TargetName="polygon"/>
        <ColorAnimation Duration="0:0:0.165" To="#FF9BD6FF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="polygon" d:IsOptimized="True"/>
        <ColorAnimation Duration="0:0:0.165" To="#FF70ACDF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="polygon" d:IsOptimized="True"/>
        <ColorAnimation Duration="0:0:0.165" To="#FF7DAEFF" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="polygon" d:IsOptimized="True"/>
        <ColorAnimation Duration="0:0:0.165" To="#FF2B5CB4" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="polygon" d:IsOptimized="True"/>
    </Storyboard>

    <Style x:Key="LeftArrow" TargetType="Button">
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="grdRoot" RenderTransformOrigin="0.5,0.5">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition From="MouseOver" GeneratedDuration="0:0:0.165"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver" Storyboard="{StaticResource ArrowMouseOver}">
                                </VisualState>
                                <VisualState x:Name="Pressed"/>
                                <VisualState x:Name="Disabled"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Polygon x:Name="polygon" Grid.Row="0" Margin="1" StrokeThickness="{TemplateBinding BorderThickness}" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5">
                            <Polygon.Points>
                                <Point X="10"/>
                                <Point X="0" Y="5" />
                                <Point Y="10" X="10" />
                            </Polygon.Points>
                            <Polygon.RenderTransform>
                                <ScaleTransform />
                            </Polygon.RenderTransform>
                            <Polygon.Fill>
                                <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
                                    <GradientStop Color="#FFA9A9A9"/>
                                    <GradientStop Color="#FFD3D3D3" Offset="1"/>
                                </LinearGradientBrush>
                            </Polygon.Fill>
                            <Polygon.Stroke>
                                <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
                                    <GradientStop Color="#FF696969"/>
                                    <GradientStop Color="#FF939393" Offset="1"/>
                                </LinearGradientBrush>
                            </Polygon.Stroke>
                        </Polygon>
                        <ContentPresenter Grid.Row="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
    <Button Style="{StaticResource LeftArrow}" HorizontalAlignment="Left" VerticalAlignment="Top">
    </Button>
</Grid>

这听起来你应该介绍一下你自己的Button班级。 我会这样做:

<my:GlowingArrowButton ArrowDirection="Left"/>

还有你的 generic.xaml:

<Style TargetType="my:GlowingArrowButton">
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="my:GlowingArrowButton">
                <Grid x:Name="grdRoot" RenderTransformOrigin="0.5,0.5">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition From="MouseOver" GeneratedDuration="0:0:0.165"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver"
<Storyboard>
    <DoubleAnimation Duration="0:0:0.165" To="1.25" Storyboard.TargetProperty="(UiElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="polygon"/>
    <DoubleAnimation Duration="0:0:0.165" To="1.25" Storyboard.TargetProperty="(UiElement.RenderTransform).(ScaleTransform.ScaleY)" Storyboard.TargetName="polygon"/>
    <ColorAnimation Duration="0:0:0.165" To="#FF9BD6FF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="polygon" d:IsOptimized="True"/>
    <ColorAnimation Duration="0:0:0.165" To="#FF70ACDF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="polygon" d:IsOptimized="True"/>
    <ColorAnimation Duration="0:0:0.165" To="#FF7DAEFF" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="polygon" d:IsOptimized="True"/>
    <ColorAnimation Duration="0:0:0.165" To="#FF2B5CB4" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="polygon" d:IsOptimized="True"/>
</Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed"/>
                            <VisualState x:Name="Disabled"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>


                  <LayoutTransformer
                         LayoutTransform="{Binding Path=ArrowDirection,
                           RelativeSource={RelativeSource TemplatedParent},
                           Converter={StaticResource RotationTranslator_ToBeImplemented}}"
                         Grid.Row="0"
                         HorizontalAlignment="Center">
                    <Polygon
                        x:Name="polygon"

                        Margin="1"
                        StrokeThickness="{TemplateBinding BorderThickness}"

                        RenderTransformOrigin="0.5,0.5">
                        <Polygon.Points>
                            <Point X="10"/>
                            <Point X="0" Y="5" />
                            <Point Y="10" X="10" />
                        </Polygon.Points>
                        <Polygon.RenderTransform>
                            <ScaleTransform />
                        </Polygon.RenderTransform>
                        <Polygon.Fill>
                            <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
                                <GradientStop Color="#FFA9A9A9"/>
                                <GradientStop Color="#FFD3D3D3" Offset="1"/>
                            </LinearGradientBrush>
                        </Polygon.Fill>
                        <Polygon.Stroke>
                            <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
                                <GradientStop Color="#FF696969"/>
                                <GradientStop Color="#FF939393" Offset="1"/>
                            </LinearGradientBrush>
                        </Polygon.Stroke>
                    </Polygon>
                 </LayoutTransformer>


                    <ContentPresenter
                        Grid.Row="1"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

和代码:

public class GlowingArrowButton : ButtonBase
{
    public GlowingArrowButton()
    {
        DefaultStyleKey = typeof (GlowingArrowButton);
    }

    public ArrowDirection ArrowDirection
    {
        get { return (ArrowDirection) GetValue( ArrowDirectionProperty ); }
        set { SetValue( ArrowDirectionProperty, value ); }
    }

    public static readonly DependencyProperty ArrowDirectionProperty =
        DependencyProperty.Register( "ArrowDirection", typeof( ArrowDirection ), typeof( GlowingArrowButton ), new PropertyMetadata( default( ArrowDirection ) ) );
}

public enum ArrowDirection
{
    Left,
    Up,
    Right,
    Down
}

[编辑] 已编写但未经测试:

public class RotationTranslator : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var arrowDirection = (ArrowDirection) value;
        switch (arrowDirection)
        {
                case ArrowDirection.Left: return new RotateTransform{ Angle = 0 };

                case ArrowDirection.Up: return new RotateTransform { Angle = 90 };

                case ArrowDirection.Right: return new RotateTransform { Angle = 180 };

                case ArrowDirection.Down: return new RotateTransform { Angle = -90 };
        }
        throw new InvalidOperationException();
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture){throw new NotSupportedException();}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Silverlight 5 中使用 VisualStateManager 重用 Storyboard 的相关文章

  • 停止 CSS 动画但让其当前迭代完成

    我有以下 HTML div class rotate div 以及以下 CSS webkit keyframes rotate to webkit transform rotate 360deg rotate width 100px hei
  • WPF 中的图像变得模糊

    我正在使用 C 在 WPF 中开发应用程序 我将图像放入 WrapPanel 中 并在带有一个边框的网格内显示 并在按钮中使用图像 问题是我的图像控件失去了质量 我无法在这里发布我的图片 所以我只是在这里描述 I used SnapsToD
  • 我可以将 XAML/WPF 窗口复制到第二个窗口中,例如画中画电视吗?

    我有一个带有两个 XAML WPF 窗口 派生自 NavigationWindow 的应用程序 每个窗口都包含一个父 UserControl 其中放置了所有子控件 在其中一个窗口中 我想以画中画电视的方式显示第二个窗口的内容 实际上只是父
  • Silverlight/WPF 按钮上的 MouseOver 样式

    努力为鼠标悬停的按钮设置样式 我已经成功地设置了按钮的样式 纯红色 但我希望每当鼠标悬停时它都会更改为纯黑色 我是 XAML 新手 我可以看到它需要某种类型的故事板 动画 不确定具体如何执行此操作 任何帮助将不胜感激 这与 WPF 和 Si
  • 动画 D3 地球仪 (d3.geo.azimuthal)

    我对 d3 javascript 库有疑问 我想使用方位角 http mbostock github com d3 talk 20111018 azimuthal html地球 我想从地球上的经度和纬度坐标插入点 并使地球动画化 而无需使用
  • 如何在 Objective-C 的动画中使视图振动? [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我有一个名为 qShake 的 UIView 当用户犯错误时 我希望该视图在一个小空间内短时间内从左到右晃动 我将如何创建动画来做到这一点
  • 不透明动画在 IE 上不起作用

    我有一个动画菜单 其中包含一些级联不透明动画 这些动画在打开菜单和悬停每个按钮时执行 它只是每 100 毫秒向菜单上的每个图标添加 colorHigh 类 你可以看到一个现场演示在这里 http germanalvarez net 5 la
  • 由javascript创建的css动画[关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我试图在按下按钮时创建一个带有 css3 动画计时器的 div 继承人的代码 http jsfiddle net arcco96 y5nov
  • Xamarin.Forms:绑定到 XAML 中属性背后的代码

    在 Xamarin Forms 中 我想将属性后面的代码绑定到 XAML 中的标签 我找到了很多关于这个主题的答案和网页 但它们都涵盖了更复杂的场景 这是我的 XAML 页面
  • [UIView beginAnimations] 如何工作?

    我想知道 Cocoa Touch 中的动画是如何工作的 例如 UIView beginAnimations nil context nil UIView setAnimationDuration 1 0 view1 alpha 1 0 vi
  • 如何在 XAML 中根据窗口或屏幕大小设置网格列最大宽度

    我的窗口中有一个 3 列网格 第一列上有一个 GridSplitter 我想将第一列的 MaxWidth 设置为父窗口或页面的三分之一Width or ActualWidth 并且如果可能的话我更愿意在 XAML 中执行此操作 这是一些在
  • ObjectAnimator.setDuration 被忽略

    setDuration 函数ObjectAnimatorAndroid 中的 class 似乎被完全忽略了 无论我传递什么值 动画总是立即完成 ObjectAnimator ofFloat mView translationY 0 100
  • 使用 CSS3 在屏幕上移动图像

    我浏览网页已经有一段时间了 试图找到一种方法 让图标在加载页面时移动到屏幕上 从左侧移动到 body div 的中心 如何才能做到这一点 这是我到目前为止所拥有的 CSS3 a rotator text decoration none pa
  • 将可见性属性绑定到变量

    我有一个Border with Label里面一个Window
  • 高级 XAML 动画效果。脉冲、行进的蚂蚁、旋转。警报

    我有一个警报列表 当警报被激活时 要求使其更加引人注目 当警报状态发生变化时 我想在该项目周围创建脉冲外发光几秒钟 然后让它消失 我遇到的问题是我似乎无法仅在需要时才出现 DropShadowEffect 我尝试将不透明度设置为 0 将颜色
  • 按下按钮时更改几何绘图画笔的颜色

    我创建了一个按钮模板 有一个图像和一个标签 图像的来源位于 ResourceDictionary Pictures 中 图片的来源是具有白色画笔颜色的 DrawingImage
  • “alpha”动画期间奇怪的阴影行为

    让回收商与CardView项目 当屏幕打开时 我在回收器上启动 alpha 动画 recyclerView animate alpha 1f setStartDelay 300 start 回收项目
  • 如何为 EditText 的提示应用动画?

    我正在通过 java 更改 EditText 的提示editText setHint 当提示文本更改时 如何将过渡或动画应用于提示文本 我想做的是这样的 但是当我在java代码中更改它时提示文本https i stack imgur com
  • 我怎样才能将图像逐像素绘制到jframe

    我是java的初学者 直到今天我尝试做我自己认为的事情 所以这一天就在这里 我已经将图像的所有像素排列为 RGB 我想单击一个按钮并制作逐像素创建的类似动画的图像 这就是我所做的 但不起作用 import java awt BorderLa
  • WPF - 在样式中使用 ControlTemplate 资源

    创建样式时 是否可以将 ControlTemplate 属性设置为先前定义的资源 例如 如果我在 ResourceDictionary 中有以下内容

随机推荐