スポンサーサイト

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

仕事には使いにくいアニメーション

 WPF4は、プレゼン用というコンセプトだけあって、アニメーション機能を持っている。いろんなコントロールに色々な効果を付けることができる。まあでも、仕事では、ほぼ使わない。正確には、デフォルトで動くアニメーション以外は使わない。
 Windows7上で動かすと、ボタンにしても、テキストにしても、微妙に変化する。背景色や境界線(ボーダー)が何かしら変化する。このアニメーション、作っていると楽しいんだけど、とにかくサクサク動かしたい(仕事したい)ユーザーにとっては、非常に「要らない子」だったりするわけで。付けた所で

要らないので、OFFにしてね(にっこり)

とか

なんでこんな動きするの?要るの?

ととなるのがオチであったりする(/_;)。仕事で使えない代わりにここにメモっておこう。
○スケールを変える。
目立つように。或いは押しやすいように。
<Window x:Class="ButtonGallery.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ButtonGallery" Height="300" Width="300">
<Grid>
<StackPanel VerticalAlignment="Top" Orientation="Horizontal">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="LayoutTransform">
<Setter.Value>
<ScaleTransform/>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleX"
To="1.5" Duration="0:0:0.25"/>
<DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY"
To="1.5" Duration="0:0:0.25"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleX"
To="1" Duration="0:0:0.25"/>
<DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY"
To="1" Duration="0:0:0.25"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</StackPanel.Resources>
<Button Content="Menu 1" Grid.Column="0"/>
<Button Content="Menu 2" Grid.Column="1"/>
<Button Content="Menu 3" Grid.Column="2"/>
</StackPanel>
</Grid>
</Window>
Style.TriggerにはEventTriggerを指定する。文字通りイベントをトリガーにするんだけど、トリガーにできるイベントがRoutedEventだけ。普通のイベントとの相違点の一つだったりする。普通のイベントにするか、RoutedEventにするかの判断基準にはなるかもしれない。
メモ:
・Mouse.Enterでサイズが1.5倍になり、Mouse.Leaveイベントで元に戻る。
・BeginStoryboardは、内部で定義されるStoryboradのまとめ役。
・Storyboard クラス 実際に動かすアニメーションを定義する。
・DoubleAnimationは、double型のプロパティに対するアニメーション。
・TargetPropertyは、Storyboardにも設定できる。今回は、アニメーション毎に対象のプロパティを違うために添付プロパティで設定されている。
・マウスが上にないとき
20131205_1
・マウスが上にあるとき
20131205_2
Mouse.Leaveに関するアニメーションを定義しておかないと、大きくなったまま戻らなかったりする。

○透明度
<Window x:Class="ButtonGallery.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ButtonGallery" Height="300" Width="300">
<Grid>
<StackPanel VerticalAlignment="Top" Orientation="Horizontal">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Opacity" Value="0.4"/>
<Style.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="1" Duration="0:0:0.25"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="0.4" Duration="0:0:0.25"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</StackPanel.Resources>
<Button Content="Menu 1" Grid.Column="0"/>
<Button Content="Menu 2" Grid.Column="1"/>
<Button Content="Menu 3" Grid.Column="2"/>
</StackPanel>
</Grid>
</Window>
・マウスが上にないとき
20131205_3
・あるとき
20131205_4
スポンサーサイト
当サイトは基本をすっ飛ばしてます。基本文法等は、@ITをどうぞ
カテゴリー: WPF4 | コメント: 0 | トラックバック: 0


この記事へのコメント

コメントの投稿

非公開コメント


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

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

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

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

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