我创建了一个类似于Chrome浏览器标签上看到的圆形处理动画...我希望在整个应用程序中使用它,因此决定将其作为资源...但是..我想知道在我的应用程序中轻松使用此动画资源的最佳方法/实践...下面是我处理动画的xaml代码。 它应该用作DataTemplate还是ControlTemplate?
<Grid>
<Grid.Resources>
<Storyboard x:Key="LoadingAnimation" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(c:Arc.EndAngle)" Storyboard.TargetName="arc">
<EasingDoubleKeyFrame KeyTime="0" Value="90"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-90"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="-270"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(c:Arc.StartAngle)" Storyboard.TargetName="arc">
<EasingDoubleKeyFrame KeyTime="0" Value="-90"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-270"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="-450"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<Grid.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource LoadingAnimation}"/>
</EventTrigger>
</Grid.Triggers>
<c:Arc x:Name="arcbackground" StartAngle="0" EndAngle="359.9" Stroke="#FFE0E0E0" StrokeThickness="8"/>
<c:Arc x:Name="arc" Stroke="{StaticResource BlueGradientBrush}" StrokeThickness="8"/>
答案 0 :(得分:1)
我几天前需要类似的东西。我将故事板和元素放在用户控件中进行动画处理。我添加了一个依赖属性,可以通过biding来启动/停止动画。剩下的就是在应用程序中的任何地方使用用户控件。
我的XAML看起来像这样:
<UserControl x:Class="MyAssembly.SpinningWait"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:core="clr-namespace:MyAssembly">
<UserControl.Resources>
<Storyboard x:Key="canvasAnimation">
<DoubleAnimationUsingKeyFrames
RepeatBehavior="Forever"
SpeedRatio="24"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)"
Storyboard.TargetName="canvas">
<DiscreteDoubleKeyFrame KeyTime="0:0:2" Value="45"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:4" Value="90"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:6" Value="135"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:8" Value="180"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:10" Value="225"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:12" Value="270"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:14" Value="315"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:16" Value="360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<core:RadialPanel x:Name="canvas" RenderTransformOrigin="0.5,0.5">
<core:RadialPanel.Resources>
<Style TargetType="Ellipse">
<Setter Property="Height" Value="6" />
<Setter Property="Width" Value="6" />
<Setter Property="Fill" Value="White" />
</Style>
</core:RadialPanel.Resources>
<core:RadialPanel.RenderTransform>
<TransformGroup>
<RotateTransform/>
</TransformGroup>
</core:RadialPanel.RenderTransform>
<Ellipse />
<Ellipse Opacity="0.1" />
<Ellipse Opacity="0.2" />
<Ellipse Opacity="0.3" />
<Ellipse Opacity="0.4" />
<Ellipse Opacity="0.5" />
<Ellipse Opacity="0.6" />
<Ellipse Opacity="0.7" />
</core:RadialPanel>
</UserControl>
它的代码隐藏:
public partial class SpinningWait : UserControl
{
private Storyboard _storyboard;
public SpinningWait()
{
InitializeComponent();
}
public bool IsWaiting
{
get { return (bool)GetValue(IsWaitingProperty); }
set { SetValue(IsWaitingProperty, value); }
}
public static readonly DependencyProperty IsWaitingProperty =
DependencyProperty.Register("IsWaiting", typeof(bool), typeof(SpinningWait), new UIPropertyMetadata(false, new PropertyChangedCallback(OnIsWaitingChanged)));
private static void OnIsWaitingChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
((SpinningWait)d).OnIsWaitingChanged((object)d, e);
}
private void OnIsWaitingChanged(object sender, DependencyPropertyChangedEventArgs e)
{
if (IsWaiting)
{
this.Visibility = Visibility.Visible;
this.StartAnimation();
}
else
{
this.Visibility = Visibility.Collapsed;
this.StopAnimation();
}
}
private void StartAnimation()
{
this._storyboard = (Storyboard)FindResource("canvasAnimation");
this._storyboard.Begin(canvas, true);
}
private void StopAnimation()
{
this._storyboard.Remove(canvas);
}
}