如何在應用程序中修復分辨率？
[英]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.