Как настроить компоненты для экранов разных размеров (Responsive Layout)

Question

У меня есть экран входа в систему, который я тестировал на разных устройствах и обнаружил, что компоненты не помещаются ни на одном экране. Может ли кто-нибудь объяснить мне, как я могу создавать адаптивные экраны

    <StackLayout Margin="20" VerticalOptions="Center" HorizontalOptions="Center">
        <!--<Image x:Name="PicLogo"  WidthRequest="100" HeightRequest="100" Aspect="AspectFit" VerticalOptions="Center" />-->
        <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" Margin="30">

            <StackLayout Orientation="Horizontal">
                <Image x:Name="PicUser"   WidthRequest="30" HeightRequest="30" Aspect="AspectFit"  VerticalOptions="Center"  />
                <local:RoundedEntry x:Name="txtUsuario" PlaceholderColor="Gray" Placeholder="ID do utilizador..." WidthRequest="220" ></local:RoundedEntry >
            </StackLayout>
            <StackLayout Orientation="Horizontal" Margin="0,10,0,0">
                <Image x:Name="PicPass"  WidthRequest="30" HeightRequest="30" Aspect="AspectFit"  VerticalOptions="Center"/>
                <local:RoundedEntry x:Name="txtSenha"  PlaceholderColor="Gray" Placeholder="Palavra Passe..." IsPassword="True" VerticalOptions="FillAndExpand" WidthRequest="220"></local:RoundedEntry>

            </StackLayout>
            <StackLayout Orientation="Horizontal" Margin="0,0,0,0" HorizontalOptions="Center">
                <Label x:Name="LbEsquecer" Text="Esqueceu a palavra-Passe?" TextColor="White" />
            </StackLayout>
            <StackLayout x:Name="StkBotao" Margin="0,10,0,0">
                <Button x:Name="CmdLogin"  Text="Iniciar Sessão" BackgroundColor="#00a1e3" TextColor="White" FontSize="13.8"  HorizontalOptions="EndAndExpand" WidthRequest="200"></Button>
            </StackLayout>
            <!--<Button x:Name="CmdHelp"  Text="..." BackgroundColor="#00a1e3" HeightRequest="50" TextColor="White" BorderRadius="10" WidthRequest="40" HorizontalOptions="End"></Button>
            <StackLayout Orientation="Horizontal">
                <Button x:Name="CmdA"  Text="FAQs" BackgroundColor="LightGray"  BorderRadius="8"></Button>
                <Button x:Name="CmdB"  Text="Chat" BackgroundColor="LightGray"  BorderRadius="8"></Button>
                <Button x:Name="CmdC"  Text="Ajuda" BackgroundColor="Yellow"  BorderRadius="8"></Button>
            </StackLayout>-->
        </StackLayout>
    </StackLayout>
</ContentPage>

Answer 1

В основном вам необходимо поиграть со следующими свойствами для каждого макета:

• HorizontalOptions
• VerticalOptions

Например, ваш родительский StackLayout должен иметьэто свойство установлено на FillAndExpand, поэтому оно охватывает весь экран по высоте и ширине.Непосредственно ребенок должен быть вертикально центрирован, а также заполнен горизонтально.Примерно так:

<!-- Parent stacklayout starts -->
<StackLayout
     HorizontalOptions="FillAndExpand"
     VerticalOptions="FillAndExpand">
     <!-- Immediately child stacklayout starts -->
      <StackLayout
          HorizontalOptions="FillAndExpand"
          VerticalOptions="CenterAndExpand">
          <!-- Your login markup starts -->

          <!-- Your login markup ends -->
      </StackLayout>
      <!-- Immediately child stacklayout ends -->
</StackLayout>

И остальные дети попадают в этот базовый макет.Помните, что вы находитесь в стеке, где элементы расположены в стеке.

Также не забудьте использовать HorizontalTextAlignment для фактического выравнивания элементов под вашими стеками, например:

<!-- Parent stacklayout starts -->
<StackLayout
     HorizontalOptions="FillAndExpand"
     VerticalOptions="FillAndExpand">
     <!-- Immediately child stacklayout starts -->
      <StackLayout
          HorizontalOptions="FillAndExpand"
          VerticalOptions="CenterAndExpand">
          <!-- Your login markup starts -->
          <Label Text="Hi there!" HorizontalTextAlignment="Center" />
          <Label Text="Here you have some tips" HorizontalTextAlignment="Center" />
          <!-- Your login markup ends -->
      </StackLayout>
      <!-- Immediately child stacklayout ends -->
 </StackLayout>

Answer 2

Пример добавления просмотров шаблонов.

<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
    x:Class="MyAp.Views.MyNewView"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:MyApp.Views">


    <ContentView.Content>
        <OnIdiom x:TypeArguments="View">
            <OnIdiom.Desktop>
                <views:NewView_Desktop />
            </OnIdiom.Desktop>
            <OnIdiom.Tablet>
                <views:NewView_Tablet />
            </OnIdiom.Tablet>
            <OnIdiom.Phone>
                <views:NewView_Phone />
            </OnIdiom.Phone>
        </OnIdiom>
    </ContentView.Content>

Справочный вид, который будет независимым.

xmlns:views="clr-namespace:MyApp.Views

<views:MyFirstView />

<views:MySecondView />