方法 : クリップ領域をアニメーション化する

更新 : 2007 年 11 月

この例では、フレームワーク要素の Clip 領域をアニメーション化する方法を示します。次の例では、EllipseGeometry を使用して Image 要素に対する楕円のクリップ領域を定義します。PointAnimation は、楕円ジオメトリの Center プロパティを (0, 0) から (200, 150) までアニメーション化します。アニメーションは、イメージが読み込まれると再生を開始し、無制限に繰り返します。

使用例

<Image
  Source="sampleImages\Waterlilies.jpg" 
  Width="200" Height="150" HorizontalAlignment="Left">
  <Image.Clip>
    <EllipseGeometry x:Name="MyEllipseGeometry1"
      RadiusX="100"
      RadiusY="75"
      Center="100,75"/>
  </Image.Clip>
  <Image.Triggers>
    <EventTrigger RoutedEvent="Image.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <PointAnimation 
            Storyboard.TargetName="MyEllipseGeometry1" 
            Storyboard.TargetProperty="(EllipseGeometry.Center)"
            From="0,0" To="200,150" Duration="0:0:3" RepeatBehavior="Forever" 
            AutoReverse="True" />
          </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Image.Triggers>
</Image> 

サンプル全体については、「クリップ領域のサンプル」を参照してください。