insert background image in a grid, that fits the size with Xamarin forms pcl

1.4k Views Asked by At

I have the need to insert a background in a grid that is suitable alone according to the device size. I tried a thousand combinations but remains small, or does not fit all. In the picture below you can see circled in red the image that I have to adapt to the Grid, Grid which is in the second half of the bottom screen.

enter image description here

I'm trying to put the image in the grid, the image has x: Name = "backgroundImage", what is the object that I have to adapt to the entire grid of the second half of the screen, how can I do? here's the code:

 <?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>

SOLUTION add image from codebehind c# into RelativeLayout with name relative

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;
                    })
                );
1

There are 1 best solutions below

1
On

In iOS project before calling the App constructor:

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

In App class in PCL:

public static Size ScreenSize;

And simply when giving the size of grid columns and rows you should use it something like:

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