Loupe

[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;

 

image image

Simple, mais rudement efficace :)

 

Happy coding!

Ces billets pourraient aussi vous intéresser

Vous nous direz ?!

Commentaires

comments powered by Disqus