题
我正在寻找可以代表加载图标的 xaml,就像 vista 那样。
视觉描述:
- 圆形(约1/3英寸宽)
- 较浅的蓝色
- 透明中心
- 凝胶按钮外观(圆形边缘带有一点阴影)
- 边缘周围有白色旋转器,可产生运动效果
浅(呃)天蓝色/凝胶包外观
我发现了旋转的矩形,我们可以创建 XAML 来提供旋转的幻觉,但我们只是绘制时钟的 12 个部分,并单独为每个部分设置动画。
解决方案
这是我在 SL 中创建的一个超级简单的微调器,您可以将其转换为 WPF。
<UserControl x:Class="Spinner.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<UserControl.Resources>
<Storyboard x:Name="Animiation" RepeatBehavior="Forever">
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0" Duration="0:0:.25" Storyboard.TargetName="e1" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.125" Duration="0:0:.25" Storyboard.TargetName="e2" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.25" Duration="0:0:.25" Storyboard.TargetName="e3" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.375" Duration="0:0:.25" Storyboard.TargetName="e4" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.5" Duration="0:0:.25" Storyboard.TargetName="e5" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.625" Duration="0:0:.25" Storyboard.TargetName="e6" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.75" Duration="0:0:.25" Storyboard.TargetName="e7" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.825" Duration="0:0:.25" Storyboard.TargetName="e8" Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Grid Width="100" Height="100" x:Name="gridSpinner">
<Ellipse x:Name="e1" Margin="40,80,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e2" Margin="12,68,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e3" Margin="0,40,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e4" Margin="12,12,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e5" Margin="40,0,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e6" Margin="68,12,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e7" Margin="80,40,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e8" Margin="68,68,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
</Grid>
</Grid>
</UserControl>
其他提示
它绝对必须是完整的 XAML 吗?对于这种效果,透明 PNG 效果非常好。只需将 PNG 堆叠在网格中,然后使用 RotateTransform 和 DoubleAnimation 对其中一些进行动画处理即可。
如果您的应用程序不需要缩放太多,那么这将是最简单的方法。
问候 劳伦
@Joeln,谢谢你,我能够将其转换为 WPF,并得到我需要的东西,谢谢。
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Triggers>
<EventTrigger RoutedEvent="Page.Loaded">
<BeginStoryboard Name="beginThis">
<Storyboard x:Name="Animiation" RepeatBehavior="Forever">
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0" Duration="0:0:.25" Storyboard.TargetName="e1" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.125" Duration="0:0:.25" Storyboard.TargetName="e2" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.25" Duration="0:0:.25" Storyboard.TargetName="e3" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.375" Duration="0:0:.25" Storyboard.TargetName="e4" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.5" Duration="0:0:.25" Storyboard.TargetName="e5" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.625" Duration="0:0:.25" Storyboard.TargetName="e6" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.75" Duration="0:0:.25" Storyboard.TargetName="e7" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.825" Duration="0:0:.25" Storyboard.TargetName="e8" Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Page.Triggers>
<Grid x:Name="LayoutRoot" Background="White">
<Grid Width="100" Height="100" x:Name="gridSpinner">
<Ellipse x:Name="e1" Margin="40,80,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e2" Margin="12,68,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e3" Margin="0,40,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e4" Margin="12,12,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e5" Margin="40,0,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e6" Margin="68,12,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e7" Margin="80,40,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e8" Margin="68,68,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
</Grid>
</Grid>
</Page>
不隶属于 StackOverflow