WPF Trigger触发器怎么使button进行图片切换

masxuhuabin 2012-09-12 05:49:15
我是菜鸟,想实现button背景图的切换,如button刚显示的时候是图A,当鼠标移上去时就变成图B,移出又变回图A。
我看一些网上的例子,模仿TextBlock,这个控件能实现字体颜色的变话。

<TextBlock Text="TestColor" Width="76" HorizontalAlignment="Left" Margin="28,127,0,169">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>

如果我换成BUTTON来做的时候,会提示我没有ismouseover这个属性。
有没有大神能帮我简单写下吗?分数不是很多。。。快用没了。。不好意思啊
...全文
2736 10 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
masxuhuabin 2012-09-14
  • 打赏
  • 举报
回复
Style="{StaticResource OkSty}"/>
。。。这句是为了注明红色,在C#下写就没用了。。晕倒。
masxuhuabin 2012-09-14
  • 打赏
  • 举报
回复

<Window.Resources>
<Style x:Key="OkSty" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<StackPanel Orientation="Horizontal" >
<Image Name="ImgBtnBg3" Source="/WpfApplication2;component/Images/010.bmp" />
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="/WpfApplication2;component/Images/009.bmp" TargetName="ImgBtnBg3"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Source" Value="/WpfApplication2;component/Images/010.bmp" TargetName="ImgBtnBg3"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Source" Value="/WpfApplication2;component/Images/009.bmp" TargetName="ImgBtnBg3"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>

在Window.Resources写样式变化。

<Button Name="btnSave" Width="58" Height="68" Click="btnSave_Click" Style="{StaticResource OkSty}"/>

写button这块绑定OkSty就可以实现切换了。
随便写的demo,只有两张图片进行切换,写了四种状态的,鼠标进入,单击,鼠标移出等状态。
我自己网上找的资料,现在看来问题很简单,只是我原先不清楚要写在Window.Resources里。
希望这个例子对新手有用~
另外谢谢楼上的各位了。
masxuhuabin 2012-09-14
  • 打赏
  • 举报
回复

<Window.Resources>
<Style x:Key="OkSty" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<StackPanel Orientation="Horizontal" >
<Image Name="ImgBtnBg3" Source="/WpfApplication2;component/Images/010.bmp" />
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="/WpfApplication2;component/Images/009.bmp" TargetName="ImgBtnBg3"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Source" Value="/WpfApplication2;component/Images/010.bmp" TargetName="ImgBtnBg3"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Source" Value="/WpfApplication2;component/Images/009.bmp" TargetName="ImgBtnBg3"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>

在Window.Resources写样式变化。

<Button Name="btnSave" Width="58" Height="68" Click="btnSave_Click" Style="{StaticResource OkSty}"/>

写button这块绑定OkSty就可以实现切换了。
随便写的demo,只有两张图片进行切换,写了四种状态的,鼠标进入,单击,鼠标移出等状态。
我自己网上找的资料,现在看来问题很简单,只是我原先不清楚要写在Window.Resources里。
希望这个例子对新手有用~
另外谢谢楼上的各位了。
andy1020tc 2012-09-13
  • 打赏
  • 举报
回复

<Page.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
</EventTrigger>
</Page.Triggers>

这部分是触发事件的

<Storyboard x:Key="Storyboard1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="page">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="page">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>

这是我的Storyboard1 在第一部分里面可以看到 需要一个Storyboard
这个Storyboard1是在Page.Resources节点下
masxuhuabin 2012-09-13
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 的回复:]

沉下去大神就看不到了,先帮你顶吧!
[/Quote]
谢谢!
masxuhuabin 2012-09-13
  • 打赏
  • 举报
回复
= =都没有人吗。。。
UP++++++++++++++++
zhleiyang 2012-09-13
  • 打赏
  • 举报
回复
<Style x:Key="button" TargetType="{x:Type Button}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="buttonbackground">
<Grid.Background>
<ImageBrush ImageSource="../image/1.png"></ImageBrush>
</Grid.Background>
<ContentPresenter Margin="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="buttonbackground" Property= "Background">
<Setter.Value>
<ImageBrush ImageSource="../image/3.png"></ImageBrush>
</Setter.Value>
</Setter>
</Trigger>

<Trigger Property="IsPressed" Value="True">
<Setter TargetName="buttonbackground" Property= "Background">
<Setter.Value>
<ImageBrush ImageSource="../image/2.png"></ImageBrush>
</Setter.Value>
</Setter>
</Trigger>

</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
masxuhuabin 2012-09-13
  • 打赏
  • 举报
回复
[Quote=引用 5 楼 的回复:]

XML code

<Page.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
</EventTrigger>
</Page.Tri……
[/Quote]
为什么要用事件触发器?直接用属性的不可以吗?
当ismouseover的时候切换下图片?

111,108

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术 C#
社区管理员
  • C#
  • AIGC Browser
  • by_封爱
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

让您成为最强悍的C#开发者

试试用AI创作助手写篇文章吧