I have a ListBox with an altered datatemplate (it contains a hyperlinkbutton and a textbox for each item). I would like the button to not be visible by default, but to turn visible when the mouse is hovered over that particular list box item. The XAML I have tried so far doesn’t work and i can’t figure out why (by doesn’t work I mean it fails to compile).
<ListBox Name="lstTest">
<ListBox.Template>
<ControlTemplate>
<ListBox ItemsSource="{Binding}">
<StackPanel >
<TextBlock Text="{Binding Path=Name}"/>
<HyperlinkButton Name="hypEdit" Content="Edit" Visibility="Collapsed" />
</StackPanel>
<ListBox.Triggers>
<EventTrigger RoutedEvent="ListBoxItem.MouseEnter" >
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="hypEdit" Storyboard.TargetProperty="Visibility"
From="Collapsed" To="Visible" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ListBox.Triggers>
</ListBox>
</ControlTemplate>
</ListBox.Template>
</ListBox>
,
What compile error do you get? I can compile it, but I would not expect it to work.
You seem to have defined the listbox by defining another listbox within its template. Was that intentional? I would have expected the basic item template to look like this (grid optional):
<ListBox Name="lstTest" ItemsSource="{Binding}>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<StackPanel VerticalAlignment="Top">
<TextBlock Text="{Binding Name}"/>
<HyperlinkButton Content="Edit" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Below is a complete working example of what I think you were after:
<UserControl
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"
xmlns:System="clr-namespace:System;assembly=mscorlib"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
x:Class="SilverlightApplication1.SilverlightTrigger"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<ListBox VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.Resources>
<Storyboard x:Name="Storyboard1">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="hypEdit">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="Storyboard2">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="hypEdit">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard2}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<StackPanel VerticalAlignment="Top">
<TextBlock TextWrapping="Wrap" Text="{Binding Name}" d:LayoutOverrides="Width"/>
<HyperlinkButton x:Name="hypEdit" Content="Edit" d:LayoutOverrides="Width" Visibility="Collapsed"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</UserControl>
Feel free to tweak to your own requirements.