Button 当MouseOver时,其布局中的文字改变颜色,图片换图,背景色改变
例如:以下两张图片分别代表正常状态与鼠标滑过状态
按钮代码如下:
<Button Style="{StaticResource btnStyle}" Content="ABCDEFG" />
样式代码如下:
<Style x:Key="btnStyle" TargetType="Button">
<Setter Property="Padding" Value="1"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Background" Value="#FF999900" />
<Setter Property="Foreground" Value="#FF3191c3"/>
<Setter Property="FontSize" Value="16" />
<Setter Property="Width" Value="110" />
<Setter Property="Height" Value="70" />
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Duration="1" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background">
<EasingColorKeyFrame KeyTime="0" Value="#FF3191c3" />
</ColorAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="icon" Storyboard.TargetProperty="(Image.Source)">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="images/ywbl_sel.png" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ColorAnimation Duration="0" To="#FFFFFF" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="textBlock" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Background" Opacity="1" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image x:Name="icon" Grid.Row="0" Source="images/ywbl.png" Width="25" Height="25" HorizontalAlignment="Center" Margin="0 10 0 0"/>
<TextBlock x:Name="textBlock" Grid.Row="1" Text="{TemplateBinding Content}" Margin="0 -5 0 0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="Center" />
</Grid>
</Border>
<Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="3" RadiusX="3"/>
<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FF6DBDD1" StrokeThickness="0"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
===== 记录完毕, 为日后方便在项目使用====