How to change DataTemplate of Selected GridView Item

Question

I have following data template for my GridView Item. I want to change the data template of selected Item in GridView.

Data template for girdView

<DataTemplate x:Key="SearchListItemDataTemplate1">
    <Grid Height="auto" Background="Red">
        <Grid Height="auto" Margin="14,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="110"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="55"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="auto"></RowDefinition>
            </Grid.RowDefinitions>

            <!--Image Section-->
            <Grid Height="108" Margin="0,8,0,0" VerticalAlignment="Top">
                <Grid Margin="0">
                    <Border HorizontalAlignment="Left" Margin="0" VerticalAlignment="Bottom" Width="98" Height="98" CacheMode="BitmapCache" CornerRadius="0,0,30,0">

                    </Border>
                    <Border Background="#FFf26f46"
                                            Width="40" Height="40"
                                            VerticalAlignment="Bottom" 
                                            HorizontalAlignment="Left"
                                            CornerRadius="0,0,12,0">
                        <Grid>
                            <StackPanel  HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
                                <TextBlock Text="{Binding Degree}" FontSize="20" Foreground="White" VerticalAlignment="Center" />
                                <TextBlock VerticalAlignment="Center" Margin="0,3,0,0" FontSize="16" Foreground="White" Text="{Binding ConnectionDegree,Converter={StaticResource degreeToTextConverter}}" />
                            </StackPanel>
                        </Grid>
                    </Border>
                </Grid>
                <!--<Ellipse VerticalAlignment="Top" Margin="0,0,0,0" HorizontalAlignment="Right" StrokeThickness="0" Fill="{Binding Status,Converter={StaticResource statusToColorBrushConverter}}" Width="20" Height="20"></Ellipse>-->
            </Grid>
  </Grid>

Now any Item is selected in this GridView by the user I want to change the DataTemplate of the selected Item as following.

<DataTemplate x:Key="SearchListItemDataTemplate1">
    <Grid Height="auto" Background="Red">
        <Grid Height="auto" Margin="14,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="110"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="55"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="auto"></RowDefinition>
            </Grid.RowDefinitions>

            <!--Image Section-->
            <Grid Height="108" Margin="0,8,0,0" VerticalAlignment="Top">
                <Grid Margin="0">
                    <Border HorizontalAlignment="Left" Margin="0" VerticalAlignment="Bottom" Width="98" Height="98" CacheMode="BitmapCache" CornerRadius="0,0,30,0">

                    </Border>
                    <Border Background="#FFf26f46"
                                            Width="40" Height="40"
                                            VerticalAlignment="Bottom" 
                                            HorizontalAlignment="Left"
                                            CornerRadius="0,0,12,0">
                        <Grid>
                            <StackPanel  HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
                                <TextBlock Text="{Binding Degree}" FontSize="20" Foreground="White" VerticalAlignment="Center" />
                                <TextBlock VerticalAlignment="Center" Margin="0,3,0,0" FontSize="16" Foreground="White" Text="{Binding ConnectionDegree,Converter={StaticResource degreeToTextConverter}}" />
                            </StackPanel>
                        </Grid>
                    </Border>
                </Grid>
                <!--<Ellipse VerticalAlignment="Top" Margin="0,0,0,0" HorizontalAlignment="Right" StrokeThickness="0" Fill="{Binding Status,Converter={StaticResource statusToColorBrushConverter}}" Width="20" Height="20"></Ellipse>-->
            </Grid>

            <!-- Details Section  -->
            <Grid Grid.Column="1" Margin="10,8">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                </Grid.RowDefinitions>

                <TextBlock Foreground="#FF00579b" FontSize="20" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3"
               localpage:SearchView.InlineList="{Binding RunElements}" />

                <TextBlock Text="{Binding Name}" Grid.Row="1" Foreground="#FF575757" FontSize="16" Margin="0,4,0,0"></TextBlock>
                <TextBlock Text="{Binding Details}" Grid.Row="2" Height="auto" Foreground="#FF575757" FontSize="16" Margin="0,4,0,0"></TextBlock>

                <TextBlock Text="{Binding TheTextB}" VerticalAlignment="Bottom" Grid.Row="4" Foreground="#FF8fa4ad" FontSize="14" Margin="0,10,0,0"></TextBlock>
            </Grid>

            <!-- Operation Section Visibility="{Binding IsSelected, Converter={StaticResource boolToVisibiliytConverter},ConverterParameter=-1}"-->
            <Grid Grid.Column="2">
                <Button Content="{Binding ActionText}" Command="{Binding TheAction}" CommandParameter="{Binding Id}" Width="55" MinWidth="55" FontSize="16" Foreground="#FF42a046" Style="{Binding ActionStyle}"
                        />
            </Grid>


        </Grid>
    </Grid>
</DataTemplate>

I have read about the template selector. but it will select the template while binding.

Is there a way to change the data template for the selected item?

Answer 1

If I read your templates correctly, you want some additional details to show up, once the user selected an item, right? Changing the template is not the best way to do this.

You should add some kind of "ShowDetails" property on your itemViewModel (or whatever is the type of items in your gridview) and then change the visualization inside the template according to that property.

You can still use the gridview's SelectionChanged event to set that property on the selected item, or just place a button in the template that triggers the change.