views:

13

answers:

0

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>