本文介绍了如何重用故事板与VisualStateManager在Silverlight 5的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这个问题已经出现，但在大多数情况下不超过2年前更近，往往具体到WPF有人问。答案可能仍然存在相同的，但在这里不言而喻。我试图建立一个三角形（箭头）按钮改变颜色和尺寸变大，当鼠标移动到它。我已经得到了一个按钮的工作，但现在我需要指向不同方向的箭头按钮。我想重新使用尽可能多的code尽可能的。如果不使用自定义按钮控制，我不能想办法完全使用相同的样式，所以我想通过使一个资源只是重用鼠标动画。当我引用故事板作为我的按钮模板VisualStateManager一个静态资源，它使我的按钮完全消失。为什么不这项工作？
This question has been asked before but in most cases no more recent than 2 years ago and often specific to WPF. The answer might still be there same, but here it goes. I'm trying to build a triangular (arrow) button that changes color and grows in size when the mouse is over it. I've got that working for a single button. But now I need buttons with the arrow pointing different directions. I want to reuse as much of the code as possible. Without using a custom button control, I couldn't think of a way to use the same style completely, so I'm trying to just reuse the mouse over animation by making it a resource. When I reference the Storyboard as a StaticResource in the VisualStateManager of my button template, it makes my button disappear completely. Why doesn't this work?
<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>
推荐答案
这听起来像是你应该介绍自己的按钮类。
我会做像这样：
This sounds like you should introduce your own Button class.I would do it like so:
<my:GlowingArrowButton ArrowDirection="Left"/>
和您的generic.xaml：
And your 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>
和code：
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
}
写的但未经检验：
Written but untested:
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();}
}
这篇关于如何重用故事板与VisualStateManager在Silverlight 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！