在網格中插入背景圖像，該尺寸適合Xamarin形式pcl的大小

Question

我需要根據設備大小在單獨適合的網格中插入背景。 我嘗試了上千種組合，但仍然很小，或者不適合所有組合。 在下面的圖片中，您可以看到紅色圓圈內的是我必須適應網格的圖像，該網格位於底部屏幕的下半部分。

我正在嘗試將圖像放入網格中，圖像具有x：Name =“ backgroundImage”，我要適應屏幕后半部分整個網格的對象是什么，我該怎么辦？ 這是代碼：

 <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Fimap.Login"
             BackgroundColor="#333">
  <ContentPage.Padding>
  <OnPlatform x:TypeArguments="Thickness"
                iOS="0,0,0,0"
                Android="0,0,0,0"
                WinPhone="0,0,0,0" />
  </ContentPage.Padding>
  <ContentPage.Content>
    <ScrollView>
      <StackLayout VerticalOptions="Center" HorizontalOptions="CenterAndExpand" Orientation="Vertical" Spacing="0">
        <ActivityIndicator x:Name="loadingBeforeLogin" IsVisible="true" Color="#008ECC" IsRunning="true" />
      </StackLayout>
      <RelativeLayout VerticalOptions="Center" HorizontalOptions="CenterAndExpand" x:Name="allContent">
        <Grid>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="5*"></RowDefinition>
            <RowDefinition Height="5*"></RowDefinition>
          </Grid.RowDefinitions>
          <!-- immagini loghi e scritta login sopra-->
          <Grid Grid.Row="0" BackgroundColor="#1f2429">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="2*"></ColumnDefinition>
              <ColumnDefinition Width="6*"></ColumnDefinition>
              <ColumnDefinition Width="2*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions Height="*">
              <RowDefinition Height="2*"></RowDefinition>
              <RowDefinition Height="6*"></RowDefinition>
            </Grid.RowDefinitions>
            <Image Aspect="AspectFit" x:Name="logoScritta" Grid.Row="0" Grid.Column="1" Source="Images/fimaLogoLogin.png"></Image>
            <Image Aspect="AspectFit" x:Name="logo" Grid.Row="1" Grid.Column="1" Source="Images/logo.png"></Image>
            <Label TextColor="#fff" Grid.Row="2" FontSize="22" Grid.Column="1" Text="Login" />
          </Grid>
          <!-- username e password input e ricorda password -->            
          <Grid Grid.Row="1">
            <Image x:Name="backgroundImage"/>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="2*"></ColumnDefinition>
              <ColumnDefinition Width="6*"></ColumnDefinition>
              <ColumnDefinition Width="2*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
              <RowDefinition Height="1*"></RowDefinition>
              <RowDefinition Height="2*"></RowDefinition>
              <RowDefinition Height="2*"></RowDefinition>
              <RowDefinition Height="2*"></RowDefinition>
              <RowDefinition Height="2*"></RowDefinition>
              <RowDefinition Height="2*"></RowDefinition>
            </Grid.RowDefinitions>
            <ActivityIndicator x:Name="loading" Grid.Row="0" Grid.Column="1" IsVisible="false" Color="#008ECC" IsRunning="true" />
            <Label TextColor="#2196F3" Grid.Row="1" Grid.Column="1" Text="" />
            <Entry TextColor="#2196F3" PlaceholderColor="#A9D6FA" FontSize="24" Grid.Row="1" Grid.Column="1" Placeholder="Username" x:Name="UsernameEntry" Text="" />
            <Label TextColor="#2196F3" Grid.Row="2" Grid.Column="1" Text="" />
            <Entry TextColor="#2196F3" PlaceholderColor="#A9D6FA" FontSize="24" Grid.Row="2" Grid.Column="1" Placeholder="Password" IsPassword="True" x:Name="PasswordEntry" Text="" />
            <Button x:Name="LoginButton" FontSize="22" Grid.Row="3" Grid.Column="1" Text="Accedi" Clicked="Login_OnClicked"/>
            <Grid Grid.Row="4" Grid.Column="1">
              <Grid.RowDefinitions>
                <RowDefinition Height="1*"></RowDefinition>
              </Grid.RowDefinitions>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="7*"></ColumnDefinition>
                <ColumnDefinition Width="3*"></ColumnDefinition>
              </Grid.ColumnDefinitions>
              <Label TextColor="#2196F3" Text="Ricorda accesso" Grid.Row="0" Grid.Column="0"></Label>
              <Switch x:Name="switchRememberPassword" Grid.Row="0" Grid.Column="1"></Switch>
            </Grid>
            <Label x:Name="recuperaPassword" Grid.Row="5" Grid.Column="1" TextColor="#2196F3" Text="Hai dimenticato la password?" FontSize="12"></Label>
          </Grid>
        </Grid>
      </RelativeLayout>
    </ScrollView>
  </ContentPage.Content>
</ContentPage>

解決方案：將圖像從C＃的代碼后面添加到具有相對名稱的RelativeLayout中

Image backgroundImage = new Image();    
backgroundImage.Source = "loginBackground.png";
                backgroundImage.Aspect = Aspect.AspectFill;            

                relative.Children.Add(backgroundImage,
                    Constraint.RelativeToParent((parent) =>
                    {
                        backgroundImage.WidthRequest = parent.Width;
                        return 0;
                    }),
                    Constraint.RelativeToParent((parent) =>
                    {
                        return parent.Height - backgroundImage.Height;
                    })
                );

Answer 1

在iOS項目中，調用App構造函數之前：

App.ScreenSize = new Size(UIScreen.MainScreen.Bounds.Width, UIScreen.MainScreen.Bounds.Height);

在PCL的App類中：

public static Size ScreenSize;

並且簡單地給出網格列和行的大小時，應使用類似以下內容的方法：

App.ScreenSize.Width * 1, App.ScreenSize.Height * 1