Reputation: 217
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
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