[WPF] WPF で点滅するテキストを実装する

2017年4月17日

 かつてターミナルとかコンソールの時代は、テキストの装飾というと色指定か色反転 (=Inverse) か点滅かのいずれかしかなかったわけですが。

 HTML にしても XAML にしても、色指定は Foreground で、色反転相当は Background でなんとかなるわけですが、なぜか点滅が難易度高いんですよね… html はかつて netscape navigator とやらではイケたらしいですが…?

 ともかく、WPF XAML で点滅させる方法を考えてみました。以下はそのコード。

<StackPanel>
    <StackPanel.Resources>
        <!-- 点滅のためのストーリーボードの作成 -->
        <Storyboard x:Key="BlinkingStoryboard">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                           RepeatBehavior="Forever">
                <DiscreteDoubleKeyFrame KeyTime="0"
                                        Value="0" />
                <DiscreteDoubleKeyFrame KeyTime="0:0:0.5"
                                        Value="1" />
                <DiscreteDoubleKeyFrame KeyTime="0:0:2"
                                        Value="0" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <!-- 点滅のためのスタイルの作成 -->
        <Style TargetType="TextBlock"
               x:Key="BlinkingStyle">
            <Style.Triggers>
                <Trigger Property="IsEnabled"
                         Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard Storyboard="{StaticResource BlinkingStoryboard}"
                                         x:Name="BlinkingStoryboard1" />
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <StopStoryboard BeginStoryboardName="BlinkingStoryboard1" />
                    </Trigger.ExitActions>
                </Trigger>

            </Style.Triggers>
        </Style>

    </StackPanel.Resources>

    <!-- 点滅対象のテキスト -->
    <TextBlock x:Name="Text1"
               Text="点滅するテキスト"
               Style="{StaticResource BlinkingStyle}"
               IsEnabled="False" />

    <!-- 点滅/点灯を切り替えるためのボタン -->
    <StackPanel Orientation="Horizontal">
        <Button Content="点滅"
                Width="50"
                Click="StartBlinkingClick" />
        <Button Content="点灯"
                Width="50"
                Click="StopBlinkingClick" />
    </StackPanel>

</StackPanel>

 コードビハインド側はこんな感じ。

Private Sub StartBlinkingClick(sender As Object, e As RoutedEventArgs)
    Me.Text1.IsEnabled = True

End Sub

Private Sub StopBlinkingClick(sender As Object, e As RoutedEventArgs)
    Me.Text1.IsEnabled = False

End Sub

 やっていることは以下のような感じ。

  1. storyborad を使って、点滅のためのシーケンスを作ります。上記では UIElement の Opacity を 0.5 秒間 0% (=消去)、1.5 秒間 100% (=表示) することで点滅を表現しています。
  2. その storyborad を textblock の style に適用。上記では IsEnabled の True で storyborad を開始、False で停止しています。
  3. 上記 2 つは resources 内に記述し、それぞれ名前をつけます。(x:Key="BlinkingStoryboard", x:Key="BlinkingStyle")
    また、storyboard を停止するとき、開始した storyborad のインスタンスを指定しなくてはならないので、storyborad のインスタンスに名前をつけています。(x:Name="BlinkingStoryboard1")
  4. その後 textblock にこの style を適用します。(Style="{StaticResource BlinkingStyle}")
  5. あとは、Style を適用した Textblock の IsEnabled を操作すると、点灯と点滅が切り替わります。

 いや、IsEnabled に紐づけるのどうなん?という人は DataTrigger あたりを検討してみてください。
 あるいは Style を適用せず直接コードビハインドで操作したい、という場合は以下のコードを適用します。

Private _text1Blinking As Storyboard

Private Sub StartBlinkingClick(sender As Object, e As RoutedEventArgs)
    ' Stackpanel.Resources を記述している StackPanel に x:Name="rootPanel" を追記してから以下を実行
    _text1Blinking = CType(Me.rootPanel.Resources("BlinkingStoryboard"), Storyboard)
    _text1Blinking.Begin(Me.Text1, True)

End Sub

Private Sub StopBlinkingClick(sender As Object, e As RoutedEventArgs)
    _text1Blinking.Stop(Me.Text1)

End Sub






カテゴリー: Program, VB.NET, WPF, xaml

Follow comments via the RSS Feed | Leave a comment | Trackback URL

コメントを投稿する

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)


«   »
 
Powered by Wordpress and MySQL. Theme by Shlomi Noach, openark.org