Shape.StrokeDashOffsetプロパティ

WPF

下記のblogで紹介されていたものです。

http://shevaspace.spaces.live.com/Blog/cns!FD9A0F1F8DD06954!554.entry



Line、Ellipse、Rectangleといったシェイプは、StrokeDashOffsetプロパティを持っています。このプロパティの値をアニメーションで変化させることで、点線の点が移動していくようなおもしろい表示を行うことができます。


たしかSDKのサンプルにあったかと思いますが、ここではこの方法を文字列に応用したものを紹介します。


XAML

<Grid Margin="30" x:Name="LayoutRoot">
  <Path x:Name="Path1" Stroke="Black"
    StrokeThickness="8" StrokeDashCap="Round"
    StrokeDashArray="{Binding Source={x:Static DashStyles.Dot}, Path=Dashes}"
    Loaded="Path1_Loaded">
    <Path.Triggers>
      <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
              To="20"
              Duration="0:0:5"
              RepeatBehavior="Forever"
              By="2"
              Storyboard.TargetProperty="StrokeDashOffset" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </Path.Triggers>
  </Path>
</Grid>


Visual Basic
Private Sub Path1_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
    Dim FormattedText1 As New FormattedText("��", System.Globalization.CultureInfo.CurrentCulture, _
        FlowDirection.LeftToRight, New Typeface(Me.FontFamily, Me.FontStyle, _
        Me.FontWeight, Me.FontStretch), 360, Brushes.Black)
    Path1.Data = FormattedText1.BuildGeometry(New System.Windows.Point(0, -70))
End Sub


FormattedTextクラスにあるBuildGeometryメソッドを使えば、文字列のGeometryを取得できます。あとはPathクラスのDataプロパティにその取得したGeometryを設定すればPathとして扱えますので、StrokeDashOffsetプロパティを利用したアニメーションが使えます。
スクリーンショットを撮ってもこのサンプルは動きがないとおもしろくありませんので、興味のある方は是非実際に実行して確認してみてください。