全体表示

[ リスト ]

Silverlightでは、WPFのTriggerが使えない。
代わりにVisualStateManagerというのが使えるようだ。

VisualStateという、コントロールの状態を複数定義してグループ化し、
VisualStateごとにStoryboardでアニメーションさせることができる。

イメージはこんな感じ。

<VisualStateGroup>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
</VisualStateGroup>

既存のコントロールには、既存のTemplateVisualStateを持っているものもある。
既存のTemplateVisualStateを使うには、ControlTemplateを使う必要があるようだ。
とはいえ、コードなしでStoryboardを動かせるところが面白い。

既存のTemplateVisualState例

ButtonとTextBoxのTemplateVisualStateを調べてみた。

ButtonのTemplateVisualState

VisualStateGroup VisualState
CommonStates Normal
CommonStates MouseOver
CommonStates Pressed
CommonStates Disabled
FocusStates Unfocused
FocusStates Focused

CheckBoxのTemplateVisualState

Buttonに加えて、以下のTemplateVisualStateを持つ
VisualStateGroup VisualState
CheckStates Unchecked
CheckStates Checked
CheckStates Indeterminate

TextBoxのTemplateVisualState

VisualStateGroup VisualState
CommonStates Normal
CommonStates MouseOver
CommonStates ReadOnly
CommonStates Disabled
FocusStates Unfocused
FocusStates Focused

ボタンのVisualStateManager使用例

ホバーやクリック時に、ボタンの色を変えています。
コード一切なしでやっています。


VisualStateManager.VisualStateGroupsという添付プロパティにVisualStateGroupを入れます。
Borderには添付できないので、Gridを使っています。

<Button Margin="20" Width="80" VerticalAlignment="Top" Content="ボタン">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<!-- 通常 -->
<VisualState x:Name="Normal"/>

<!-- マウスが乗っかった時 -->
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="buttonBorder"
Storyboard.TargetProperty="(Border.Background).(SolidBrush.Color)"
Duration="0:0:0" To="LightBlue" />
<ColorAnimation Storyboard.TargetName="buttonBorder"
Storyboard.TargetProperty="(Border.BorderBrush).(SolidBrush.Color)"
Duration="0:0:1" To="SlateBlue" />
</Storyboard>
</VisualState>

<!-- クリックした時 -->
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Storyboard.TargetName="buttonBorder"
Storyboard.TargetProperty="(Border.Background).(SolidBrush.Color)"
Duration="0:0:0.1" To="LightCyan" />
<ColorAnimation Storyboard.TargetName="buttonBorder"
Storyboard.TargetProperty="(Border.BorderBrush).(SolidBrush.Color)"
Duration="0:0:0.1" To="SlateBlue" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Border Name="buttonBorder" BorderBrush="SlateGray" BorderThickness="2" CornerRadius="4"
Background="LightGray">
<TextBlock Margin="1" Text="{TemplateBinding Content}" TextAlignment="Center"/>
</Border>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>

閉じる コメント(0)

コメント投稿

顔アイコン

顔アイコン・表示画像の選択

名前パスワードブログ
絵文字
×
  • オリジナル
  • SoftBank1
  • SoftBank2
  • SoftBank3
  • SoftBank4
  • docomo1
  • docomo2
  • au1
  • au2
  • au3
  • au4
投稿

.


プライバシー -  利用規約 -  メディアステートメント -  ガイドライン -  順守事項 -  ご意見・ご要望 -  ヘルプ・お問い合わせ

Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

みんなの更新記事