使用Dependency对象进行彩色动画WP8 [英] Using Dependency object for color animation WP8
问题描述
我在控件模板中使用了形状合适的按钮.我还在controlTemplate中添加了一个情节提要.故事板更改了我的controlTemplate中元素的边界.我从后面的代码访问并激活它，问题是当我在电话上执行此操作时出现了滞后.我在MVVM结构之后构造了代码，我的观点是:
I'm using a button where I've shaped it, in its ControlTemplate. I've also added a storyboard in the controlTemplate. The storyboard changes the boarder of the element in my controlTemplate. I access this from the code behind and activate it, the problem is when I do this on the phone there is a lag. I've structured my code after the MVVM structure, my view is:
<Button x:Name="Button1" BorderThickness="0" BorderBrush="Transparent">
<Button.Template>
<ControlTemplate x:Name="Control">
<Path x:Name="Control2" Style="{StaticResource style_ColorButton}" Data="{Binding Data}" Fill="{StaticResource Background}">
<Path.Resources>
<Storyboard x:Name="StoryBoard1">
<ColorAnimation Storyboard.TargetName="Control2" Storyboard.TargetProperty="(Stroke).(SolidColorBrush.Color)" To="Blue" Duration="0"/>
</Storyboard>
</Path.Resources>
</Path>
</ControlTemplate>
</Button.Template>
我是激活我的故事板的ViewModel的一部分:
And my the part of the ViewModel where I activate my storyboard:
foreach (UIElement x in ElementsAtPoint)
{
f = x as FrameworkElement;
if (f is Path)
{
try {
h = f as Path;
Storyboard sb = h.Resources["StoryBoard1"] as Storyboard;
sb.Begin();
}
catch
{
}
break;
}
}
我已阅读可以将Dependency对象用于动画，但是我不确定它是如何工作或是否会工作，但是尝试为动画实现依赖对象的任何帮助将不胜感激.
I've read that one can use Dependency object for the animation, but I'm not sure how it works or if it will work, but any help trying to implement dependency object for the animation would be appreciated.
推荐答案
我建议使用VisualStates做您要寻找的东西.我修改了按钮的样式，以将故事添加到MouseOver VisualState，然后将MouseEnter和MouseLeave的事件侦听器添加到按钮.当您触摸设备并在一个元素上拖动手指，然后再次将其拖动时，将触发这些事件.您可以修改下面的代码以检查是否拖动了某些内容.您还可以查看
I would recommend using VisualStates to do what you are looking for. I modified the Style of a button to add a story to the MouseOver VisualState, then added event listeners for MouseEnter and MouseLeave to the button. These events are fired when you touch the device, and drag your finger over an element, and then drag it off again. You could modify the code below to check if something is being dragged. You could also take a look at Drag/Drop functionality.
使用以下样式
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
<Setter Property="Padding" Value="10,5,10,6"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Orange"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
请注意，它具有MouseOver VisualState.然后分配样式并订阅事件处理程序
Notice it has a MouseOver VisualState. Then assign the style and subscribe to the event handlers
<Button Content="Drag over me" Style="{StaticResource ButtonStyle}" MouseEnter="OnButtonMouseEnter" MouseLeave="OnButtonMouseLeave"/>
然后在事件处理程序中更改视觉状态.
And in the event handler change the visual state.
private void OnButtonMouseEnter(object sender, MouseEventArgs e)
{
VisualStateManager.GoToState((Control)sender, "MouseOver", true);
}
private void OnButtonMouseLeave(object sender, MouseEventArgs e)
{
VisualStateManager.GoToState((Control)sender, "Normal", true);
}
这样，当您在按钮上点击并拖动手指时，它将变为橙色，带有白色文本.
With this, when you tap and drag your finger over the button, it will turn orange with white text.
这篇关于使用Dependency对象进行彩色动画WP8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
