UWP 嵌套 ListView 无拉伸

Question

我试图将一个 ListView 嵌套到另一个 ListView 中，但问题是在第二个 ListView 中，我需要网格使用 window 的所有宽度，以便将其拆分为 3 个相同大小的列.但如您所见，它并没有那样做....我已经尝试了所有方法，关于如何让它工作有什么想法吗？

<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

您需要为 ListViewItem 设置 HorizontalAlignment="Stretch"，如下所示。

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

为ListViewItem模板中的控件设置HorizontalAlignment 属性不会对ListViewItem的布局生效。更新完成代码如下。

<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>

结果

UWP 嵌套 ListView 无拉伸

UWP Nested ListView no stretch

windows

xaml

listview

stretching

uwp