Gridview Item dynamische Breite nach Bildschirmgröße in UWP

Question

Ich habe eine Gridview erstellt, die Daten durch Datenbindung erhält. Was ich als nächstes machen möchte ist, dass die Gridview-Item-Breite entsprechend der Bildschirmgröße dynamisch wird (Wie sie es in den Windows 10 News, Sport-App, etc. gemacht haben). Bisher habe ich es erfolgreich für minimale Fensterbreite 0 mit visual state manager getan, indem ich die horizontale Ausrichtung auf dehnen eingestellt habe, aber ich bin nicht in der Lage, dies für andere breitere Fenstergrößen fortzusetzen.

Jede Art von Hilfe zum Aussortieren wird geschätzt. Vielen Dank.

Answer 1

Wenn Sie die Einzelteile wünschen, strecken den horizontalen Raum zu füllen und der Lage sein, festzulegen, wie viele Elemente pro Zeile, die Sie wollen, dann werden Sie die ItemWidth der ItemsWrapGrid manuell innerhalb des Sizechanged-Ereignis des Gridview setzen müssen.

Hier ist ein Beispiel:

<GridView x:Name="gridView" SizeChanged="onGridViewSizeChanged"> 
    <GridView.ItemTemplate> 
     <DataTemplate> 
      <Grid Background="GreenYellow" BorderBrush="Black" BorderThickness="2"> 
       <TextBlock Text="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="40"/> 
      </Grid> 
     </DataTemplate> 
    </GridView.ItemTemplate> 

    <GridView.ItemContainerStyle> 
     <Style TargetType="GridViewItem"> 
      <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
      <Setter Property="VerticalContentAlignment" Value="Stretch"/> 
      <Setter Property="Margin" Value="0"/> 
     </Style> 
    </GridView.ItemContainerStyle> 

    <GridView.ItemsPanel> 
     <ItemsPanelTemplate> 
      <ItemsWrapGrid Orientation="Horizontal"/> 
     </ItemsPanelTemplate> 
    </GridView.ItemsPanel> 

    <x:String>1</x:String> 
    <x:String>2</x:String> 
    <x:String>3</x:String> 
    <x:String>4</x:String> 
    <x:String>5</x:String> 
    <x:String>6</x:String> 
    <x:String>7</x:String> 
    <x:String>8</x:String> 
</GridView> 

private void onGridViewSizeChanged(object sender, SizeChangedEventArgs e) 
{ 
    // Here I'm calculating the number of columns I want based on 
    // the width of the page 
    var columns = Math.Ceiling(ActualWidth/300); 
    ((ItemsWrapGrid)gridView.ItemsPanelRoot).ItemWidth = e.NewSize.Width/columns; 
} 

Sie könnten wahrscheinlich diese in ein Verhalten bündeln oder angefügten Eigenschaft zu.