Silverilght - Changing Template on selected Item in a listbox

Post date: Oct 6, 2009 6:38:09 AM

<UserControl x:Class="LekMedSilverlight.MainPage" 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"

Height="600" Width="800"

mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480" > <UserControl.Resources> <DataTemplate x:Key="NormalTemplate"> <Grid> <TextBlock Text="{Binding Name}" FontSize="12" /> </Grid> </DataTemplate> <DataTemplate x:Key="SelectedTemplate"> <Grid x:Name="LayoutRoot" Background="Azure"> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.028*"/> <ColumnDefinition Width="0.28*"/> <ColumnDefinition Width="0.672*"/> <ColumnDefinition Width="0.02*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="0.24*"/> <RowDefinition Height="0.705*"/> <RowDefinition Height="0.055*"/> </Grid.RowDefinitions> <TextBlock Grid.Column="1" TextWrapping="Wrap" Text="{Binding Name}"/> <TextBlock Grid.Column="2" TextWrapping="Wrap" Text="{Binding SSN}"/> <TextBlock Grid.Column="1" Grid.Row="2" Text="{Binding Age}" /> <TextBlock Grid.Column="2" Grid.Row="2" Text="{Binding Adress}" /> </Grid> </DataTemplate> <Style TargetType="ListBoxItem" x:Key="ListboxStyle1"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListBoxItem"> <Grid Background="{TemplateBinding Background}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" > <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter1" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter2" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="SelectionStates"> <VisualState x:Name="Selected"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter1" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter2" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Unselected"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter1" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter2" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <ContentPresenter x:Name="contentPresenter1" Content="{TemplateBinding Content}" ContentTemplate="{StaticResource NormalTemplate}" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" Visibility="Visible"/> <ContentPresenter x:Name="contentPresenter2" Content="{TemplateBinding Content}" ContentTemplate="{StaticResource SelectedTemplate}" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" Visibility="Collapsed"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <ListBox x:Name="lb" Grid.Column="0" Grid.Row="0" ItemContainerStyle="{StaticResource ListboxStyle1}"> </ListBox> </Grid></UserControl>

Original Post: http://chris.59north.com/post/Changing-the-layout-for-the-selected-item-in-ListBox.aspx