旋转，圆形图像，具有透明中心的XAML

Question

我正在寻找可以表示加载图标的xaml，就像vista所做的那样。

视觉描述：

color

• transparent
• 圆形(宽约1/3英寸)
• 淡蓝色
• 凝胶按钮寻找(圆角处有一点阴影)
• 白色旋转器的边缘，给出运动

<代码>F 211

浅蓝色/凝胶包色

我发现了旋转矩形，我们可以创建XAML，给人旋转的错觉，但我们只是画了12部分的时钟，并分别动画。

Answer 1

下面是我在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>

Answer 2

一定要是全XAML吗？对于这种效果，透明的PNG效果非常好。只需将PNG堆在一个网格中，并使用RotateTransform和DoubleAnimation动画其中一些。

如果您的应用程序不必放大太多，这将是最简单的方法。

你好，洛朗

Answer 3

@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>