かつてターミナルとかコンソールの時代は、テキストの装飾というと色指定か色反転 (=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
やっていることは以下のような感じ。
- storyborad を使って、点滅のためのシーケンスを作ります。上記では UIElement の Opacity を 0.5 秒間 0% (=消去)、1.5 秒間 100% (=表示) することで点滅を表現しています。
- その storyborad を textblock の style に適用。上記では IsEnabled の True で storyborad を開始、False で停止しています。
- 上記 2 つは resources 内に記述し、それぞれ名前をつけます。(x:Key="BlinkingStoryboard", x:Key="BlinkingStyle")
また、storyboard を停止するとき、開始した storyborad のインスタンスを指定しなくてはならないので、storyborad のインスタンスに名前をつけています。(x:Name="BlinkingStoryboard1") - その後 textblock にこの style を適用します。(Style="{StaticResource BlinkingStyle}")
- あとは、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