UWP ListView mit reaktiven Spalten

Question

Ich habe Google untersucht, UWP-Samples ausgecheckt, konnte aber keine Lösung für dieses Problem finden. Grundsätzlich möchte ich eine Listenansicht mit automatisch skalierenden Rasterspalten. Zum Beispiel haben Sie Groove Music Songs View. Ich möchte ein solches Verhalten implementieren.

Wenn Sie die Größe von Groove ändern, passt sich der Listenansicht an die Größe an, indem die Spalten erweitert, kontrahiert oder ausgeblendet werden. Ich kann den versteckten Teil mit VisualStates und AdaptiveTrigger handhaben, aber ich kann nicht herausfinden, wie man mit der Ausdehnung/Kontraktion des Gitters umgeht.

Eine andere Sache zu beachten ist, dass die Elemente alle einheitlich mit der gleichen Breite für jede TextBox sind. Sie erscheinen nicht unscharf und ohne Muster, wenn der Name eines Liedes durch Zufall länger als üblich ist.

Ich habe diese Datatemplate:

 <DataTemplate x:Key="MediafileUnselectedTemplate">    
      <Grid Height="50"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="Auto"/> 
        <ColumnDefinition Width="Auto"/> 
        <ColumnDefinition Width="Auto"/> 
        <ColumnDefinition Width="Auto"/> 
        <ColumnDefinition Width="Auto"/> 
        <ColumnDefinition Width="Auto"/> 
       </Grid.ColumnDefinitions> 
       <TextBlock x:Name="titleTxt" Grid.Column="0" Width="400"  TextWrapping="NoWrap" TextTrimming="Clip" Text="{Binding Title}" VerticalAlignment="Center"/> 
       <TextBlock x:Name="artistTxt" Grid.Column="1" Width="200" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding LeadArtist}" VerticalAlignment="Center"/> 
       <TextBlock x:Name="albumTxt" Grid.Column="2" Width="200" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Album}" VerticalAlignment="Center"/> 
       <TextBlock x:Name="yearTxt" Grid.Column="3" Width="100" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Year}" VerticalAlignment="Center"/> 
       <TextBlock x:Name="genreTxt" Grid.Column="4" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Genre}" VerticalAlignment="Center"/> 
       <TextBlock x:Name="durationTxt" Grid.Column="5" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Length}" VerticalAlignment="Center"/> 
      </Grid> 
     </DataTemplate> 

Was ich verwalten kann: ich MinWidths einstellen oder einfach nur Widths sie alle einheitlich zu setzen, aber dann verlieren sie ihre Anpassungsfähigkeit und die Größe einfach nicht nach der Seite.

Jede Hilfe wird geschätzt! Vielen Dank im Voraus!

Answer 1

Ich sehe in Ihrer DataTemplate explizite Breite für Ihre TextBlocks. Da wird WPF diese Breite beibehalten, auch wenn Sie die Größe Ihres Container-Steuerelements ändern.

1. Anstatt die Breite der ColumnDefinitions auf Auto zu setzen, setzen Sie sie auf "*".
2. Entfernen Sie das Breitenattribut von TextBlock.
3. Entfernen Sie alle Trigger, die Width für diese Steuerelemente festlegen.

Dadurch werden alle Ihre Spalten auf die gleiche Größe eingestellt und die Größe entsprechend Ihrer Containergröße angepasst.

Answer 2

 <Grid Height="50"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="400*"/> 
      <ColumnDefinition Width="200*"/> 
      <ColumnDefinition Width="200*"/> 
      <ColumnDefinition Width="100*"/> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="Auto"/> 
     </Grid.ColumnDefinitions> 
     <TextBlock x:Name="titleTxt" Grid.Column="0"  TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Text="{Binding Title}" VerticalAlignment="Center"/> 
     <TextBlock x:Name="artistTxt" Grid.Column="1" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding LeadArtist}" VerticalAlignment="Center"/> 
     <TextBlock x:Name="albumTxt" Grid.Column="2" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Album}" VerticalAlignment="Center"/> 
     <TextBlock x:Name="yearTxt" Grid.Column="3" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Year}" VerticalAlignment="Center"/> 
     <TextBlock x:Name="genreTxt" Grid.Column="4" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Genre}" VerticalAlignment="Center"/> 
     <TextBlock x:Name="durationTxt" Grid.Column="5" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Length}" VerticalAlignment="Center"/> 
    </Grid> 

Answer 3

Sie könnten VisualStateManager Verwenden Sie die Textbreite einzeln auf einem VisualState Basis zu ändern, zum Beispiel, das ich ändern titleTxt ‚s und artistTxt‘ s Breite auf der Grundlage der MinWindowWidth:

<UserControl> 
     <Grid Height="50" x:Name="myGrid"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="Auto"/> 
         <ColumnDefinition Width="Auto"/> 
         <ColumnDefinition Width="Auto"/> 
         <ColumnDefinition Width="Auto"/> 
         <ColumnDefinition Width="Auto"/> 
         <ColumnDefinition Width="Auto"/> 
        </Grid.ColumnDefinitions> 

        <Grid.Resources> 
         <x:Double x:Key="NarrowMinWidth">0</x:Double> 
         <x:Double x:Key="NormalMinWidth">521</x:Double> 
         <x:Double x:Key="WideMinWidth">1200</x:Double> 
        </Grid.Resources> 

        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="AdaptiveVisualStateGroup"> 
          <VisualState x:Name="VisualStateNarrow"> 
           <VisualState.StateTriggers> 
            <AdaptiveTrigger MinWindowWidth="{StaticResource NarrowMinWidth}" /> 
           </VisualState.StateTriggers> 
           <VisualState.Setters> 
            <Setter Target="titleTxt.Width" Value="100"/> 
            <Setter Target="artistTxt.Width" Value="100"/> 

           </VisualState.Setters> 
          </VisualState> 
          <VisualState x:Name="VisualStateNormal"> 
           <VisualState.StateTriggers> 
            <AdaptiveTrigger MinWindowWidth="{StaticResource NormalMinWidth}" /> 
           </VisualState.StateTriggers> 
           <VisualState.Setters> 
            <Setter Target="titleTxt.Width" Value="200"/> 
            <Setter Target="artistTxt.Width" Value="100"/> 

           </VisualState.Setters> 
          </VisualState> 
          <VisualState x:Name="VisualStateWide"> 
           <VisualState.StateTriggers> 
            <AdaptiveTrigger MinWindowWidth="{StaticResource WideMinWidth}" /> 
           </VisualState.StateTriggers> 
           <VisualState.Setters> 
            <Setter Target="titleTxt.Width" Value="400"/> 
            <Setter Target="artistTxt.Width" Value="200"/> 

           </VisualState.Setters> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 

        <TextBlock x:Name="titleTxt" Grid.Column="0" TextWrapping="NoWrap" TextTrimming="Clip" Text="{Binding Title}" VerticalAlignment="Center"/> 
        <TextBlock x:Name="artistTxt" Grid.Column="1" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Artist}" VerticalAlignment="Center"/> 
        <TextBlock x:Name="albumTxt" Grid.Column="2" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Album}" VerticalAlignment="Center"/> 
        <TextBlock x:Name="yearTxt" Grid.Column="3" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Year}" VerticalAlignment="Center"/> 
        <TextBlock x:Name="genreTxt" Grid.Column="4" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Genre}" VerticalAlignment="Center"/> 
        <TextBlock x:Name="durationTxt" Grid.Column="5" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Duration}" VerticalAlignment="Center"/> 
       </Grid> 
</UserControl>