c# – Silverlight Trigger to set visiblity – Education Career Blog

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.