WPF Image简单样式示例

Image 样式

1.使用属性触发器  使图片在鼠标在图片范围内，更改图片（注意点：调用的时候对Source赋值时，发现属性触发器不起作用）

<Image VerticalAlignment="Center" Stretch="None">
	<Image.Style>
		<Style TargetType="{x:Type Image}">
			<Setter Property="Source" Value="/Viewer;component/Images/u1612.png"/>
			<Style.Triggers>
				<Trigger Property="IsMouseOver" Value="True">
					<Setter Property="Source" Value="/Viewer;component/Images/u1612_mouseOver.png"/>
				</Trigger>
			</Style.Triggers>
		</Style>
	</Image.Style>
</Image>

或者

<Style x:Key="ImageStyle" TargetType="{x:Type Image}">
	<Setter Property="Source" Value="/CarRental;component/Images/CarInfo/previous.png"/>
	<Style.Triggers>
		<Trigger Property="IsMouseOver" Value="True">
			<Setter Property="Source" Value="/CarRental;component/Images/CarInfo/previous_md.png"/>
		</Trigger>
	</Style.Triggers>
</Style>
<!--调用，调用的时候对Source赋值时，发现属性触发器不起作用-->
<Image Height="45" Width="45" Stretch="Fill" Style="{StaticResource ImageStyle}" Opacity="0.7"/>

2.使用数据触发器 ，根据属性值来显示何图像

<Style x:Key="SexImageKey" TargetType="{x:Type Image}">
	<Setter Property="Source" Value="/Viewer;component/Images/ExamTab/u777.png"/>
	<Style.Triggers>
		<DataTrigger Binding="{Binding Sex}" Value="{x:Static model:Sex.Male}">
			<Setter Property="Source" Value="/Viewer;component/Images/ExamTab/u777.png"/>
		</DataTrigger>
		<DataTrigger Binding="{Binding Sex}" Value="{x:Static model:Sex.Female}">
			<Setter Property="Source" Value="/Viewer;component/Images/ExamTab/u779.png"/>
		</DataTrigger>
	</Style.Triggers>
</Style>