Xamarin.Forms：如何创建每行占半屏的可滚动8行Grid

嘿，这个GridView的适配问题我之前也踩过坑，给你梳理下核心问题和解决办法：

为什么用*设置行高没有滚动效果？ #

当GridView被包裹在ScrollView里时，ScrollView在垂直方向的可用空间是“无限”的（因为它支持滚动）。此时用*作为行高，GridView会自动计算每行高度为自身总高度除以行数，而GridView的总高度会刚好容纳所有行，不会超过ScrollView的可视区域，自然就不会触发滚动了。我们需要的是让每行高度固定为屏幕高度的一半，这样8行总高度是4倍屏幕高度，超过可视区域后ScrollView就会自动滚动。

方案一：XAML+转换器（灵活适配屏幕变化） #

这种方式能自动监听屏幕尺寸变化，动态调整行高，完美适配不同分辨率。

1. 先写C#转换器代码

using Windows.UI.ViewManagement;
using Windows.UI.Xaml.Data;

public class HalfScreenHeightConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        // 获取当前窗口的可视高度（排除任务栏等系统元素）
        var screenHeight = ApplicationView.GetForCurrentView().VisibleBounds.Height;
        // 支持通过参数调整分割比例，这里默认除以2得到半屏高度
        if (double.TryParse(parameter?.ToString(), out double divider))
        {
            return screenHeight / divider;
        }
        return screenHeight / 2;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

2. 在XAML中引用并使用

首先在页面资源中声明转换器：

<Page.Resources>
    <local:HalfScreenHeightConverter x:Key="HalfScreenHeightConverter"/>
</Page.Resources>

然后配置ScrollView和GridView：

<ScrollView VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Auto">
    <GridView ItemsSource="{x:Bind YourItemList}"
              ItemTemplate="{StaticResource YourItemTemplate}">
        <!-- 配置每行的高度为半屏 -->
        <GridView.ItemContainerStyle>
            <Style TargetType="GridViewItem">
                <Setter Property="Height" 
                        Value="{Binding Converter={StaticResource HalfScreenHeightConverter}}"/>
                <!-- 移除默认内边距，让行占满高度 -->
                <Setter Property="Padding" Value="0"/>
                <Setter Property="Margin" Value="0"/>
            </Style>
        </GridView.ItemContainerStyle>
        <!-- 设置垂直排列的面板，确保每个Item是一行 -->
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
    </GridView>
</ScrollView>

方案二：代码绑定（更直观的逻辑） #

如果觉得转换器麻烦，可以直接在页面代码中计算半屏高度，通过绑定传递给XAML。

1. 页面C#代码（实现INotifyPropertyChanged）

using Windows.UI.ViewManagement;
using Windows.UI.Xaml.Navigation;
using System.ComponentModel;

public sealed partial class YourPage : Page, INotifyPropertyChanged
{
    public double HalfScreenHeight { get; set; }

    public YourPage()
    {
        this.InitializeComponent();
        this.DataContext = this;
    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        base.OnNavigatedTo(e);
        // 初始化半屏高度
        UpdateHalfScreenHeight();
        // 监听窗口尺寸变化，实时更新高度
        Window.Current.SizeChanged += (s, args) => UpdateHalfScreenHeight();
    }

    private void UpdateHalfScreenHeight()
    {
        HalfScreenHeight = ApplicationView.GetForCurrentView().VisibleBounds.Height / 2;
        NotifyPropertyChanged(nameof(HalfScreenHeight));
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. XAML中绑定高度

<ScrollView VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Auto">
    <GridView ItemsSource="{x:Bind YourItemList}"
              ItemTemplate="{StaticResource YourItemTemplate}">
        <GridView.ItemContainerStyle>
            <Style TargetType="GridViewItem">
                <Setter Property="Height" Value="{Binding HalfScreenHeight}"/>
                <Setter Property="Padding" Value="0"/>
                <Setter Property="Margin" Value="0"/>
            </Style>
        </GridView.ItemContainerStyle>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
    </GridView>
</ScrollView>

注意事项 #

• 如果是WPF项目，获取屏幕高度的方式改为SystemParameters.PrimaryScreenHeight，其他逻辑一致。
• 确保ScrollView的VerticalScrollMode设为Enabled，否则不会触发滚动。

内容的提问来源于stack exchange，提问作者kerds78