Making The SelectedItem Shrink When Pressed in a ListBox For Windows Phone 7

October 21 2010

There’s a nice effect in many of the shell apps of Windows Phone 7 where, when pressed, the selected item of text in a listbox shrinks slightly.  I wanted this effect in my listbox and used Blend to do it. It ends up looking like this when you press it but before you lift your finger off. Simple, but an effect UX technique. It ends up looking like this when your finger is on the item:


Here’s what I did:

  1. Created a ListBox
  2. Rightclicked the ListBox and selected “edit additional templates” and then “edit generated item container”
  3. Selected the ContentContainer
  4. Went to states and selected “MouseOver” (this is kinda funky ‘cause the phone doesn’t really have a MouseOver state, but it does have a pressed state, which they are calling MouseOver)
  5. Went to the transform properties of the ContentContainer and changed the scaleX and scaleY to .9 and also changed the center point to 0,0.
  6. Walla!

Download the project if you’d like. Or just grab this style style that generated below.

  1. <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
  2.     <Setter Property="Background" Value="Transparent"/>
  3.     <Setter Property="BorderThickness" Value="0"/>
  4.     <Setter Property="BorderBrush" Value="Transparent"/>
  5.     <Setter Property="Padding" Value="0"/>
  6.     <Setter Property="HorizontalContentAlignment" Value="Left"/>
  7.     <Setter Property="VerticalContentAlignment" Value="Top"/>
  8.     <Setter Property="Template">
  9.         <Setter.Value>
  10.             <ControlTemplate TargetType="ListBoxItem">
  11.                 <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
  12.                     <VisualStateManager.VisualStateGroups>
  13.                         <VisualStateGroup x:Name="CommonStates">
  14.                             <VisualState x:Name="Normal"/>
  15.                             <VisualState x:Name="MouseOver">
  16.                                 <Storyboard>
  17.                                     <DoubleAnimation Duration="0" To="0.9" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
  18.                                     <DoubleAnimation Duration="0" To="0.9" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
  19.                                     <PointAnimation Duration="0" To="0,0" Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
  20.                                 </Storyboard>
  21.                             </VisualState>
  22.                             <VisualState x:Name="Disabled">
  23.                                 <Storyboard>
  24.                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
  25.                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
  26.                                     </ObjectAnimationUsingKeyFrames>
  27.                                     <DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
  28.                                 </Storyboard>
  29.                             </VisualState>
  30.                         </VisualStateGroup>
  31.                         <VisualStateGroup x:Name="SelectionStates">
  32.                             <VisualState x:Name="Unselected"/>
  33.                             <VisualState x:Name="Selected">
  34.                                 <Storyboard>
  35.                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
  36.                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
  37.                                     </ObjectAnimationUsingKeyFrames>
  38.                                 </Storyboard>
  39.                             </VisualState>
  40.                         </VisualStateGroup>
  41.                     </VisualStateManager.VisualStateGroups>
  42.                     <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" RenderTransformOrigin="0.5,0.5">
  43.                         <ContentControl.RenderTransform>
  44.                             <CompositeTransform/>
  45.                         </ContentControl.RenderTransform>
  46.                     </ContentControl>
  47.                 </Border>
  48.             </ControlTemplate>
  49.         </Setter.Value>
  50.     </Setter>
  51. </Style>

Comments (1) -

5/17/2011 3:59:47 AM #


Nice, but doesn't always work. When an item is in pressed (MouseOver) state, begin scrolling the view and release finger -> sometimes the item remains in MouseOver state! Because of this I can make multiple items to stay in MouseOver state. Anyone had any similar problems?


Pingbacks and trackbacks (3)+

Add comment

  • Comment
  • Preview