Just Code‎ > ‎

Silverilght - Changing Template on selected Item in a listbox

posted Oct 5, 2009, 11:38 PM by Peter Henell   [ updated Oct 6, 2009, 12:01 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
Comments