XAML 用于旋转、圆形图像，具有透明中心

Question

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

视觉描述：

• 圆形（约 1/3 英寸宽）
• 浅蓝色
• 透明中心
• 凝胶按钮外观（圆形边缘带有一点阴影）
• 边缘周围的白色微调器，以提供运动

浅（呃）天蓝色/凝胶包看起来

我发现了旋转的矩形，我们可以创建 XAML 来产生旋转的错觉，但我们只是绘制了时钟的 12 个部分，并分别为每个部分设置动画。

Answer 1

它必须是完整的 XAML 吗？对于这种效果，透明的 PNG 效果很好。只需将 PNG 堆叠在一个网格中，然后使用 RotateTransform 和 DoubleAnimation 为其中一些设置动画。

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

您好， 洛朗

Answer 2

这是我在 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 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>