状态被覆盖的问题 [英] Problem with states being over written

问题描述

我正在尝试制作一个简单的按钮模板。我首先添加一个按钮，然后选择Edit Control Template - Create Empty。对于自动添加的网格，我添加：

I am trying to make a simple button template. I begin by adding a button, then choosing Edit Control Template -- Create Empty. To the grid that is automatically added, I add:

1. 边框控件


2. 内容展示器（边框）


3. 一个Stack Panel（Content Presenter的子代）

我在堆栈中添加了一些其他内容小组，但它与我的问题无关。

I add some other stuff to the Stack Panel, but it is not relevant to my problem.

我现在想创建3个简单状态：Normal，Pressed和MouseOver。如果边界控制的BorderBrush，则为这些状态更改的唯一控件。我可以成功地将Border Brush设置为SolidColorBrush for Normal&按下状态（不同颜色），但是当我将它设置为MouseOver状态下的渐变画笔时，之前的画笔会被覆盖。这是一个已知的问题吗？有没有办法执行这个简单的任务？

I now want to create 3 simple states: Normal, Pressed, and MouseOver. The only control that is changed for these states if the BorderBrush of the Border Control. I can successfully set the Border Brush to a SolidColorBrush for the Normal & Pressed States (different colors), but when I set it to a Gradient Brush in the MouseOver state, the previous brushes get over-written. Is this a known problem? Is there any way to perform this simple task?

推荐答案

目前，如果不编辑XAML，则无法在Blend中执行此操作。更改"填充"的"笔刷"类型时，在设置动画时无法创建平滑过渡。 （因为Brush在Silverlight或WPF中不可动画）。您可以为不同类型画笔的Color元素设置动画。

MouseOver状态的XAML将如下所示。

Hi,

Currently you cannot do this in Blend without editing the XAML. When you change the Brush type for the Fill while animating it is not possible to create a smooth transition. (Since Brush is not animatable in Silverlight or WPF). You can animate the Color elements of different types of Brushes.

The XAML for the MouseOver state to do would look like this.

<vsm:VisualState x:Name="MouseOver">
	<Storyboard>
		<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="stackPanel" Storyboard.TargetProperty="(Panel.Background)">
			<DiscreteObjectKeyFrame KeyTime="00:00:00">
				<DiscreteObjectKeyFrame.Value>
					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
						<GradientStop Color="#FF000000"/>
						<GradientStop Color="#FFFFFFFF" Offset="1"/>
					</LinearGradientBrush>
				</DiscreteObjectKeyFrame.Value>
			</DiscreteObjectKeyFrame>
		</ObjectAnimationUsingKeyFrames>
	</Storyboard>
</vsm:VisualState>

按钮控制模板的XAML将如下所示。

The XAML for the Button ControlTemplate would then look like this.

<ControlTemplate x:Key="ButtonControlTemplate1" TargetType="Button">
	<Border BorderBrush="#FF000000" BorderThickness="1,1,1,1">
		<vsm:VisualStateManager.VisualStateGroups>
			<vsm:VisualStateGroup x:Name="CommonStates">
				<vsm:VisualState x:Name="MouseOver">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="stackPanel" Storyboard.TargetProperty="(Panel.Background)">
							<DiscreteObjectKeyFrame KeyTime="00:00:00">
								<DiscreteObjectKeyFrame.Value>
									<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
										<GradientStop Color="#FF000000"/>
										<GradientStop Color="#FFFFFFFF" Offset="1"/>
									</LinearGradientBrush>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</vsm:VisualState>
				<vsm:VisualState x:Name="Normal">
					<Storyboard>
						<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="stackPanel" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
							<EasingColorKeyFrame KeyTime="00:00:00" Value="#FF39FF00"/>
						</ColorAnimationUsingKeyFrames>
					</Storyboard>
				</vsm:VisualState>
				<vsm:VisualState x:Name="Pressed">
					<Storyboard>
						<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="stackPanel" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
							<EasingColorKeyFrame KeyTime="00:00:00" Value="#FFDEFF00"/>
						</ColorAnimationUsingKeyFrames>
					</Storyboard>
				</vsm:VisualState>
				<vsm:VisualState x:Name="Disabled"/>
			</vsm:VisualStateGroup>
				<vsm:VisualStateGroup x:Name="FocusStates">
				<vsm:VisualState x:Name="Unfocused"/>
				<vsm:VisualState x:Name="Focused"/>
			</vsm:VisualStateGroup>
		</vsm:VisualStateManager.VisualStateGroups>
		<ContentPresenter>
			<StackPanel x:Name="stackPanel" Background="#FFFF0000"/>
		</ContentPresenter>
	</Border>
</ControlTemplate>

由于我使用的是DiscreteObjectKeyFrame，因此从SolidColorBrush到GradientBrush的更改并不顺畅。你的情况可以吗？

如果你发现自己要求这种行为很多，即使它不能产生平滑的动画也很好。

感谢你反馈！

Since I am using a DiscreteObjectKeyFrame the change from the SolidColorBrush to the GradientBrush is not smooth. Is that okay for your scenario?

It would also be great to know if you find yourself requiring this behavior a lot even though it does not produce smooth animations.

Thanks for the feedback!

这篇关于状态被覆盖的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！