Xamarin.forms Xamarin表单设计在iphone 5s中看起来是压缩的

Xamarin.forms Xamarin表单设计在iphone 5s中看起来是压缩的,xamarin.forms,Xamarin.forms,我有xamarin表单应用程序。我有一个屏幕,在iphone 6上看起来很漂亮。但在iphone 5中,它看起来像是压缩的。如何解决这个设计问题?在更大的设备中,这种设计工作得很好 我的XAML <Grid RowSpacing="1" x:Name="DetailsCardview" IsVisible="False"> <Grid.RowDefinitions> <RowDefinition Height="*"/>

我有xamarin表单应用程序。我有一个屏幕,在iphone 6上看起来很漂亮。但在iphone 5中,它看起来像是压缩的。如何解决这个设计问题?在更大的设备中,这种设计工作得很好

我的XAML

<Grid RowSpacing="1" x:Name="DetailsCardview" IsVisible="False">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="0.7*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0">
        <Frame HorizontalOptions="FillAndExpand" HasShadow="False" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#772F4F4F" Margin="10,2,10,2">
            <StackLayout Orientation="Vertical" Padding="0">
                <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Padding="0" Margin="0,0,0,10">
                    <Image Source="invoiceby.png"  HeightRequest="25" VerticalOptions="Center"></Image>
                    <Label Text="Invoice Details"  TextColor="LightGreen" VerticalTextAlignment="Center">
                        <Label.FontFamily>
                            <OnPlatform x:TypeArguments="x:String">
                                <On Platform="iOS" Value="Montserrat-Bold" />
                                <On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
                            </OnPlatform>
                        </Label.FontFamily>
                    </Label>
                </StackLayout>

                <Grid >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="5"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <StackLayout Grid.Row="0" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand" >                              
                        <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                        <Label Text="Invoice No"  TextColor="LightBlue" VerticalTextAlignment="Center" >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="0" Grid.Column="1" >
                        <Label Text=":"  TextColor="White" VerticalTextAlignment="Center"  >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="0" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
                        <Label x:Name="InvoiceNumber" Text="-" MaxLines="1"  TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="1" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">                             
                        <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                        <Label Text="Customer"  TextColor="LightBlue" VerticalTextAlignment="Center" >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="1" Grid.Column="1" >
                        <Label Text=":"  TextColor="White" VerticalTextAlignment="Center"  >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="1" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
                        <Label x:Name="CustomerName" Text="-" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="2" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">                         
                        <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                        <Label Text="Sold By" TextColor="LightBlue" VerticalTextAlignment="Center" >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="2" Grid.Column="1">
                        <Label Text=":"  TextColor="White" VerticalTextAlignment="Center"  >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="2" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
                        <Label x:Name="SoldBy" Text="-" MaxLines="1"  TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="3" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">                               
                        <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                        <Label Text="Sold On"  TextColor="LightBlue" VerticalTextAlignment="Center" >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="3" Grid.Column="1">
                        <Label Text=":"  TextColor="White" VerticalTextAlignment="Center"  >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="3" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0" >
                        <Label Text="-" x:Name="SoldOn" MaxLines="2" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="4" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">                              
                        <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                        <Label Text="Invoiced By"  TextColor="LightBlue" VerticalTextAlignment="Center" >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="4" Grid.Column="1">
                        <Label Text=":"  TextColor="White" VerticalTextAlignment="Center" >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="4" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
                        <Label Text="-" x:Name="InvoicedBy" MaxLines="1"   TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="5" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand"                             
                        <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                        <Label Text="Referred By"  TextColor="LightBlue" VerticalTextAlignment="Center" >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="5" Grid.Column="1">
                        <Label Text=":"  TextColor="White" VerticalTextAlignment="Center"  >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="5" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0" >
                        <Label Text="-" x:Name="ReferredBy" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
                        </Label>
                    </StackLayout>
                   <StackLayout Grid.Row="6" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">                               
                        <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                        <Label Text="Current Carrier"  TextColor="LightBlue" VerticalTextAlignment="Center" >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="6" Grid.Column="1">
                        <Label Text=":"  TextColor="White" VerticalTextAlignment="Center"  >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="6" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
                        <Label Text="-" x:Name="CurrentCarrier" MaxLines="1" TextColor="White" VerticalOptions="Center" HorizontalOptions="StartAndExpand">
                        </Label>
                    </StackLayout>
                </Grid>
            </StackLayout>
        </Frame>
    </Grid>


    <Grid Grid.Row="1">             
                    <Frame HorizontalOptions="FillAndExpand" HasShadow="False" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#772F4F4F" Margin="10,2,10,7">
                        <StackLayout Orientation="Vertical" Padding="0">
                            <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Padding="0" Margin="0,0,0,10">
                                <Image Source="tracking.png"  HeightRequest="25" VerticalOptions="Center"></Image>
                                <Label Text="Tracking Details"  TextColor="LightGreen" VerticalTextAlignment="Center">
                                    <Label.FontFamily>
                                        <OnPlatform x:TypeArguments="x:String">
                                            <On Platform="iOS" Value="Montserrat-Bold" />
                                            <On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
                                        </OnPlatform>
                                    </Label.FontFamily>
                                </Label>
                            </StackLayout>
                            <Grid  >
                                <Grid.RowDefinitions >
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="5"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <StackLayout Grid.Row="0" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">                                           
                                    <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                                    <Label Text="Tracking No"  TextColor="LightBlue" VerticalTextAlignment="Center" >
                                    </Label>
                                </StackLayout>
                                <StackLayout Grid.Row="0" Grid.Column="1" >
                                    <Label Text=":" TextColor="White" VerticalTextAlignment="Center"  >
                                    </Label>
                                </StackLayout>
                                <StackLayout Grid.Row="0" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
                                    <Label Text="{Binding TrackingNo}" x:Name="TrackingNo" TextColor="White" MaxLines="1"  VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
                                    </Label>
                                </StackLayout>
                                <StackLayout Grid.Row="1" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">                                           
                                    <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                                    <Label Text="Product Name"    TextColor="LightBlue" VerticalTextAlignment="Center" >
                                    </Label>
                                </StackLayout>
                                <StackLayout Grid.Row="1" Grid.Column="1" >
                                    <Label Text=":"  TextColor="White" VerticalTextAlignment="Center"  >
                                    </Label>
                                </StackLayout>
                                <StackLayout Grid.Row="1" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
                                    <Label Text="{Binding ProductName}" x:Name="ProductName" MaxLines="2"  TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
                                    </Label>
                                </StackLayout>
                                <StackLayout Grid.Column="0" Grid.Row="2" Orientation="Horizontal" HorizontalOptions="FillAndExpand">                                          
                                    <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                                    <Label Text="Comments"  TextColor="LightBlue" VerticalTextAlignment="Center" >
                                    </Label>
                                </StackLayout>
                                <StackLayout  Grid.Column="1"   Grid.Row="2" >
                                    <Label Text=":"  TextColor="White" VerticalTextAlignment="Center"  >
                                    </Label>
                                </StackLayout>
                                <StackLayout  Grid.Row="2"   Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
                                    <Label Text="{Binding InvoiceComments}" x:Name="Comments" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
                                    </Label>
                                </StackLayout>
                               <StackLayout Grid.Column="0" Grid.Row="3" Orientation="Horizontal" HorizontalOptions="FillAndExpand">                                          
                                    <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                                    <Label Text="Refund"  TextColor="LightBlue" VerticalTextAlignment="Center" >
                                    </Label>
                                </StackLayout>
                                <StackLayout  Grid.Column="1"   Grid.Row="3" >
                                    <Label Text=":" TextColor="White" VerticalTextAlignment="Center"  >
                                    </Label>
                                </StackLayout>
                                <StackLayout  Grid.Row="3"   Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
                                    <Label Text="{Binding Refund}" x:Name="Refund" TextColor="White" MaxLines="1" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
                                    </Label>
                                </StackLayout>
                                <StackLayout Grid.Column="0" Grid.Row="4" Orientation="Horizontal" HorizontalOptions="FillAndExpand">                                         
                                    <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                                    <Label Text="Quantity"  TextColor="LightBlue" VerticalTextAlignment="Center" >
                                    </Label>
                                </StackLayout>
                                <StackLayout  Grid.Column="1"   Grid.Row="4" >
                                    <Label Text=":"  TextColor="White" VerticalTextAlignment="Center"  >
                                    </Label>
                                </StackLayout>

                                <StackLayout  Grid.Row="4"   Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
                                    <Label Text="{Binding Qty}" x:Name="Quantity" TextColor="White" VerticalTextAlignment="Center" MaxLines="1" HorizontalOptions="StartAndExpand">
                                    </Label>
                                </StackLayout>

                            </Grid>
                        </StackLayout>
                    </Frame>                 
    </Grid>
    <Frame Grid.Row="2" HorizontalOptions="FillAndExpand" IsClippedToBounds="True" HasShadow="False" CornerRadius="7" BackgroundColor="Transparent"  BorderColor="Transparent" Margin="10,2,10,2" Padding="5">
        <Frame  BackgroundColor="Transparent" HasShadow="False" HorizontalOptions="FillAndExpand" BorderColor="Green" IsClippedToBounds="True" Padding="0" Margin="10,0,10,0">
            <Frame.CornerRadius>
                <OnPlatform x:TypeArguments="x:Single">
                    <On Platform="iOS" Value="35" />
                    <On Platform="Android" Value="40" />
                </OnPlatform>
            </Frame.CornerRadius>
            <Grid >
                <Image Source="dialerbg2.png" Aspect="AspectFill" HeightRequest="30"></Image>               
                    <Grid BackgroundColor="Transparent" Padding="5">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="5"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="60"/>
                        </Grid.ColumnDefinitions>
                        <StackLayout Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">
                            <Image Source="cellphone.png" HorizontalOptions="Start" HeightRequest="25" VerticalOptions="Center"></Image>
                            <Label Grid.Column="0" Text="Phone" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" TextColor="LightBlue" >
                                <Label.FontFamily>
                                    <OnPlatform x:TypeArguments="x:String">
                                        <On Platform="iOS" Value="Montserrat-Regular" />
                                        <On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
                                    </OnPlatform>
                                </Label.FontFamily>
                            </Label>
                        </StackLayout>
                        <Label Grid.Column="1" Text=":"  VerticalTextAlignment="Center" TextColor="White" FontSize="Small">
                            <Label.FontFamily>
                                <OnPlatform x:TypeArguments="x:String">
                                    <On Platform="iOS" Value="Montserrat-Regular" />
                                    <On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
                                </OnPlatform>
                            </Label.FontFamily>
                        </Label>
                        <Label x:Name="PhoneNumber" Grid.Column="2" Text="+919605209575"  VerticalTextAlignment="Center" TextColor="White" >
                            <Label.FontFamily>
                                <OnPlatform x:TypeArguments="x:String">
                                    <On Platform="iOS" Value="Montserrat-Regular" />
                                    <On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
                                </OnPlatform>
                            </Label.FontFamily>
                        </Label>
                        <Image Source="caller.png"  HorizontalOptions="EndAndExpand" Grid.Column="3"></Image>                 
                    </Grid>                  
            </Grid>
        </Frame>
    </Frame>
</Grid>


您应该将设计包装在滚动视图中


在较小的设备中,您的列表将没有足够的空间显示所有元素,因此它将调整大小并填充可用空间。

您应该将您的设计包装在滚动视图中

在较小的设备中,您的列表将没有足够的空间显示所有元素,因此它将调整大小并填充可用空间

你能给我一些关于设置不同文本大小的指南吗 根据设备屏幕大小?我想这会解决我的问题

例如:

    nfloat screenSize = UIScreen.MainScreen.Bounds.Size.Height;

    // 5, 5s, SE, 5C  320 * 568

    nfloat iphone5sHeight = 568;

    if (screenSize <= iphone5sHeight)
    {
        //set the fontSize
    }
    else {
        //set the fontSize for higher screen
    }
nfloat screenSize=UIScreen.MainScreen.Bounds.Size.Height;
//5、5s、SE、5C 320*568
nfloat iphone5sHeight=568;
如果(屏幕大小)
你能给我一些关于设置不同文本大小的指南吗
根据设备屏幕大小?我想这会解决我的问题

例如:

    nfloat screenSize = UIScreen.MainScreen.Bounds.Size.Height;

    // 5, 5s, SE, 5C  320 * 568

    nfloat iphone5sHeight = 568;

    if (screenSize <= iphone5sHeight)
    {
        //set the fontSize
    }
    else {
        //set the fontSize for higher screen
    }
nfloat screenSize=UIScreen.MainScreen.Bounds.Size.Height;
//5、5s、SE、5C 320*568
nfloat iphone5sHeight=568;

如果(屏幕大小但有没有没有没有scrollview的选项?就像同一个视图有较小的文本。我放了scrollview..但是它需要很大的空间,但是没有scrollview的选项吗?就像同一个视图有较小的文本。我放了scrollview..但是它需要很大的空间你可以根据不同的屏幕高度在每个设备中设置不同的文本大小.@JackHua MSFT你能给我一些关于根据设备屏幕大小设置不同文本大小的指导吗?我想这会解决我的问题。你可以根据不同的屏幕高度在每个设备中设置不同的文本大小。@JackHua MSFT你能给我一些关于根据设备屏幕大小设置不同文本大小的指导吗?我很瘦那会解决我的问题