如何修复应用程序中的分辨率？答案

【问题标题】：how to fix resolution in application?如何修复应用程序中的分辨率？
【发布时间】：2021-03-14 07:40:04
【问题描述】：

我想知道如何在所有设备上以一种尺寸显示应用程序？

因为当我在小型设备上测试我的应用时，所有元素要么太大，要么不适合屏幕。

应该怎么做才能解决这个问题？

我使用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>

我的代码以这种形式显示：

【问题讨论】：

您能说得更具体些吗？包括一些代码，包括一些澄清问题的屏幕截图
我添加了照片和代码

标签： c# xaml xamarin.forms

【解决方案1】：

从共享代码中，元素的比例是相同的。那么你可以为Height和Width设置Star(*)，并设置HorizontalOptions和@987654333 @ of Button 是 FillAndExpand 以使元素适合设备屏幕的所有尺寸。

但是，仅设置此项并不能使 Grid 项的Height 显示与 Width 相同：(Pixel 2 Pie 9.0 420dpi)

要解决这个问题，您可以在运行时计算 Width 和 Height。从this discussion，你会知道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);

    }
}

对手机H-dpi 4in Pie 9.0 H-dpi(480*800)的影响：

【讨论】：