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

Question

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

网格项目未垂直显示。它在 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>

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

Answer 1

Grid Items not shows vertically. It shows horizontally

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

Scrolling is disabled

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

<GridView 
    ScrollViewer.HorizontalScrollMode="Enabled"

更新

要获得预期的效果，您需要设置 Orientation="Vertical"

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

Answer 2

您应该使用 ItemsStackPanel 而不是 WrapGrid。请查看此了解更多详情。

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

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

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

Items in Gridview doesn't shows vertically with scrolling

c#

gridview

uwp