when using XAML with style triggers, I’m not able to change the image on IsMouseOver when hovering over the your text border. The border, and textblock change color, but the image stays the same. I’ve used nested style triggers to try to reach my goal. The image is black on startup, but should turn white when hovering.
<Border Width="200" Height="100" CornerRadius="10">
<Border.Resources>
<Style Key="Base" TargetType="Image">
<Setter Property="Source" Value="C:Tempadd_black.png"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.Setters>
<Setter Property="Source" Value="C:Tempadd_white.png"/>
</Trigger.Setters>
</Trigger>
</Style.Triggers>
</Style>
<Style Key="TextBlock" TargetType="TextBlock" BasedOn="{StaticResource Base}">
<Setter Property="Background" Value="Red"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.Setters>
<Setter Property="Background" Value="Green"/>
<Setter Property="Foreground" Value="White"/>
</Trigger.Setters>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="Border" BasedOn="{StaticResource TextBlock}">
<Setter Property="Background" Value="Yellow"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.Setters>
<Setter Property="Background" Value="Green"/>
<Setter Property="Cursor" Value="Hand"/>
</Trigger.Setters>
</Trigger>
</Style.Triggers>
</Style>
</Border.Resources>
<Grid Width="180" Height="80">
<Grid.RowDefinitions>
<RowDefinition Height="24"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Style="{StaticResource Base}" Grid.Row="0" Margin="0,0,0,0" Height="24"/>
<!--TextBlock Style="{StaticResource Base}"
Height="24"
Grid.Row="0"
Name="TextNumber"
FontFamily="Tahoma"
FontSize="24"
FontWeight="Bold"
Width="180"
VerticalAlignment="Top"
>TEST</TextBlock-->
<TextBlock Style="{StaticResource Base}"
Grid.Row="2"
FontFamily="Tahoma"
FontSize="12"
Width="180"
TextWrapping="Wrap"
VerticalAlignment="Bottom"
>
Openstaande orders Openstaande orders Openstaande orders Openstaande orders Openstaande
</TextBlock>
</Grid>
</Border>
I expect the image source changes when hovering over the border.
New contributor
Mark Gilissen is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.