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这个属性。
有没有大神能帮我简单写下吗？分数不是很多。。。快用没了。。不好意思啊
...全文
2960 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的时候切换下图片？

WPF MVVM Command 02 触发器
WPF MVVM Command 触发器
WPF触发器使用
WPF触发器使用，几种常用的用法，仅供参考。
wpf的button样式
设置button的样式，内外发光，移动、点击、离开时产生不同的效果
WPF触发器，执行预期的响应
WPF触发器，执行预期的响应
wpf button去掉虚边框
wpf button去掉虚边框wpf button去掉虚边框wpf button去掉虚边框
C#

111,112

社区成员

642,554

社区内容

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

加载中

查看更多榜单
社区公告

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

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

+ 用AI写文章