XAML for Rotating、Round Image、Transparent Center

Question

vistaのように読み込みアイコンを表すことができるxamlを探しています。

視覚的説明：

• ラウンド（幅約1/3インチ）
• より明るい青色
• 透明中心
• ゲルボタンを探して（少し影wtih丸いエッジ）
• 動きを与えるために、エッジの周りに白いスピナー。

light（er）sky blue/gel pack looking

回転矩形が見つかりましたが、回転の錯覚を与えるXAMLを作成できますが、時計の12部分を描画し、それぞれをアニメートしています個別に

Answer 1

は、ここでは、WPFに変換することができ、私はSLで作成した、超簡単なスピナーです。

<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をGridに積み重ね、RotateTransformとDoubleAnimationを使ってPNGをアニメーション化するだけです。

アプリケーションがズームする必要がない場合は、トリックを行うのが最も簡単な方法です。

挨拶、 ローラン

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>