[QuickN’ Tip] Changer dynamiquement le template des éléments d’une ListView/GridView
Voici un petit rappel qui, je pense, ne fera pas de mal :)
L’idée est la suivante: vous diposez de 2 templates (un pour pour le mode Lecture, l’autre pour le mode Ecriture):
<DataTemplate x:Key="ReadTemplate"> <Grid HorizontalAlignment="Left" Width="250" Height="250"> <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"> <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" /> </Border> <StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}"> <TextBlock Text="{Binding Title}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0" /> <TextBlock Text="{Binding Subtitle}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10" /> </StackPanel> </Grid> </DataTemplate> <DataTemplate x:Key="EditTemplate"> <TextBox Text="{Binding Title}" Foreground="Black" Height="60" Width="200" Margin="15,0,15,0" FontWeight="SemiBold" FontFamily="Global User Interface" /> </DataTemplate>
Par défaut, votre ListView/GridView utilise le tempate de type Lecture pour ces éléments:
<GridView x:Name="itemGridView" AutomationProperties.AutomationId="ItemGridView" AutomationProperties.Name="Grouped Items" Grid.RowSpan="2" Padding="116,137,40,46" ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" SelectionMode="None" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick" ItemTemplate="{StaticResource ReadTemplate}" />
Du coup, pour changer de template “à la volée”, il suffit de changer la propriété ItemTemplate:
this.itemGridView.ItemTemplate = Application.Current.Resources["EditTemplate"] as DataTemplate;
Simple, mais rudement efficace :)
Happy coding!
Commentaires