Wie füllt man einen ListView mit zusammengesetzten UI-Elementen?

Question

Ich habe eine Listview wie folgt aus:

<ListView x:Name="Thumbnails" HorizontalContentAlignment ="Center" VerticalContentAlignment="Top" Padding="0" Background ="#81AFD3" Grid.Row="6" Grid.Column="6" Grid.ColumnSpan="10" Grid.RowSpan="27" ScrollViewer.VerticalScrollBarVisibility="Visible">  
    <ListView.ItemContainerStyle> 
     <Style TargetType="{x:Type ListViewItem}"> 
      <Style.Triggers> 
       <Trigger Property="IsMouseOver" Value="True"> 
        <Setter Property="IsSelected" Value="True"/> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </ListView.ItemContainerStyle> 
</ListView> 

Nun, ich würde es mit 5 Elementen füllen möchten. Jedes Element ist ein Grid, das ein Bild und zwei Schaltflächen enthält. So definiert ich dieses Gitter in UserControl.Resources wie folgt aus:

</UserControl.Resources> 
    <Grid x:Key="ThumbnailElement"> 

     <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" Source="/Assets/ImportAssets/Test.jpg"></Image> 

     <Button Name="slide_ON_OFF" Grid.Row="0" Grid.Column="10" Grid.ColumnSpan="4" Grid.RowSpan="4"> 
      <Button.Template> 
       <ControlTemplate> 
         <Grid RenderTransformOrigin="0.5,0.5" x:Name="bg"> 
         <Image Source="/MS_Show_Assets/ImportAssets/Visible_ON.png"/> 
         </Grid> 
        </ControlTemplate> 
       </Button.Template> 
     </Button> 

     <Button Name="fadein_ON_OFF" Grid.Row="3" Grid.Column="10" Grid.ColumnSpan="4" Grid.RowSpan="4"> 
      <Button.Template> 
       <ControlTemplate> 
        <Grid RenderTransformOrigin="0.5,0.5" x:Name="bg"> 
         <Image x:Name ="main_image" Source="/MS_Show_Assets/ImportAssets/Bulletpoint_ON.png"/> 
        </Grid> 
       </ControlTemplate> 
      </Button.Template> 
     </Button> 

    </Grid> 
</UserControl.Resources> 

Wie würde ich das tun, und nur in XAML, ohne Code hinter der Verwendung?

Answer 1

Verwenden Sie ContentControl, um Ihre Ansichten zu tauschen. Beispiel:

<UserControl xmlns:Views="....View"> 
    <UserControl.Resources> 
     <ControlTemplate x:Key="DefultTemplate"> 
      <Views:DefultView/> 
     </ControlTemplate> 
    </UserControl.Resources> 

    <ListView x:Name="Thumbnails" HorizontalContentAlignment ="Center" VerticalContentAlignment="Top" Padding="0" Background ="#81AFD3" Grid.Row="6" Grid.Column="6" Grid.ColumnSpan="10" Grid.RowSpan="27" ScrollViewer.VerticalScrollBarVisibility="Visible"> 
     <ListView.ItemContainerStyle> 
      <Style TargetType="ContentControl"> 
       <Setter Property="Template" Value="{StaticResource DefultTemplate}" /> 
      </Style> 
     </ListView.ItemContainerStyle> 

     <ListItem Background="Red" Margin="5 5 5 5"/> 
     <ListItem Background="Red" Margin="5 5 5 5"/> 
     <ListItem Background="Red" Margin="5 5 5 5"/> 
     <ListItem Background="Red" Margin="5 5 5 5"/> 
     <ListItem Background="Red" Margin="5 5 5 5"/> 
     <ListItem Background="Red" Margin="5 5 5 5"/> 

    </ListView> 
</UserControl> 

DefultTemplate:

<UserControl ....> 
    <....> 
</UserControl> 

Wenn wir die Anzahl der Elemente jetzt nicht, können wir verwenden:

<ListView ItemsSource="{Binding SomeCollection}" x:Name="Thumbnails" HorizontalContentAlignment ="Center" VerticalContentAlignment="Top" Padding="0" Background ="#81AFD3" Grid.Row="6" Grid.Column="6" Grid.ColumnSpan="10" Grid.RowSpan="27" ScrollViewer.VerticalScrollBarVisibility="Visible"> 
    <ListView.ItemContainerStyle> 
     <Style TargetType="ContentControl"> 
      <Setter Property="Template" Value="{StaticResource DefultTemplate}" /> 
     </Style> 
    </ListView.ItemContainerStyle> 
</ListView>