2016-05-24 4 views
1

Ich habe eine Listview, die dyanmically von Elementen gefüllt wird, die aus einem Gitter bestehen, das ein Bild und eine Schaltfläche wie folgt gilt:Wie fügt man Elemente unterschiedlicher Struktur in das ListView ein?

<ListView x:Name="Thumbnails" HorizontalContentAlignment ="Left" VerticalContentAlignment="Top" Padding="0" Background ="#81AFD3" Grid.Row="6" Grid.Column="6" Grid.ColumnSpan="10" Grid.RowSpan="27" ScrollViewer.VerticalScrollBarVisibility="Visible" ItemsSource="{Binding ThumbModelList}" SelectedIndex="{Binding SelectedIndx}"> 
    <ListView.ItemTemplate> 
        <DataTemplate> 
         <ListViewItem> 

          <Grid Width="{Binding DataContext.ThumbnailWidth, RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}}" Height="{Binding DataContext.ThumbnailHeight, RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}}" HorizontalAlignment="Center" VerticalAlignment="Top" Background="Transparent" > 

           <Grid.RowDefinitions> 
            <RowDefinition Height="1*" /> 
            <RowDefinition Height="1*" /> 
            <RowDefinition Height="1*" /> 
            <RowDefinition Height="1*" /> 
            <RowDefinition Height="1*" /> 
            <RowDefinition Height="1*" /> 
            <RowDefinition Height="1*" /> 
           </Grid.RowDefinitions> 

           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="1*" /> 
            <ColumnDefinition Width="1*" /> 
            <ColumnDefinition Width="1*" /> 
            <ColumnDefinition Width="1*" /> 
            <ColumnDefinition Width="1*" /> 
            <ColumnDefinition Width="1*" /> 
            <ColumnDefinition Width="1*" /> 
            <ColumnDefinition Width="1*" /> 
            <ColumnDefinition Width="1*" /> 
            <ColumnDefinition Width="1*" /> 
            <ColumnDefinition Width="1*" /> 
            <ColumnDefinition Width="1*" /> 
            <ColumnDefinition Width="1*" /> 
            <ColumnDefinition Width="1*" /> 
           </Grid.ColumnDefinitions> 

           <Image Name="thumbImage" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="14" Grid.RowSpan="7" Stretch="UniformToFill" Source="{Binding MainThumbImagePath}"></Image> 

           <Button Name="slide_ON_OFF" Grid.Row="0" Grid.Column="10" Grid.ColumnSpan="4" Grid.RowSpan="4" VerticalAlignment="Center" Background="Transparent" Command="{Binding DataContext.SlideOnOffCommand, RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}}"> 
            <Image Source="{Binding SomePath}"/> 
           </Button> 

          </Grid> 
         </ListViewItem> 
        </DataTemplate> 
       </ListView.ItemTemplate> 

      </ListView> 


     now, once the list is populated dynamically with those items, at certain positions, I want to insert a diffrerent item that has three different buttons like this: 

    <Grid Width="{Binding DataContext.ThumbnailWidth, RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}}" Height="{Binding DataContext.ThumbnailHeight, RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}}" HorizontalAlignment="Center" VerticalAlignment="Top" Background="Transparent" > 

         <Grid.RowDefinitions> 
          <RowDefinition Height="1*" /> 
          <RowDefinition Height="1*" /> 
          <RowDefinition Height="1*" /> 
          <RowDefinition Height="1*" /> 
          <RowDefinition Height="1*" /> 
          <RowDefinition Height="1*" /> 
          <RowDefinition Height="1*" /> 
         </Grid.RowDefinitions> 

         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="1*" /> 
          <ColumnDefinition Width="1*" /> 
          <ColumnDefinition Width="1*" /> 
          <ColumnDefinition Width="1*" /> 
          <ColumnDefinition Width="1*" /> 
          <ColumnDefinition Width="1*" /> 
          <ColumnDefinition Width="1*" /> 
          <ColumnDefinition Width="1*" /> 
          <ColumnDefinition Width="1*" /> 
          <ColumnDefinition Width="1*" /> 
          <ColumnDefinition Width="1*" /> 
          <ColumnDefinition Width="1*" /> 
          <ColumnDefinition Width="1*" /> 
          <ColumnDefinition Width="1*" /> 
         </Grid.ColumnDefinitions> 


         <Button Name="slide_ON_OFF" Grid.Row="0" Grid.Column="10" Grid.ColumnSpan="4" Grid.RowSpan="4" VerticalAlignment="Center" Background="Transparent" Command="{Binding DataContext.Command1, RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}}"/> 
         <Button Name="slide_ON_OFF" Grid.Row="0" Grid.Column="10" Grid.ColumnSpan="4" Grid.RowSpan="4" VerticalAlignment="Center" Background="Transparent" Command="{Binding DataContext.Command2, RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}}"/> 
         <Button Name="slide_ON_OFF" Grid.Row="0" Grid.Column="10" Grid.ColumnSpan="4" Grid.RowSpan="4" VerticalAlignment="Center" Background="Transparent" Command="{Binding DataContext.Command3, RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}}"/> 
    </Grid> 

Ist dies möglich zu machen, und wo und wie dieses andere Listenelement zu erklären in XAML?

+1

Sie sollten eine verwenden Datenvorlage für jeden Datentyp – ZSH

+0

Ok, aber wie wird der zu befüllende Datentyp initialisiert? Ich möchte zuerst, dass die Liste durch 'DataType1' durch eine Schleife gefüllt wird und danach möchte ich 'Datatype2' bei einer Benutzeraktion manuell einfügen. – Ivan

+1

Der ThumbModelList-Typ sollte eine Basistyp-Liste für Elementtyp1 und Elementtyp2 sein (z. B. ObserbableCollection ). Wenn Sie jetzt ein Element vom Typ1 oder vom Typ2 hinzufügen, verfügt er über das entsprechende Dataplate wie in meinem Beispiel in der Antwort unten – ZSH

Antwort

1

Sie Datatemplates über Datentyp oder eine Vorlage Selektor verwenden können, hier ist ein Beispiel für den Datentyp: Example

dies ist ein einfacher, es hängt auch von Ihren Daten/Datacontext

Verwandte Themen