UWP Verschachtelte ListView keine Ausdehnung

Question

Ich versuche eine ListView in eine andere zu verschachteln, aber das Problem ist, dass ich in der zweiten ListView das Raster verwenden muss, um die gesamte Breite des Fensters in 3 gleich große Spalten zu teilen. Aber wie du siehst, tut es das nicht .... Ich habe schon alles versucht, irgendwelche Ideen, wie ich es zum Laufen bringen könnte.

<Grid Background="Pink"> 
    <ListView x:Name="MainListView" 
       ItemsSource="{x:Bind menu}" 
       HorizontalAlignment="Stretch" 
       Background="BlanchedAlmond" 
       HorizontalContentAlignment="Stretch"> 
     <ListView.ItemTemplate> 
      <DataTemplate x:DataType="data:MainCategories"> 
       <Grid Background="blue" HorizontalAlignment="Stretch" > 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto" /> 
         <RowDefinition Height="Auto" /> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="*" /> 
        </Grid.ColumnDefinitions> 
        <TextBlock Text="{x:Bind CategoryName}" 
           HorizontalAlignment="Stretch"         
           FontSize="25"         
           Foreground="Yellow" /> 
        <ListView x:Name="SubListView" 
           Grid.Row="1" 
           Background="YellowGreen" 
           HorizontalAlignment="Stretch" 
           HorizontalContentAlignment="Stretch" 
           ItemsSource="{x:Bind SubMenuItems}"> 
         <ListView.ItemTemplate> 
          <DataTemplate x:DataType="data:Dishes">                    
           <Grid HorizontalAlignment="Stretch"> 
            <Grid.ColumnDefinitions> 
             <ColumnDefinition Width="1*" /> 
             <ColumnDefinition Width="1*" /> 
             <ColumnDefinition Width="1*" /> 
            </Grid.ColumnDefinitions> 
            <TextBlock Foreground="Red" 
               Text="{x:Bind dishName}" 
               Grid.Column="0" 
               HorizontalAlignment="Center" /> 
            <TextBlock Foreground="Red" 
               Grid.Column="1" 
               HorizontalAlignment="Center" 
               Text="{x:Bind dishPrice}" /> 
            <TextBlock Foreground="Red" 
               Grid.Column="2" 
               HorizontalAlignment="Center" 
               Text="{x:Bind dishPrice}" /> 

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

app screenshot

public void FillMenu() 
    { 
     menu.Add(new MainCategories() { CategoryName = "tittle1" }); 
     menu[0].SubMenuItems.Add(new Dishes() { dishName = "dish1", dishPrice = 1 }); 
     menu[0].SubMenuItems.Add(new Dishes() { dishName = "dish2", dishPrice = 11 }); 
     menu[0].SubMenuItems.Add(new Dishes() { dishName = "dish3dish3dish3", dishPrice = 12 }); 
     menu.Add(new MainCategories() { CategoryName = "tittle2" }); 
     menu[1].SubMenuItems.Add(new Dishes() { dishName = "dishab", dishPrice = 13 }); 
     menu[1].SubMenuItems.Add(new Dishes() { dishName = "sishro", dishPrice = 14 }); 
    } 

Answer 1

Sie müssen die HorizontalAlignment="Stretch" für die ListViewItem wie folgt einzustellen.

<ListView.ItemContainerStyle> 
    <Style TargetType="ListViewItem"> 
     <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
    </Style> 
</ListView.ItemContainerStyle> 

Stellen Sie die HorizontalAlignment Eigenschaft für die Steuerelemente in ListViewItem Vorlage wird Auswirkungen für das Layout von ListViewItem nicht nehmen. Aktualisierter Abschlusscode wie folgt.

<Grid Background="Pink"> 
    <ListView x:Name="MainListView" 
      ItemsSource="{x:Bind menu}" 
      HorizontalAlignment="Stretch" 
      Background="BlanchedAlmond" 
      HorizontalContentAlignment="Stretch"> 
     <ListView.ItemContainerStyle> 
      <Style TargetType="ListViewItem"> 
       <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
      </Style> 
     </ListView.ItemContainerStyle> 
     <ListView.ItemTemplate> 
      <DataTemplate x:DataType="local:MainCategories"> 
       <Grid Background="blue" > 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto" /> 
         <RowDefinition Height="Auto" /> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="*" /> 
        </Grid.ColumnDefinitions> 
        <TextBlock Text="{x:Bind CategoryName}" 
          FontSize="25"         
          Foreground="Yellow" /> 
        <ListView x:Name="SubListView" 
          Grid.Row="1" 
          Background="YellowGreen" 
          ItemsSource="{x:Bind SubMenuItems}"> 
         <ListView.ItemContainerStyle> 
          <Style TargetType="ListViewItem"> 
           <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
          </Style> 
         </ListView.ItemContainerStyle> 
         <ListView.ItemTemplate> 
          <DataTemplate x:DataType="local:Dishes"> 
           <Grid HorizontalAlignment="Stretch"> 
            <Grid.ColumnDefinitions> 
             <ColumnDefinition Width="1*" /> 
             <ColumnDefinition Width="1*" /> 
             <ColumnDefinition Width="1*" /> 
            </Grid.ColumnDefinitions> 
            <TextBlock Foreground="Red" 
              Text="{x:Bind dishName}" 
              Grid.Column="0" 
              HorizontalAlignment="Center" /> 
            <TextBlock Foreground="Red" 
              Grid.Column="1" 
              HorizontalAlignment="Center" 
              Text="{x:Bind dishPrice}" /> 
            <TextBlock Foreground="Red" 
              Grid.Column="2" 
              HorizontalAlignment="Center" 
              Text="{x:Bind dishPrice}" /> 
           </Grid> 
          </DataTemplate> 
         </ListView.ItemTemplate> 
        </ListView> 
       </Grid> 
      </DataTemplate> 
     </ListView.ItemTemplate> 
    </ListView> 
</Grid> 

Und das Ergebnis