title: Different Item template for Selected and Normal items in Listbox Item
body: <p>I want to display a ListBox whose item when selected will display a button which performs specific action on the selected data item. For this, I use two DataTemplates one is <strong>NormalTemplate</strong>(which has no button) and the other is <strong>SelectedTemplate</strong> (which has a button whose Tag property is bound to data, which is used in button click event handler). When an item in Listbox is selected I want to assign the SelectedTemplate.</p>
  
  <p>For this I used custom ControlTemplate which has VisualStateManager which selects appropriate Template based on the VisualState (i.e., Selected &amp; Unselected). The problem with this solution is I've to create new ControlTemplate every time I need to use different DataTemplates. I'm trying to find a solution where you specify the templates for normal &amp; selected items and use common code for changing the datatemplate based on the visualstate.</p>
  
  <p>Below is my DataTemplate for Unselected &amp; Selected items:</p>
  
  <pre><code>&lt;DataTemplate x:Key="NormalItemTemplate"&gt;
          &lt;Grid&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="*"    /&gt;
              &lt;/Grid.ColumnDefinitions&gt;
  
              &lt;StackPanel Grid.Column="1" Margin="8,0,0,3" VerticalAlignment="Center"&gt;
                  &lt;TextBlock Text="{Binding Name}" FontWeight="Bold" FontFamily="Arial" FontSize="14"/&gt;
                  &lt;TextBlock Text="{Binding Description}" /&gt;
              &lt;/StackPanel&gt;
          &lt;/Grid&gt;
      &lt;/Border&gt;
  &lt;/DataTemplate&gt;
  
  &lt;DataTemplate x:Key="SelectedItemTemplate"&gt;
      &lt;Grid&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="*"    /&gt;
                  &lt;ColumnDefinition Width="65"/&gt;
              &lt;/Grid.ColumnDefinitions&gt;
  
              &lt;StackPanel Grid.Column="1" Margin="8,0,0,3"&gt;
                  &lt;TextBlock Text="{Binding Name}" FontWeight="Bold" FontFamily="Arial" FontSize="14"/&gt;
                  &lt;TextBlock Text="{Binding Description}" /&gt;
              &lt;/StackPanel&gt;
  
              &lt;Border Grid.Column="2" Grid.RowSpan="2" VerticalAlignment="Stretch"&gt;
                  &lt;Button Content="Process" Tag={Binding} OnClick="Process_Clicked" HorizontalAlignment="Center" VerticalAlignment="Center"/&gt;
              &lt;/Border&gt;
          &lt;/Grid&gt;
      &lt;/Border&gt;
  &lt;/DataTemplate&gt;
  </code></pre>
  
  <p>Below is the style which defines custom ControlTemplate which uses VisualStateManager to display or hide appropriate ContentPresenters whose ContentTemplate is assigned to NormalItemTemplate &amp; SelectedItemTemplate</p>
  
  <pre><code>&lt;Style TargetType="ListBoxItem" x:Key="ActiveGamesItemContainerStyle"&gt;
      &lt;Setter Property="HorizontalContentAlignment" Value="Stretch" /&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="ListBoxItem"&gt;
                  &lt;Grid Background="{TemplateBinding Background}"&gt;
                      &lt;VisualStateManager.VisualStateGroups&gt;
                          &lt;VisualStateGroup x:Name="CommonStates"&gt;
                              &lt;VisualState x:Name="Normal" /&gt;
                          &lt;/VisualStateGroup&gt;
  
                          &lt;VisualStateGroup x:Name="SelectionStates"&gt;
                              &lt;VisualState x:Name="Unselected"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedContentPresenter" Storyboard.TargetProperty="Visibility"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0"&gt;
                                              &lt;DiscreteObjectKeyFrame.Value&gt;
                                                  &lt;Visibility&gt;Collapsed&lt;/Visibility&gt;
                                              &lt;/DiscreteObjectKeyFrame.Value&gt;
                                          &lt;/DiscreteObjectKeyFrame&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="UnSelectedContentPresenter" Storyboard.TargetProperty="Visibility"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0"&gt;
                                              &lt;DiscreteObjectKeyFrame.Value&gt;
                                                  &lt;Visibility&gt;Visible&lt;/Visibility&gt;
                                              &lt;/DiscreteObjectKeyFrame.Value&gt;
                                          &lt;/DiscreteObjectKeyFrame&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
  
                              &lt;VisualState x:Name="Selected"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedContentPresenter" Storyboard.TargetProperty="Visibility"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0"&gt;
                                              &lt;DiscreteObjectKeyFrame.Value&gt;
                                                  &lt;Visibility&gt;Visible&lt;/Visibility&gt;
                                              &lt;/DiscreteObjectKeyFrame.Value&gt;
                                          &lt;/DiscreteObjectKeyFrame&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="UnSelectedContentPresenter" Storyboard.TargetProperty="Visibility"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0"&gt;
                                              &lt;DiscreteObjectKeyFrame.Value&gt;
                                                  &lt;Visibility&gt;Collapsed&lt;/Visibility&gt;
                                              &lt;/DiscreteObjectKeyFrame.Value&gt;
                                          &lt;/DiscreteObjectKeyFrame&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                          &lt;/VisualStateGroup&gt;
                      &lt;/VisualStateManager.VisualStateGroups&gt;
  
                      &lt;ContentPresenter
                                  x:Name="SelectedContentPresenter"
                                  Content="{TemplateBinding Content}"
                                  ContentTemplate="{StaticResource NormalItemTemplate}"
                                  HorizontalAlignment="Stretch"
                                  Margin="{TemplateBinding Padding}"
                                  Visibility="Collapsed"/&gt;
  
                      &lt;ContentPresenter
                                  x:Name="UnSelectedContentPresenter"
                                  Content="{TemplateBinding Content}"
                                  ContentTemplate="{StaticResource SelectedItemTemplate}"
                                  HorizontalAlignment="Stretch"
                                  Margin="{TemplateBinding Padding}"
                                  Visibility="Visible"/&gt;
                  &lt;/Grid&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>The problems with this solution are:</p>
  
  <ol>
  <li><p>For every new ListBoxItem which needs to use different DataTemplates I need to create a style with ControlTemplate which is same as the above but just need to change the ContentPresenter's ContentTemplate. Thereby, lot of duplicate code/XAML.</p></li>
  <li><p>Since, I'm using the button in the SelectedItemTemplate, I need to define the styles in the same UserControl class where the Click eventhandler is defined. If the UserControl uses more than one ListBox then there will be a huge Style definition declared for every ListBoxes.</p></li>
  </ol>
  
  <p>I tried to solve this problem using attached properties but its not working. As, I'm not able to get hold of Selected ListBoxItem (instead I'm getting the bound data). The idea was to get hold of the ListBoxItem get its ContentPresenter and set it's ContentTemplate to the SelectedItemTemplate.</p>
  
  <p>Is there any better way to do this?</p>
  
  <p>Thanks &amp; Regards,
  Sunil</p>