Comment faire pour que le premier élément d'un ListView xaml soit différent?

Question

Ceci est pour une application Windows universelle.

Pouvez-vous me dire comment modifier uniquement le premier élément d'un ListView? J'ai essayé d'utiliser un modèle d'en-tête, mais je n'ai pas pu déterminer comment le lier au premier élément de ma liste des étapes.

La seule différence entre le premier élément et les autres éléments est que la forme du premier bord sera droite. Le premier élément n'aura pas ce style: Data = "M0,0 10,0 10,30 0,30 10,15"

MISE À JOUR: Je l'ai fait en utilisant un sélecteur de modèle (DataTemplateSelector). Cela signifie que je dois donner à chaque article un numéro de position. De meilleures solutions très appréciées!

Voici mon XAML:

<Page 
    x:Class="CloserCrumbs.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:CloserCrumbs" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"> 

    <Page.DataContext> 
     <local:SuperVM /> 
    </Page.DataContext> 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <ListView ItemsSource="{Binding Steps}" SelectedItem="{Binding Steps.SelectedItem, Mode=TwoWay}" Height="40" FocusVisualPrimaryThickness="0" FocusVisualSecondaryThickness="0"> 
      <ListView.ItemsPanel> 
       <ItemsPanelTemplate> 
        <StackPanel Orientation="Horizontal" /> 
       </ItemsPanelTemplate> 
      </ListView.ItemsPanel> 

      <ListView.ItemTemplate> 
       <DataTemplate> 
        <StackPanel x:Name="t1" Orientation="Horizontal" Margin="-12" Height="30"> 

         <Grid Height="30"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition/> 
          </Grid.ColumnDefinitions> 
          <StackPanel Orientation="Horizontal" Margin="0,0,-7,0" Height="30" > 
           <Path Data="M0,0 10,0 10,30 0,30 10,15" Fill="#d0d0d0" /> 
           <Grid> 
            <Rectangle Fill="#d0d0d0" /> 
            <TextBlock Text="{Binding ShortDescription}" Margin="10,5" VerticalAlignment="Center" Foreground="White" MinWidth="60"/> 
           </Grid> 
           <Path Data="M0,0 10,15 0,30" Fill="#d0d0d0" /> 
          </StackPanel> 
         </Grid> 
        </StackPanel> 
       </DataTemplate> 
      </ListView.ItemTemplate> 
     </ListView> 
    </Grid> 
</Page> 

Answer 1

Votre meilleure option ici pour utiliser ici est DataTemplateSelector. Vous pouvez obtenir l'index de l'article auquel vous appliquez le modèle et lui appliquer un code DataTemplate spécifique.

Dans ce cas, vous avez besoin de 2 DataTemplates. D'abord sans la flèche (pour le premier objet) et la seconde pour tous les autres objets. Vous pouvez les ajouter au Page.Resources sur le Page. Donc, dans ce cas, c'est quelque chose comme ci-dessous.

<Page.Resources> 
    <DataTemplate x:Name="OtherItem"> 
     <StackPanel x:Name="t1" Orientation="Horizontal" Margin="-12" Height="30"> 
      <Grid Height="30"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition/> 
       </Grid.ColumnDefinitions> 
       <StackPanel Orientation="Horizontal" Margin="0,0,-7,0" Height="30" > 
        <Path Data="M0,0 10,0 10,30 0,30 10,15" Fill="#d0d0d0" /> 
        <Grid> 
         <Rectangle Fill="#d0d0d0" /> 
         <TextBlock Text="{Binding }" Margin="10,5" VerticalAlignment="Center" Foreground="White" MinWidth="60"/> 
        </Grid> 
        <Path Data="M0,0 10,15 0,30" Fill="#d0d0d0" /> 
       </StackPanel> 
      </Grid> 
     </StackPanel> 
    </DataTemplate> 
    <DataTemplate x:Name="FirstItem"> 
     <StackPanel x:Name="t1" Orientation="Horizontal" Margin="-12" Height="30"> 
      <Grid Height="30"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition/> 
       </Grid.ColumnDefinitions> 
       <StackPanel Orientation="Horizontal" Margin="0,0,-7,0" Height="30" > 
        <Grid> 
         <Rectangle Fill="#d0d0d0" /> 
         <TextBlock Text="{Binding }" Margin="10,5" VerticalAlignment="Center" Foreground="White" MinWidth="60"/> 
        </Grid> 
        <Path Data="M0,0 10,15 0,30" Fill="#d0d0d0" /> 
       </StackPanel> 
      </Grid> 
     </StackPanel> 
    </DataTemplate> 
</Page.Resources> 

Si vous remarquez que le FirstItemDataTemplate ne contient pas d'abord le chemin de la faire ressembler à une flèche de départ.

est Ci-dessous le code pour DataTemplateSelector

public class ItemsDataTemplateSelector : DataTemplateSelector 
{ 
    public DataTemplate FirstItem { get; set; } 
    public DataTemplate OtherItem { get; set; } 

    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container) 
    { 
     DataTemplate _returnTemplate = new DataTemplate(); 
     var itemsControl = ItemsControl.ItemsControlFromItemContainer(container); 
     _returnTemplate = (itemsControl.IndexFromContainer(container) == 0) ? FirstItem : OtherItem; 
     return _returnTemplate; 
    } 
} 

Dans le code ci-dessus, tout ce que je veux dire, est si l'indice est 0 puis appliquez FirstItemDataTemplate autre OtherItem.

Maintenant changez votre ListView comme ci-dessous.

<ListView x:Name="listView" VerticalAlignment="Top"> 
    <ListView.ItemsPanel> 
     <ItemsPanelTemplate> 
      <StackPanel Orientation="Horizontal" /> 
     </ItemsPanelTemplate> 
    </ListView.ItemsPanel> 
    <ListView.ItemTemplateSelector> 
     <local:ItemsDataTemplateSelector FirstItem="{StaticResource FirstItem}" 
             OtherItem="{StaticResource OtherItem}" /> 
    </ListView.ItemTemplateSelector> 
</ListView> 

Ici, je suis déléguant l'DataTemplates dans le sélecteur d'assigner FirstItem au premier élément dans la liste et d'autres obtiendrai OtherItem modèle.

Voici la sortie des données temporaires.

Hope this helps

Bonne chance.