按钮效果 [英] Button Effects
问题描述
我一直在制作一个自定义按钮，但是我遇到了相当大的困难。每当我在任何单一状态下更改填充或属性时，它都会更改它们。换句话说，当我为MouseOver状态更改椭圆的填充时，它也会将该填充应用于其他状态。我一直在观看有关创建自定义按钮的视频，我正在尝试按照他们的方式进行操作，但我没有运气。
I我们在 http://cid-eeb5461a76579756.skydrive.live上做了一个简短的演示。 com / self.aspx / Public / VSM.wmv
我看到MouseOver状态在XAML中没有动画。这是演示文稿生成的内容。
< UserControl
xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "
xmlns：x =" http://schemas.microsoft.com/winfx/2006/xaml "结果，X：类= QUOT; SilverlightApplication2.Page"结果，宽度=" ; 640"高度= QUOT; 480" xmlns：vsm =" clr-namespace：System.Windows; assembly = System.Windows">
< UserControl.Resources>
< Style x：Key =" ; ButtonStyle1" TargetType =" Button">
< Setter Property =" Background"值="＃FF1F3B53" />
< Setter Property =" Foreground"值="＃FF000000" />
< Setter Property =" Padding"值=" 3">
< Setter Property =" BorderThickness"值=" 1">
< Setter Property =" BorderBrush">
< Setter.Value>
< LinearGradientBrush EndPoint =" 0.5,1" StartPoint =" 0.5,0">
< GradientStop Color ="＃FFA3AEB9" Offset =" 0">
< GradientStop Color ="＃FF8399A9" Offset =" 0.375">
< GradientStop Color ="＃FF718597" Offset =" 0.375">
< GradientStop Color ="＃FF617584" Offset =" 1">
< / LinearGradientBrush>
< /Setter.Value>
< / Setter>
< Setter Property =" Template"> < BR>< Setter.Value>结果< ControlTemplate中的TargetType = QUOT;按钮和QUOT;>结果<网格和GT;结果< VSM：VisualStateManager.VisualStateGroups>结果< VSM：VisualStateGroup X： Name =" CommonStates">
< vsm：VisualState x：Name =" Normal" />
< vsm：VisualState x：Name =" MouseOver">
<故事板>
< ColorAnimationUsingKeyFrames BeginTime =" 00：00：00"持续时间=" 00：00：00.0010000" Storyboard.TargetName = QUOT;矩形" Storyboard.TargetProperty ="（Shape.Fill）。（SolidColorBrush.Color）">
< SplineColorKeyFrame KeyTime =" 00：00：00"值= QUOT;＃FFFF0000" />结果< / ColorAnimationUsingKeyFrames>结果< /故事板>结果< / VSM：的VisualState>结果< VSM：的VisualState X：名称= QUOT;压制">
<故事板>
< ColorAnimationUsingKeyFrames BeginTime =" 00：00：00"持续时间=" 00：00：00.0010000" Storyboard.TargetName = QUOT;矩形" Storyboard.TargetProperty ="（Shape.Fill）。（SolidColorBrush.Color）">
< SplineColorKeyFrame KeyTime =" 00：00：00"值= QUOT;＃FF06FF00" />结果< / ColorAnimationUsingKeyFrames>结果< /故事板>结果< / VSM：的VisualState>结果< VSM：的VisualState X：名称= QUOT;已禁用">
<故事板/>
< / vsm：VisualState>
< / vsm：VisualStateGroup>
< vsm：VisualStateGroup x：Name =" FocusStates"> ;
< vsm：VisualState x：Name =" Focused">
< Storyboard />
< / vsm：VisualState>
< vsm：VisualState x：Name = "Unfocused"/>
< / vsm：VisualStateGroup>
< / vsm：VisualStateManager.VisualStateGroups>
< Rectangle Fill =" #FFFFFFF"行程="＃FF000000" X：名称= QUOT;矩形" />结果< /网格>结果< /的ControlTemplate>结果< /Setter.Value>结果< /设置器>结果< / Style>
< /UserControl.Resources>
< Canvas x：Name =" LayoutRoot" Background =" White">
< Button Height =" 61" Style =" {StaticResource ButtonStyle1}"宽度= QUOT; 85" Canvas.Left = QUOT; 89" Canvas.Top = QUOT; 103"含量="按钮和QUOT; />结果< /画布>结果< /用户控件>
I have been working on a customized button for a while now, but am having considerable difficulty with it. Whenever I change a fill or property in any single state it changes them for all. In other words, when I change the fill of an ellipse for the MouseOver state it also applies that fill to the other states. I have been watching the videos on creating custom buttons and am trying to follow how they did it, but am having little luck.
I've put up a short demo at http://cid-eeb5461a76579756.skydrive.live.com/self.aspx/Public/VSM.wmv
I see the MouseOver state has no animation in you XAML. Here is the one produced by the demo.
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SilverlightApplication2.Page"
Width="640" Height="480" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"><UserControl.Resources>
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Background" Value="#FF1F3B53"/>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFF0000"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FF06FF00"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard/>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
<Storyboard/>
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Rectangle Fill="#FFFFFFFF" Stroke="#FF000000" x:Name="rectangle"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources><Canvas x:Name="LayoutRoot" Background="White">
<Button Height="61" Style="{StaticResource ButtonStyle1}" Width="85" Canvas.Left="89" Canvas.Top="103" Content="Button"/>
</Canvas>
</UserControl>
这篇关于按钮效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
