Saturday, January 28, 2012

XAML: Changing a Style on MouseOver of the Parent Item

Sometimes, you want a Mouse Over event to trigger a style change on some or all the items within a container.

Changing Image style when a Mouse moves over a custom parent container (WC_MenuItem). Any type of container or Panel can be substituted for the custom type I've used.

<Image x:Name="imgHelpLink" Source="pack://application:,,,/Weblink_WPF;component/Images/Help.png" Cursor="Hand" Grid.Column="1" Width="16" Height="16" Margin="0,0,0,0" ToolTip="Click to view the Knowledgebase article on this report" HorizontalAlignment="Right" >
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Opacity" Value="0" />
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type weblink_controls:WC_MenuItem}},Path=IsMouseOver}" Value="True">
<Setter Property="Opacity" Value="1" />
</DataTrigger>
<!--<DataTrigger Binding="{Binding Path=HelpLink.Length}" Value="0">
<Setter Property="Opacity" Value="0.3"/>
</DataTrigger>-->
</Style.Triggers>
</Style>
</Image.Style>
</Image>

No comments: