如何在Xamarin Forms XAML中获取可用屏幕尺寸实现响应式TranslationY

没问题！完全可以通过动态获取屏幕可用高度并按比例计算TranslationY来解决键盘遮挡问题，同时让你的控制中心保持响应式适配不同设备。下面是具体的实现步骤和修改后的代码：

核心思路 #

我们需要：

• 动态获取屏幕的可用高度（键盘弹出时会自动缩减这个高度）
• 根据屏幕可用高度和控制中心的实际高度，计算出合适的TranslationY值，让控制中心始终贴在屏幕底部（或按你想要的比例定位）
• 监听键盘的显示/隐藏事件，实时更新控制中心的位置

步骤1：修改XAML代码 #

首先给你的控制中心（PancakeView）添加一个命名，方便后台代码引用，并移除固定的TranslationY值：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:d="http://xamarin.com/schemas/2014/forms/design" 
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:map="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps" 
             xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView" 
             mc:Ignorable="d" 
             x:Class="GreenPath.MainPage">
    <Grid>
        <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <map:Map MapType="Street" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
        </StackLayout>
        <!-- 给PancakeView添加命名并移除固定TranslationY -->
        <yummy:PancakeView x:Name="ControlPanel" 
                           CornerRadius="25,25,0,0" 
                           Opacity="0.8" 
                           HorizontalOptions="FillAndExpand" 
                           BackgroundColor="White">
            <StackLayout VerticalOptions="FillAndExpand" Orientation="Vertical" Margin="5">
                <Image Source="down.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1"/>
                <Label Text="X" TextColor="#3E454F" FontSize="40" FontFamily="segoeui.ttf" Margin="10,0"/>
                <SearchBar FontFamily="segoeui.ttf" 
                           Text="X" 
                           VerticalTextAlignment="Center" 
                           VerticalOptions="Fill" 
                           HorizontalTextAlignment="Start" 
                           IsReadOnly="True" 
                           HorizontalOptions="Fill" 
                           SearchButtonPressed="SearchBar_SearchButtonPressed" 
                           PlaceholderColor="#3E454F" 
                           TextColor="#3E454F" 
                           CancelButtonColor="#3E454F" 
                           Visual="Material" 
                           Keyboard="Default" 
                           Placeholder="Search a location" 
                           IsEnabled="True"/>
                <Label Text="X" FontFamily="segoeui.ttf" FontSize="25" VerticalOptions="Center" TextColor="#3E454F" Margin="10,0"/>
                <Grid Grid.Row="1" ColumnSpacing="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="0" />
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="1" />
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="2" />
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="3" />
                    <!-- 注意：原代码中Grid只有4列（索引0-3），Grid.Column="4"会导致控件无法显示，已注释 -->
                    <!-- <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="4" /> -->
                </Grid>
            </StackLayout>
        </yummy:PancakeView>
    </Grid>
</ContentPage>

步骤2：后台代码实现动态位置计算 #

在MainPage.xaml.cs中添加代码，实现屏幕高度获取、键盘事件监听和位置更新逻辑：

using Xamarin.Forms;
using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.AndroidSpecific;

namespace GreenPath
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            
            // 针对Android设置窗口调整模式，确保键盘弹出时页面会重新布局
            On<Android>().WindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);
            
            // 初始化控制中心位置
            UpdateControlPanelPosition();
            
            // 监听键盘高度变化（适配iOS）
            SetupKeyboardListener();
        }

        private void UpdateControlPanelPosition(double keyboardHeight = 0)
        {
            // 获取屏幕物理高度并转换为逻辑像素
            var screenDensity = DeviceDisplay.MainDisplayInfo.Density;
            var totalScreenHeight = DeviceDisplay.MainDisplayInfo.Height / screenDensity;
            
            // 计算当前可用高度（减去键盘高度）
            var availableHeight = totalScreenHeight - keyboardHeight;
            
            // 等待控制中心布局完成后获取其实际高度
            ControlPanel.SizeChanged += OnControlPanelSizeChanged;
            
            void OnControlPanelSizeChanged(object sender, System.EventArgs e)
            {
                if (ControlPanel.Height <= 0) return;
                
                // 方案1：让控制中心底部贴紧屏幕底部（推荐，自动避开键盘）
                ControlPanel.TranslationY = availableHeight - ControlPanel.Height;
                
                // 方案2：按比例定位，比如控制中心占据屏幕1/3高度，顶部在屏幕2/3位置
                // ControlPanel.TranslationY = availableHeight - (availableHeight / 3);
                
                // 移除事件监听，避免重复触发
                ControlPanel.SizeChanged -= OnControlPanelSizeChanged;
            }
        }

        private void SetupKeyboardListener()
        {
            // 针对iOS使用依赖服务监听键盘事件
            if (Device.RuntimePlatform == Device.iOS)
            {
                var keyboardHelper = DependencyService.Get<IKeyboardHelper>();
                keyboardHelper?.KeyboardHeightChanged += (s, height) =>
                {
                    UpdateControlPanelPosition(height);
                };
            }
            // Android通过页面布局变化自动触发更新（因为我们设置了Resize模式）
            else if (Device.RuntimePlatform == Device.Android)
            {
                SizeChanged += (s, e) =>
                {
                    UpdateControlPanelPosition();
                };
            }
        }

        private void SearchBar_SearchButtonPressed(object sender, System.EventArgs e)
        {
            // 保留你原有的搜索逻辑
        }
    }

    // 共享项目中定义键盘监听接口
    public interface IKeyboardHelper
    {
        event System.EventHandler<double> KeyboardHeightChanged;
    }
}

步骤3：iOS平台的键盘监听实现 #

在iOS项目中添加依赖服务实现，用于监听键盘高度变化：

using Foundation;
using UIKit;
using Xamarin.Forms;

[assembly: Dependency(typeof(GreenPath.iOS.KeyboardHelper))]
namespace GreenPath.iOS
{
    public class KeyboardHelper : IKeyboardHelper
    {
        public event System.EventHandler<double> KeyboardHeightChanged;

        public KeyboardHelper()
        {
            // 监听键盘显示事件
            UIKeyboard.Notifications.ObserveWillShow((sender, args) =>
            {
                var keyboardHeight = args.FrameEnd.Height;
                KeyboardHeightChanged?.Invoke(this, keyboardHeight);
            });

            // 监听键盘隐藏事件
            UIKeyboard.Notifications.ObserveWillHide((sender, args) =>
            {
                KeyboardHeightChanged?.Invoke(this, 0);
            });
        }
    }
}

额外提示 #

• 你可以根据需求调整UpdateControlPanelPosition中的计算逻辑，设置不同比例来控制控制中心的显示位置。
• 原代码中Grid的列数与控件索引不匹配的问题已标注，记得根据实际需求修正。

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