XAML用於旋轉，圓形圖像，透明中心

Question

我在尋找可以代表像vista一樣的加載圖標的xaml。

視覺描述：

• 圓形（在寬度約1/3英寸）
• 淡藍色顏色
• 透明中心
• 凝膠按鈕尋找（圓形邊緣wtih一點陰影）
• 圍繞邊緣的白色旋轉器，給予運動

light（er）sky blue/gel pack looking

我發現了旋轉矩形，我們可以創建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>