[WPF] TextBlockの値変更時に点滅させる

2017年9月6日 propg C#, WPF, 0

TextBlockのTextを変更したときに、文字全体を点滅させます。

TextBlockにはTextChangedイベントがありません。
代わりに、Binding.TargetUpdatedイベントを使用することで同じような動きにできます。
ただし、このイベントは通常は発生しません。
発生させるためには、TextにBindするときにオプション指定が必要です。

Text="{Binding Message,NotifyOnTargetUpdated=True}"

こうすることで、バインドされた値が変更されたときに、TargetUpdatedイベントが発生します

あとはこのイベントが発生したときに、点滅させるアニメーションを実行すればOKです。

スタイルで定義しました

<!-- 点滅アニメーション -->
<Storyboard x:Key="BlinkStory">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="3x" AutoReverse="True">
        <LinearDoubleKeyFrame KeyTime="0" Value="1" />
        <LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="0" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

<!-- 値が変更されたときに点滅するスタイル -->
<Style TargetType="TextBlock" x:Key="BlinkStyle">
    <Style.Triggers>
        <EventTrigger RoutedEvent="Binding.TargetUpdated">
            <BeginStoryboard Storyboard="{StaticResource BlinkStory}"/>
        </EventTrigger>
    </Style.Triggers>
</Style>

UI定義

<TextBlock Text="{Binding Message,NotifyOnTargetUpdated=True}" Background="Pink" Style="{StaticResource BlinkStyle}"/>

Messageプロパティを変更すると点滅します

この例では、LinearDoubleKeyFrameを使用して、なめらかに点滅させています。
代わりに、DiscreteDoubleKeyFrameを指定すると、ON/OFFのようにチラチラと点滅します。

RepeatBehaviorに繰り返し回数を指定します。
RepeatBehavior=”Forever”にすれば永遠に点滅します。
KeyTimeを調整することで点滅する間隔を変更できます。

プログラムコードを全く書かなくても実装できてしまいます。
慣れればとっても簡単です

 

== ランキングに参加しています。ぜひクリックお願いします ==

[WPF] XAMLデザイナーがやたらエラーを出力するとき Excel2016 『テキストに合わせて図形のサイズを調整する』がつかえない