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

概述之前已经提出过这个问题,但在大多数情况下,这个问题不会超过2年前,而且往往是针对 WPF的.答案可能仍然是相同的,但在这里它.我正在尝试构建一个三角形(箭头)按钮,当鼠标悬停在其上时,该按钮会改变颜色并增大尺寸.我有一个按钮工作.但是现在我需要带箭头指向不同方向的按钮.我想尽可能多地重用代码.在不使用自定义按钮控件的情况下,我无法想到完全使用相同样式的方法,所以我试图通过将鼠标重新设置为动画来重用 之前已经提出过这个问题,但在大多数情况下,这个问题不会超过2年前,而且往往是针对 WPF的.答案可能仍然是相同的,但在这里它.我正在尝试构建一个三角形(箭头)按钮,当鼠标悬停在其上时,该按钮会改变颜色并增大尺寸.我有一个按钮工作.但是现在我需要带箭头指向不同方向的按钮.我想尽可能多地重用代码.在不使用自定义按钮控件的情况下,我无法想到完全使用相同样式的方法,所以我试图通过将鼠标重新设置为动画来重用动画.当我在我的按钮模板的visualstatemanager中将Storyboard引用为StaticResource时,它使我的按钮完全消失.为什么这不起作用？

<UserControlxmlns="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"/>        <@R_404_6004@Animation Duration="0:0:0.165" To="#FF9BD6FF" Storyboard.TargetProperty="(Shape.Fill).(GradIEntBrush.GradIEntStops)[1].(GradIEntStop.@R_404_6004@)" Storyboard.Targetname="polygon" d:IsOptimized="True"/>        <@R_404_6004@Animation Duration="0:0:0.165" To="#FF70ACDF" Storyboard.TargetProperty="(Shape.Fill).(GradIEntBrush.GradIEntStops)[0].(GradIEntStop.@R_404_6004@)" Storyboard.Targetname="polygon" d:IsOptimized="True"/>        <@R_404_6004@Animation Duration="0:0:0.165" To="#FF7DAEFF" Storyboard.TargetProperty="(Shape.stroke).(GradIEntBrush.GradIEntStops)[1].(GradIEntStop.@R_404_6004@)" Storyboard.Targetname="polygon" d:IsOptimized="True"/>        <@R_404_6004@Animation Duration="0:0:0.165" To="#FF2B5CB4" Storyboard.TargetProperty="(Shape.stroke).(GradIEntBrush.GradIEntStops)[0].(GradIEntStop.@R_404_6004@)" 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 @R_404_6004@="#FFA9A9A9"/>                                    <GradIEntStop @R_404_6004@="#FFD3D3D3" Offset="1"/>                                </linearGradIEntBrush>                            </polygon.Fill>                            <polygon.stroke>                                <linearGradIEntBrush EndPoint="0.5,1">                                    <GradIEntStop @R_404_6004@="#FF696969"/>                                    <GradIEntStop @R_404_6004@="#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"/>    <@R_404_6004@Animation Duration="0:0:0.165" To="#FF9BD6FF" Storyboard.TargetProperty="(Shape.Fill).(GradIEntBrush.GradIEntStops)[1].(GradIEntStop.@R_404_6004@)" Storyboard.Targetname="polygon" d:IsOptimized="True"/>    <@R_404_6004@Animation Duration="0:0:0.165" To="#FF70ACDF" Storyboard.TargetProperty="(Shape.Fill).(GradIEntBrush.GradIEntStops)[0].(GradIEntStop.@R_404_6004@)" Storyboard.Targetname="polygon" d:IsOptimized="True"/>    <@R_404_6004@Animation Duration="0:0:0.165" To="#FF7DAEFF" Storyboard.TargetProperty="(Shape.stroke).(GradIEntBrush.GradIEntStops)[1].(GradIEntStop.@R_404_6004@)" Storyboard.Targetname="polygon" d:IsOptimized="True"/>    <@R_404_6004@Animation Duration="0:0:0.165" To="#FF2B5CB4" Storyboard.TargetProperty="(Shape.stroke).(GradIEntBrush.GradIEntStops)[0].(GradIEntStop.@R_404_6004@)" 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,1">                                <GradIEntStop @R_404_6004@="#FFA9A9A9"/>                                <GradIEntStop @R_404_6004@="#FFD3D3D3" Offset="1"/>                            </linearGradIEntBrush>                        </polygon.Fill>                        <polygon.stroke>                            <linearGradIEntBrush EndPoint="0.5,1">                                <GradIEntStop @R_404_6004@="#FF696969"/>                                <GradIEntStop @R_404_6004@="#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,CultureInfo culture){throw new NotSupportedException();}}

总结

以上是内存溢出为你收集整理的xaml – 如何在Silverlight 5中使用VisualStateManager重用Storyboard全部内容，希望文章能够帮你解决xaml – 如何在Silverlight 5中使用VisualStateManager重用Storyboard所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。