ListView different template when selected

Question

I am trying to create a different template for a list view item when it is selected, however I couldn't find anything about doing this.

What is the best way to select a template based on whether the listview item is selected or not?

Answer 1

What is the best way to select a template based on whether the listview item is selected or not?

Changing the default template and customize animation inside VisualState is the right way.

1. Copy and paste the default ListViewItem styles and templates in your project, see here

2. Change the brush in the Selected and PointerOverSelected visual states:

SystemControlHighlightListAccentLowBrush in the Selected visual state:

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentLowBrush}" />
</ObjectAnimationUsingKeyFrames>

Change to:

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
         <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
</ObjectAnimationUsingKeyFrames>

SystemControlHighlightListAccentMediumBrush in the PointerOverSelected visual state:

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentMediumBrush}" />
</ObjectAnimationUsingKeyFrames>

Change to:

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
        <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
</ObjectAnimationUsingKeyFrames>

Screenshot:

Check my completed sample here

-----Update(09/27/2016)-----

How would I use this to change the DataTemplate of a ListBoxItem when it's selected

If you need to switch DataTemplate , you might change it from code behind.

1) Append a DataTeemplate in the page's resource:

<Page.Resources>
  <DataTemplate x:Key="dataTemplate1">
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="->" />
        <TextBlock Text="{Binding}" />
    </StackPanel>
  </DataTemplate>
</Page.Resources>

2) Add handler for SelectionChanged event:

<ListView SelectionChanged="ListView_SelectionChanged">
        <ListView.Items>
            <ListViewItem Content="One"></ListViewItem>
            <ListViewItem Content="Two"></ListViewItem>
            <ListViewItem Content="Three"></ListViewItem>
        </ListView.Items>
</ListView>

3) Change DataTemplate from code behind

private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        //Assign DataTemplate for selected items
        foreach (var item in e.AddedItems)
        {
            ListViewItem _lvi = item as ListViewItem;
            _lvi.ContentTemplate = (DataTemplate)this.Resources["dataTemplate1"];
        }
        //Remove DataTemplate for unselected items
        foreach (var item in e.RemovedItems)
        {
            ListViewItem _lvi = item as ListViewItem;
            _lvi.ContentTemplate = null;
        }
    }

Have updated my demo: LINK