I have a ListBox containing a StackPanel which contains a CheckBox and a Button. I want the button to fade in when the mouse is hovering over the StackPanel. I would like to do this declaratively using XAML if possible.
I have attempted this with the following code to no avail. Any thoughts as to what I am doing wrong?
<UserControl x:Class="Company.Product.List"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="150" d:DesignWidth="100">
<Border x:Name="LayoutRoot"
Background="White"
CornerRadius="5"
Padding="5"
BorderBrush="Black"
BorderThickness="1">
<Grid Background="White">
<ListBox x:Name="LayerList">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard x:Name="FadeInStory">
<DoubleAnimation Storyboard.TargetName="FadeInButton"
Storyboard.TargetProperty="Opacity"
To="1.0"
Duration="0:0:1"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<CheckBox Margin="2"
Name="DynamicFeatureLayer"
Content="{Binding Path=LayerInfo.Name}"
IsChecked="{Binding Path=Visible, Mode=TwoWay}"
Tag="{Binding Path=LayerInfo.ID}"
ClickMode="Press"/>
<Button x:Name="FadeInButton" Content="^" HorizontalAlignment="Right"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Border>
</UserControl>