Changing the MouseOver effect on a Silverlight ListBox

One thing I occasionally have to do is  change the way a ListBox item behaves. For example the blue highlight effect when the mouse hovers over it.

image

 

Changing the blue mouse over effect to something else, say the item growing slightly isn’t very hard using Blend. However I find the steps a little awkward so this post should help me remember them and I hope it helps someone else as well.

 

Suppose we start with the following very simple Silverlight page

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SilverlightApplication4.Page"
    Width="640" Height="480">
 
    <Grid x:Name="LayoutRoot" Background="White">
        <ListBox Margin="8,8,0,0" VerticalAlignment="Top" Height="116" Width="77" HorizontalAlignment="Left" >
            <ListBoxItem Content="One"/>
            <ListBoxItem Content="Two"/>
            <ListBoxItem Content="Three"/>
        </ListBox>
    </Grid>
</UserControl>


 



The trick to changing the mouse over effect is changing the ListBox style first.



First select The ListBox in the “ Objects and Timeline” windows. Next select “Object/Edit Stype/Edit a Copy” from the menu and create a new style for the ListBox.



image



Next we need to edit the ListBoxItem style by selecting “Object/Edit Other Style/Edit ItemContainerStyle/Edit a Copy”.



image



Now we are at the level of the ListBox items. Now we need to edit the template itself to make the actual changes we want. So select “Object/Edit Control Parts (Template)/Edit Template from the menu.



image



Only when we get to this level do we see the separate states a ListBoxItem can have. Not very easy to find I admit but here it is. So now select the MouseOver state from the ComonStates.



image



Now we see that there is a change to the fillColor Opacity.



Suppose we want to change that and have the element grow with a mouse over effect. The first step is to delete the current effect. So select the Opacity in the “Objects and Timeline” and press delete. Next to make the item grow we are going to change the Scale Transform on the contentPresenter.



image



And when we run the Silverlight application and move the mouse over the two it looks like this:



image



Of course we could have typed the XAML in by hand but as the complete XAML produced by Blend, se below, is rather long I would rather use Blend, even it it is not exactly intuitive if you ask me. At least next time I know where to look for the steps [:)]



<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SilverlightApplication4.Page"
    Width="640" Height="480" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
 
    <UserControl.Resources>
        <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
            <Setter Property="Padding" Value="3"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="TabNavigation" Value="Local"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid Background="{TemplateBinding Background}">
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="CommonStates">
                                    <vsm:VisualState x:Name="Normal"/>
                                    <vsm:VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.2"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.2"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value=".55"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="SelectionStates">
                                    <vsm:VisualState x:Name="Unselected"/>
                                    <vsm:VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value=".75"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="FocusStates">
                                    <vsm:VisualState x:Name="Focused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Unfocused"/>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>
                            <Rectangle x:Name="fillColor" IsHitTestVisible="False" Opacity="0" Fill="#FFBADDE9" RadiusX="1" RadiusY="1"/>
                            <Rectangle x:Name="fillColor2" IsHitTestVisible="False" Opacity="0" Fill="#FFBADDE9" RadiusX="1" RadiusY="1"/>
                            <ContentPresenter HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" RenderTransformOrigin="0.5,0.5">
                                <ContentPresenter.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </ContentPresenter.RenderTransform>
                            </ContentPresenter>
                            <Rectangle x:Name="FocusVisualElement" Visibility="Collapsed" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="1" RadiusY="1"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ListBoxStyle1" TargetType="ListBox">
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Background" Value="#FFFFFFFF"/>
            <Setter Property="Foreground" Value="#FF000000"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="TabNavigation" Value="Once"/>
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFA3AEB9" Offset="0"/>
                        <GradientStop Color="#FF8399A9" Offset="0.375"/>
                        <GradientStop Color="#FF718597" Offset="0.375"/>
                        <GradientStop Color="#FF617584" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBox">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2">
                            <ScrollViewer x:Name="ScrollViewer" Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="0" Padding="{TemplateBinding Padding}">
                                <ItemsPresenter/>
                            </ScrollViewer>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemContainerStyle" Value="{StaticResource ListBoxItemStyle1}"/>
        </Style>
    </UserControl.Resources>
 
    <Grid x:Name="LayoutRoot" Background="White">
        <ListBox Margin="8,8,0,0" Height="116" HorizontalAlignment="Left" Style="{StaticResource ListBoxStyle1}" VerticalAlignment="Top" Width="77" >
            <ListBoxItem Content="One"/>
            <ListBoxItem Content="Two"/>
            <ListBoxItem Content="Three"/>
        </ListBox>
    </Grid>
</UserControl>


 



Enjoy

6 thoughts on “Changing the MouseOver effect on a Silverlight ListBox

  1. Will it be possible to have mouse over state and selection state to be the same? As in, say the item to remain scaled when selected.
    The problem with this is, once I apply the selected style (scale), a mouse over on this removes the style.

    Please help.

  2. @John,

    Yes. When you get to the ListBoxItem with all its different states you can change any of them. So in your case you will also want to change the Selected state.

  3. Hi Maurice,
    Thanks for the reply, but guess you did not get my problem right.

    The Mouse Over state removes the Selected State, that is if i mouse over on a selected item. (In the ex what you have given, if i apply the scaling of text in the selected text then the scaling is removed after the mouse over event). How do I retain it?

  4. not working .. i reproduced the same steps in blend-2 it’s not working.where can be the problem with my implementation

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>