Gridview 中的项目不会随着滚动而垂直显示答案

【问题标题】：Items in Gridview doesn't shows vertically with scrollingGridview 中的项目不会随着滚动而垂直显示
【发布时间】：2021-12-05 17:16:58
【问题描述】：

我想使用单选按钮选择选项一个接一个地垂直显示项目数。但是我的实现代码没有正确显示。我在这里遇到了两个问题：

网格项目不垂直显示。它在 3 个项目后水平显示
滚动被禁用

这是我的输出和预期输出：

这是我尝试过的代码：

<Grid Width="333"
      CornerRadius="26"
      HighContrastAdjustment="None"
      HorizontalAlignment="Stretch"
      VerticalAlignment="Center">
    <Grid Margin="24,10" HorizontalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="10"/>
            <RowDefinition Height="160"/>
            <RowDefinition Height="10"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>
        <RelativePanel MinHeight="30"
                       Margin="0,15">
            <TextBlock Text="{Binding SelectText, Mode=OneWay}"
                FontFamily="Segoe UI Regular"
                FontSize="15"
                FontWeight="SemiBold"/>

            <Button Name="btnClose" Width="28"
                        Height="28"
                        RelativePanel.AlignRightWithPanel="True"
                        Command="{Binding CancelButton_ClickRelayCommand, Mode=OneWay}" />
        </RelativePanel>

        <GridView x:Name="DayListView" Grid.Row="2"
              ItemsSource="{Binding Days, Mode=OneWay}"
              HorizontalAlignment="Left"
              IsTapEnabled="False">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <RadioButton Height="19" FontFamily="Segoe UI Regular" FontSize="10" Content="{Binding Name, Mode=OneWay}" GroupName="Day" Checked="RadioButton_Checked" IsChecked="{Binding IsChecked, Mode=TwoWay}"></RadioButton>
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation="Vertical"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
        </GridView>

        <StackPanel Orientation="Horizontal" Grid.Row="4" Padding="0">
            <TextBlock Text="+"
               HorizontalAlignment="Left"
               VerticalAlignment="Center"
               FontFamily="Segoe UI Regular"
               FontSize="20"
               FontWeight="SemiBold"
               Foreground="#00A53C"/>
            <Button x:Name="AddDayButton"
                IsTabStop="False"
                Padding="0"
                Margin="10,0,0,0"
                Background="Transparent"
                FontSize="12"
                HorizontalAlignment="Left"
                VerticalAlignment="Center"
                FontFamily="Segoe UI Regular"
                Content="{Binding AddDayText, Mode=OneWay}"
                Command="{Binding AddDayButtonClickRelayCommand, Mode=OneWay}"/>
        </StackPanel>
    </Grid>
</Grid>

我想在启用滚动的情况下垂直显示所有项目。请帮帮我

【问题讨论】：

您是否考虑过使用ListView 而不是GridView？你的预期结果让我想起了ListView，它默认是垂直的，默认情况下只显示 1 列项目。
@Batesias，感谢您的建议，但我在 Listview 上遇到了一些问题。这就是我想使用 gridview 的原因。

标签： c# gridview uwp

【解决方案1】：

您应该使用ItemsStackPanel 而不是WrapGrid。详情请查看answer。

我使用了您的布局并产生了与您预期完全相同的输出。这是我的示例代码：

<GridView x:Name="DayListView" Grid.Row="2"
              ItemsSource="{Binding Days, Mode=OneWay}"
              HorizontalAlignment="Left">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <RadioButton Height="19" Width="280" HorizontalAlignment="Left" FontFamily="Segoe UI Regular" FontSize="10" Content="{Binding Name, Mode=OneWay}" GroupName="Day" Checked="RadioButton_Checked" IsChecked="{Binding IsChecked, Mode=TwoWay}"></RadioButton>
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsStackPanel Orientation="Vertical" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
        </GridView>

【讨论】：

【解决方案2】：

网格项目不垂直显示。它水平显示

如果您设置了WrapGrid Orientation="Vertical"，它将水平放置项目并限制固定行数。从您的屏幕截图中得出行号为 3。

滚动被禁用

如果你设置了WrapGridOrientation="Vertical"，但是默认的滚动模式是垂直的，对于场景，你需要手动开启水平滚动模式。

<GridView 
    ScrollViewer.HorizontalScrollMode="Enabled"

更新

要获得期望的，您需要设置 Orientation="Vertical"

<GridView.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapGrid ItemWidth="80" Orientation="Horizontal" />
    </ItemsPanelTemplate>
</GridView.ItemsPanel>

【讨论】：