BladeZ
BladeZ

Reputation: 217

How to get screen size from C# code to XAML?

I know how I can get screen dimensions from code. But how can I pass those numbers to XAML so that I can draw the screen correctly? I am trying to make a basic grid that has 3 rows. The middle one's height should be same as device screen width. What I have now is:

<Grid BackgroundColor="Black">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="I DONT KNOW WHAT TO PUT HERE :S" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid Grid.Row="1" BackgroundColor="Blue" Margin="10" />
</Grid>

To me this seems like a really basic thing, but I can't find any examples on how to do this.

Upvotes: 4

Views: 1891

Answers (1)

nevermore
nevermore

Reputation: 15816

You can get the device info by Xamarin.Essentials: Device Display Information, create a struct called Constant and define the ScreenWidth and ScreenHeight there.

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        // Get Metrics
        var mainDisplayInfo = DeviceDisplay.MainDisplayInfo;

        // Orientation (Landscape, Portrait, Square, Unknown)
        var orientation = mainDisplayInfo.Orientation;

        // Rotation (0, 90, 180, 270)
        var rotation = mainDisplayInfo.Rotation;

        // Width (in pixels)
        var width = mainDisplayInfo.Width;

        // Height (in pixels)
        var height = mainDisplayInfo.Height;

        // Screen density
        var density = mainDisplayInfo.Density;

    }
}

public struct Constant
{
    public static double ScreenWidth = DeviceDisplay.MainDisplayInfo.Width / DeviceDisplay.MainDisplayInfo.Density;
    public static double ScreenHeight = DeviceDisplay.MainDisplayInfo.Height / DeviceDisplay.MainDisplayInfo.Density;
}

Use it in xaml:

<?xml version="1.0" encoding="utf-8" ?>
<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"
             mc:Ignorable="d"
             xmlns:local="clr-namespace:App105"
             x:Class="App105.MainPage">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="{Binding Source={x:Static local:Constant.ScreenWidth}}" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Label Text="Top Left" BackgroundColor="Red" Grid.Row="0" Grid.Column="0" />
        <Label Text="Top Right" BackgroundColor="Blue" Grid.Row="0" Grid.Column="1" />
        <Label Text="middle Left" BackgroundColor="Green" Grid.Row="1" Grid.Column="0" />
        <Label Text="middle Right" BackgroundColor="Yellow" Grid.Row="1" Grid.Column="1" />
        <Label Text="Bottom Left" BackgroundColor="Orange" Grid.Row="2" Grid.Column="0" />
        <Label Text="Bottom Righ" BackgroundColor="Pink" Grid.Row="2" Grid.Column="1" />
    </Grid>

</ContentPage>

Upvotes: 6

Related Questions