如何在应用程序中修复分辨率？
[英]how to fix resolution in application?
问题描述
我想知道应用程序如何在所有设备上以一种尺寸显示？
因为当我在小型设备上测试我的应用程序时，所有元素要么太大要么不适合屏幕。
应该怎样做才能解决这个问题？
我使用StackLayout来排列元素。
这是我的代码之一：
<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>
我的代码以这种形式显示：
1 个解决方案
解决方案1
0 已采纳 2020-12-03 02:53:35
从共享代码来看，元素的比例是相同的。那么您可以为Height和Width设置星号（ * ），并将Button的 Horizo HorizontalOptions和VerticalOptions设置为FillAndExpand以使元素适合所有设备屏幕尺寸。
但是，仅设置此项不能使Grid Item 的Height与宽度显示相同：( Pixel 2 Pie 9.0 420dpi )
要解决这个问题，您可以在运行时计算Width和Height 。 从这个讨论中，你会知道如果Width和Height的单位设置了一个指定的值，在不同的设备上会表现出不同的效果。
幸运的是，我们可以使用Xamarin.Essentials轻松获得屏幕密度。 如果您需要 120 个单位的值并且基于Pixel 2 Pie 9.0 420dpi (1080*1920) android 设备，您可以设置Height或Width如下：
// 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)
然后它会正确显示：
完整的XML代码如下：
<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>
和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);
}
}
Phone H-dpi 4in Pie 9.0 H-dpi(480*800)效果：
如何在MVC应用程序中修复OptimisticConcurrencyException
[英]How to fix OptimisticConcurrencyException in an MVC application
如何为1080*1920分辨率的系统开发win form应用
[英]How to develop win form application for the system with the resolution of 1080*1920
如何在WPF中开发在所有系统分辨率下都正确显示的桌面应用程序？
[英]How to develop desktop application in wpf that looks correctly in all the system resolution?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.