how to fix resolution in application?
Question
I wanted to know how the application can be displayed one size on all devices?
Because when I test my app on small devices, all the elements are either too big or do not fit on the screen.
What should be done to solve this problem?
I used StackLayout to arrange the elements.
This is one of my codes:
<StackLayout Orientation="Vertical" Margin="10" Padding="10" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Text="WellCome to App" TextColor="Aquamarine" FontSize="40" FontAttributes="Bold,Italic"
HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
<Label Text="Please select the topic you want:" FontSize="21" FontAttributes="Bold,Italic"
HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" TextColor="DarkRed"/>
<Grid ColumnSpacing="0" RowSpacing="0" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="120"/>
<RowDefinition Height="120"/>
<RowDefinition Height="120"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<Button Text="Space" TextColor="White" FontSize="Large"
BackgroundColor="Black"
HeightRequest="140"
WidthRequest="140"
CornerRadius="60"
HorizontalOptions="Center"
BorderWidth="1"
BorderColor="Silver"
Clicked="spaceButton_OnClicked">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Scale"
Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Property="Scale"
Value="0.8" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Button>
<Button Text="Sports" FontSize="Large" Grid.Column="2"
TextColor="White" BackgroundColor="Black"
HeightRequest="140"
WidthRequest="140"
CornerRadius="60"
HorizontalOptions="Center"
BorderWidth="1"
BorderColor="Silver"
Clicked="sportButton_OnClicked">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStatess">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Scale"
Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Property="Scale"
Value="0.8" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Button>
<Button Text="Game" FontSize="Large" Grid.Row="1" Grid.Column="1"
TextColor="White" BackgroundColor="Black"
HeightRequest="140"
WidthRequest="140"
CornerRadius="60"
HorizontalOptions="Center"
BorderWidth="1"
BorderColor="Silver"
Clicked="gameButton_OnClicked">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStatesss">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Scale"
Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Property="Scale"
Value="0.8" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Button>
<Button Text="Technology" FontSize="12" Grid.Row="2" Grid.Column="0"
TextColor="White" BackgroundColor="Black"
HeightRequest="140"
WidthRequest="140"
CornerRadius="60"
HorizontalOptions="Center"
BorderWidth="1"
BorderColor="Silver"
Clicked="techButton_OnClicked">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStats">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Scale"
Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Property="Scale"
Value="0.8" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Button>
<Button Text="History" FontSize="20" Grid.Row="2" Grid.Column="2"
TextColor="White" BackgroundColor="Black"
HeightRequest="140"
WidthRequest="140"
CornerRadius="60"
HorizontalOptions="Center"
BorderWidth="1"
BorderColor="Silver"
Clicked="oldButton_OnClicked">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonSttes">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Scale"
Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Property="Scale"
Value="0.8" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Button>
</Grid
</StackLayout>
My code is displayed in this form:
1 answers
solution1
0 ACCPTED 2020-12-03 02:53:35
From shared code, the proportions of the elements are the same.Then you could set Star ( * ) for Height and Width , and set HorizontalOptions and VerticalOptions of Button be FillAndExpand to make the elements to fit all the sizes of device screen.
However, only setting this can not make the Height of Grid Item shows the same with Width:( Pixel 2 Pie 9.0 420dpi )
To solve this you could calcuate the Width and Height on runtime. From this discussion , you will know if the units of Width and Height set a specified value, it will show different effects in different device.
Luckly, we can get Screen Density easily by using Xamarin.Essentials . If you need a 120 units value and based on Pixel 2 Pie 9.0 420dpi (1080*1920) android device, you can set Height or Width as follows:
// this device screen density is 2.625, therefore divide by 2.625, if you test in other device, you could divide by its screen density.
Row.Height/Width = 120 * (mainDisplayInfo.Density / 2.625)
Then it will show correctly:
The full XML Code as follows:
<StackLayout Orientation="Vertical"
Margin="10"
Padding="10"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<Label Text="WellCome to App"
TextColor="Aquamarine"
FontSize="40"
FontAttributes="Bold,Italic"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand" />
<Label Text="Please select the topic you want:"
FontSize="21"
FontAttributes="Bold,Italic"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
TextColor="DarkRed" />
<Grid ColumnSpacing="0"
RowSpacing="0"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition x:Name="RowOne" Height="*" />
<RowDefinition x:Name="RowTwo" Height="*" />
<RowDefinition x:Name="RowThree" Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnOne" Width="*" />
<ColumnDefinition x:Name="ColumnTwo" Width="*" />
<ColumnDefinition x:Name="ColumnThree" Width="*" />
</Grid.ColumnDefinitions>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Button Text="Space"
TextColor="White"
FontSize="Large"
BackgroundColor="Black"
HorizontalOptions="FillAndExpand"
CornerRadius="60"
VerticalOptions="FillAndExpand"
BorderWidth="1"
BorderColor="Silver">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Scale"
Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Property="Scale"
Value="0.8" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Button>
</StackLayout>
<Button Text="Sports"
FontSize="Large"
Grid.Column="2"
TextColor="White"
BackgroundColor="Black"
VerticalOptions="FillAndExpand"
CornerRadius="60"
HorizontalOptions="FillAndExpand"
BorderWidth="1"
BorderColor="Silver">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStatess">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Scale"
Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Property="Scale"
Value="0.8" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Button>
<Button Text="Game"
FontSize="Large"
Grid.Row="1"
Grid.Column="1"
TextColor="White"
BackgroundColor="Black"
VerticalOptions="FillAndExpand"
CornerRadius="60"
HorizontalOptions="FillAndExpand"
BorderWidth="1"
BorderColor="Silver">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStatesss">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Scale"
Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Property="Scale"
Value="0.8" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Button>
<Button Text="Technology"
FontSize="12"
Grid.Row="2"
Grid.Column="0"
TextColor="White"
BackgroundColor="Black"
VerticalOptions="FillAndExpand"
CornerRadius="60"
HorizontalOptions="FillAndExpand"
BorderWidth="1"
BorderColor="Silver">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStats">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Scale"
Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Property="Scale"
Value="0.8" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Button>
<Button Text="History"
FontSize="20"
Grid.Row="2"
Grid.Column="2"
TextColor="White"
BackgroundColor="Black"
VerticalOptions="FillAndExpand"
CornerRadius="60"
HorizontalOptions="FillAndExpand"
BorderWidth="1"
BorderColor="Silver">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonSttes">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Scale"
Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Property="Scale"
Value="0.8" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Button>
</Grid>
</StackLayout>
And the ContentPage.cs :
public partial class PageTestGrid : ContentPage
{
public PageTestGrid()
{
InitializeComponent();
var mainDisplayInfo = DeviceDisplay.MainDisplayInfo;
var density = mainDisplayInfo.Density;
//if you want to set 120 as the Height of Grid
RowOne.Height = 120 * (mainDisplayInfo.Density / 2.625);
RowTwo.Height = 120 * (mainDisplayInfo.Density / 2.625);
RowThree.Height = 120 * (mainDisplayInfo.Density / 2.625);
ColumnOne.Width = 120 * (mainDisplayInfo.Density / 2.625);
ColumnTwo.Width = 120 * (mainDisplayInfo.Density / 2.625);
ColumnThree.Width = 120 * (mainDisplayInfo.Density / 2.625);
}
}
The effect on Phone H-dpi 4in Pie 9.0 H-dpi(480*800) :
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to fix blacksreen when changing resolution in Unity
how to change screen resolution when application launches?
How to get resolution of silverlight + XNA application
How to make .net winform application resolution friendly
how to fix button position when resolution is changed in unity after built
how to fix port for client application
How to fix OptimisticConcurrencyException in an MVC application
How to fix Server Error '/' Application?
How to develop win form application for the system with the resolution of 1080*1920
How to develop desktop application in wpf that looks correctly in all the system resolution?
Related Tags