The Problem Solver

Tell me and I will forget
Show me and I will remember
Involve me and I will understand
- Confucius -

Google Ads

This Blog

Syndication

Search

News

Community

Email Notifications

Explore

Explore DevelopMentor's Related Content:

Concepts
LINQ
Entity Framework
WCF
WPF
RESTful
Web
Unit Testing
.Net
Workflow
More >>

Tools
Visual Studio
Windows
IIS
Silverlight
More >>

Type
Screencast
Tools
Video
Newsletter
Sample
Article
Books
Magazine
How To
Demo
Course
Products
More >>

Archives

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.

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.

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

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.

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.

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.

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

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 Smile

    <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

Published Tue, Feb 17 2009 15:04 by Maurice

Filed under: .NET, Silverlight

Comments

# Silverlight Cream for February 17, 2009 -- #520@ Tuesday, February 17, 2009 4:21 PM

In this issue: Maurice de Beijer, Terence Tsang, Christopher Bennage, Lee, and Dave Campbell Shoutouts

by Community Blogs

# Changing the MouseOver effect on a Silverlight ListBox - The Problem Solver@ Tuesday, February 17, 2009 8:09 PM

Thank you for submitting this cool story - Trackback from DotNetShoutout

by DotNetShoutout

# re: Changing the MouseOver effect on a Silverlight ListBox@ Wednesday, February 18, 2009 9:40 AM

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.

by John

# re: Changing the MouseOver effect on a Silverlight ListBox@ Wednesday, February 18, 2009 1:20 PM

@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.

by Maurice

# re: Changing the MouseOver effect on a Silverlight ListBox@ Thursday, February 19, 2009 3:03 AM

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?