WPF修改按钮背景图片

来源:转载

我相信用过wpf按钮控件的同事都知道,如果想实现一个按钮点击事件修改它的的背景图片肯定会特别的头痛。为什么呢?因为在wpf按钮控件里面封装了点击事件,无论你怎样修改按钮点击事件属性,按钮控件都会给你添加一个灰色的背景颜色。是不是觉得很气氛呢,告诉你我也是。不过现在好了,不妨换种思路来做,我们可以自己创建一个控件,来实现按钮的背景图片切换问题。

(1)xaml的代码如下:

<Grid x:Name="LayoutRoot"><Button x:Name="button" Content="Button" HorizontalAlignment="Center" 
VerticalAlignment="Center" Width="210" BorderThickness="0" Height="55" 
FontSize="29.333" FontFamily="Comic Sans MS" FontWeight="Bold" Foreground="White"/>

</Grid>

(2)然后右键点击

<Window.Resources>

<ControlTemplate x:Key="button" TargetType="{x:Type Button}">

<Grid>

                    //默认的图片显示(先显示后隐藏)

<Image x:Name="defaultimage" HorizontalAlignment="Stretch" Width="210"
 Height="55" Stretch="None" Source="resources/share.png"/>

                    //点击后的图片(先隐藏后显示)

<Image x:Name="forcusimage" HorizontalAlignment="Stretch" Width="210" 
Height="55" Stretch="None" Panel.ZIndex="10" Source="resources/shareclick.png" 
Visibility="Hidden"/>

<TextBlock x:Name="text" Margin="0" TextWrapping="Wrap" Text="click button" 
d:LayoutOverrides="Width, Height" HorizontalAlignment="Center" Panel.ZIndex="100"/>

</Grid>

</ControlTemplate>

</Window.Resources>

(3)点击事件处理代码如下:

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal"/>

<VisualState x:Name="MouseOver"/>

<VisualState x:Name="Pressed">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" 
Storyboard.TargetName="defaultimage">

<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" 
Storyboard.TargetName="forcusimage">

                                      <DiscreteObjectKeyFrame KeyTime="0" 
Value="{x:Static Visibility.Visible}"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled"/>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

(4)ok,保存我们的项目后运行下,看看效果如何。

本文来自3gfrantend的博客,原文地址:http://hi.baidu.com/3gfrantend/blog/item/adfed7cc78c4e324f8dc6187.html


分享给朋友:
您可能感兴趣的文章:
随机阅读: