Blendを使ってButtonのホバーエフェクトを作る Part3
ボタンのホバーエフェクト、さらに続きます。
今回も、xamlだけメモ。
背景を透過させ、ホバー時にうっすらと背景色を出す
これはシンプルですね。
以下のようにボタン背景の透明度を変化させてるだけです。
で、このボタンを画像の上に配置しています。
<ControlTemplate x:Key="ButtonControlTemplate4" TargetType="{x:Type Button}"> <Border x:Name="border" BorderThickness="2" BorderBrush="#FFFFFFFF" Background="Transparent" OpacityMask="Black" > <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"> <Storyboard> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border"> <EasingColorKeyFrame KeyTime="0:0:0.3" Value="Transparent"> <EasingColorKeyFrame.EasingFunction> <CubicEase EasingMode="EaseInOut"/> </EasingColorKeyFrame.EasingFunction> </EasingColorKeyFrame> </ColorAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="MouseOver"> <Storyboard> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border"> <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#33FFFFFF"> <EasingColorKeyFrame.EasingFunction> <CubicEase EasingMode="EaseInOut"/> </EasingColorKeyFrame.EasingFunction> </EasingColorKeyFrame> </ColorAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border"> <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#66888888"> <EasingColorKeyFrame.EasingFunction> <CubicEase EasingMode="EaseInOut"/> </EasingColorKeyFrame.EasingFunction> </EasingColorKeyFrame> </ColorAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Disabled"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <ContentPresenter TextBlock.Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> </ControlTemplate>
ボーダースタイルを変更する
ボタンの周囲の線を破線にできるように、
BorderではなくRectangleを使用して周囲の枠を書いています。
また、破線の定義を行うStrokeDashArrayプロパティはStoryBoardでアニメーションができませんでした。
そこで、StrokeDashArrayプロパティの値が異なる、複数のRectangleを配置しておき、VisualStateの状態に合わせてVisibilityを切り替えています。
<ControlTemplate x:Key="ButtonControlTemplate5" TargetType="{x:Type Button}"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="rectangle"> <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="rectangle1"> <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="rectangle"> <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="rectangle2"> <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Disabled"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Rectangle x:Name="rectangle" Fill="White" Stroke="#FF333333" StrokeThickness="2"/> <Rectangle x:Name="rectangle1" Fill="White" Stroke="#FF333333" StrokeThickness="2" StrokeDashArray="2 2" Visibility="Collapsed"/> <Rectangle x:Name="rectangle2" Fill="White" Stroke="#FF333333" StrokeThickness="2" StrokeDashArray="1 1" Visibility="Collapsed"/> <ContentPresenter TextBlock.Foreground="#FF333333" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </ControlTemplate>
内側にブロックを表示する
<ControlTemplate x:Key="ButtonControlTemplate6" TargetType="{x:Type Button}"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle"> <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"> <EasingDoubleKeyFrame.EasingFunction> <CubicEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="MouseOver"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle"> <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"> <EasingDoubleKeyFrame.EasingFunction> <CubicEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle"> <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"> <EasingDoubleKeyFrame.EasingFunction> <CubicEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="rectangle"> <EasingThicknessKeyFrame KeyTime="0:0:0.2" Value="2"> <EasingThicknessKeyFrame.EasingFunction> <CubicEase EasingMode="EaseInOut"/> </EasingThicknessKeyFrame.EasingFunction> </EasingThicknessKeyFrame> </ThicknessAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Disabled"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Rectangle Fill="White" Stroke="#FF333333" StrokeThickness="2"/> <Rectangle x:Name="rectangle" Fill="White" Stroke="#FF333333" StrokeThickness="2" Margin="4" Opacity="0"/> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid> </ControlTemplate>
まだまだ続くかも。