如何从 Xamarin Forms 在 a.xaml 文件中获取跨平台应用程序中的可用屏幕尺寸值？

Question

In the app that I am developing I want to have a relative TranslationY value in order to have a responsive control center on my app that does not cover up the whole screen and can be used while typing on it. So I wrote the code below but TranslationY value is not relative and while typing the keyboard covers the control center. Is there a way to get the number of available height of the screen and give a ratio to 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:pan ="http://xamarin.com/schemas/2014/forms"  
             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>
        <yummy:PancakeView CornerRadius="25,25,0,0" Opacity="0.8" HorizontalOptions="FillAndExpand" BackgroundColor="White" TranslationY="550">
            <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" />
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="4" />
                </Grid>
            </StackLayout>
        </yummy:PancakeView>

    </Grid>

</ContentPage>

Answer 1

From backend you can override the OnSizeAllocated Method.

    protected override void OnSizeAllocated(double width, double height)
    {
        base.OnSizeAllocated(width, height);
    }

You can get width and height from this method then you can assign the percent height to any of your component.

Answer 2

In app.xaml.cs

set:

public static double DeviceWidth, DeviceHeight;

For Android:

 #region For screen Height & Width  
 var pixels = Resources.DisplayMetrics.WidthPixels;
 var scale = Resources.DisplayMetrics.Density;
 var dps = (double)((pixels - 0.5f) / scale);
 var ScreenWidth = (int)dps;
 App.DeviceWidth = ScreenWidth;
 pixels = Resources.DisplayMetrics.HeightPixels;
 dps = (double)((pixels - 0.5f) / scale);
 var ScreenHeight = (int)dps;
 App.DeviceHeight = ScreenHeight;
 #endregion

for iOS:

 #region For Screen Height & Width
  App.DeviceWidth = (int)UIScreen.MainScreen.Bounds.Width;
  App.DeviceHeight = (int)UIScreen.MainScreen.Bounds.Height;
  #endregion

So you can use in your xaml like this:

double _deviceWidth = App.DeviceWidth;

Answer 3

You can get the device screen info by using Xamarin.Essentials: Device Display Information :

Give a name to yummy:PancakeView :

<yummy:PancakeView x:Name="pancakeView" CornerRadius="25,25,0,0" Opacity="0.8" HorizontalOptions="FillAndExpand" BackgroundColor="White" TranslationY="550">

In code behind, set the ratio:

public MainPage()
{
    InitializeComponent();

    var mainDisplayInfo = DeviceDisplay.MainDisplayInfo;
    // Width (in pixels)
    var width = mainDisplayInfo.Width;
    // Height (in pixels)
    var height = mainDisplayInfo.Height;
    // Screen density
    var density = mainDisplayInfo.Density;

    var screenW = 0;
    var screenH =0;

    if (density != 0)
    {
         screenW = (int)(width / density);
         screenH = (int)(height / density);
    }

    pancakeView.TranslationY = 550 * 550 / screenH;
}