FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
当サイトは基本をすっ飛ばしてます。基本文法等は、@ITをどうぞ
カテゴリー: スポンサー広告

WPFでくるくる回してみたい(後編)

とりあえず回してみたかった前回。
仕事で使えるか?と聞かれたら、「使えない」と答えるレベルなんだよね。いや「使わない」かなぁ。業務用のアプリでアニメーションは邪魔だし。ま、いいか。
前回の問題として挙げた、「起動してから延々と」という部分に改良を加える。bool値の変化をトリガーとして開始、あるいは終了させてみたい。

〇Storyboardを外部Resourcesに出す。
できるだけ、すっきりさせたいし。
 <Storyboard x:Key="RotateSpinner">
<DoubleAnimation Storyboard.TargetProperty="(Image.RenderTransform).(RotateTransform.Angle)"
To="-360" Duration="0:0:3"
RepeatBehavior="Forever">
<DoubleAnimation.EasingFunction>
<PowerEase Power="5" EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
記述内容は、前回と変わり映えしない。

〇スタイル記述の変更
 かなり変わる。
<Image x:Name="LogingSpinnerImg"
Source="{StaticResource Spinner_Png}"
Width="150" Height="150" >
<Image.RenderTransform>
<RotateTransform CenterX="75" CenterY="75"/>
</Image.RenderTransform>
<Image.Resources>
<Style TargetType="Image">
<Setter Property="Visibility" Value="Hidden"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsChecked, ElementName=Switch}" Value="True">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
<Trigger Property="IsVisible" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource RotateSpinner}" x:Name="RotateSpinner" />
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsVisible" Value="False">
<Trigger.EnterActions>
<StopStoryboard BeginStoryboardName="RotateSpinner"/>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</Image.Resources>
</Image>
・チェックボックス(Name=Switch)の状態(IsChecked)で表示を切り替える。
・Imgaeが表示(IsVisible=True)になったら、アニメーション開始
・Imgaeが非表示(IsVisible=False)になったら、アニメーション停止
 停止させるStopStoryboardを指定できるよう、Nameを付ける。
これでアニメーションの開始と停止は制御できるようになったかな。

実行中の画面
20180810_2.png
上は延々と回る方で、下は、CheckBoxで制御できている方。何もしなければ、同じように回り続けるけど、CheckBoxの切り替えでタイミングをずらせている。
これを敢えて仕事で使うなら、このImageか、もう一つ上のコントロールをCustomControlとして実装し、AsyncDelegateCommandの開始時に表示、終了時に非表示にする、という感じかな。
スポンサーサイト
当サイトは基本をすっ飛ばしてます。基本文法等は、@ITをどうぞ
カテゴリー: WPF4 | コメント: 0 | トラックバック: 0


この記事へのコメント

コメントの投稿

非公開コメント


サイドバー背後固定表示サンプル

当ブログに書かれたソースコードは流用自由です。

バグ、スペルミス等はありうる事です。

ご利用の際は自己責任でお願いしますm(_ _)m

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。