how to insert a background image in a grid of Xamarin forms pcl

Question

I need to put a background to a grid, a PNG image. I can not find concrete solutions online, you can add it from xaml? or necessarily must act through c #?

Thank you.

    <StackLayout VerticalOptions="FillAndExpand" x:Name="allContent" HorizontalOptions="FillAndExpand" Orientation="Vertical" Spacing="0">    
<Grid Grid.Row="1">
              <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>
              </Grid.RowDefinitions>
              <ActivityIndicator x:Name="loading" Grid.Row="0" Grid.Column="1" IsVisible="false" Color="#008ECC" IsRunning="true" />
              <Label TextColor="#fff" Grid.Row="1" Grid.Column="1" Text="" />
              <Entry FontSize="24" Grid.Row="1" Grid.Column="1" Placeholder="Username" x:Name="UsernameEntry" Text="" />
              <Label TextColor="#fff" Grid.Row="2" Grid.Column="1" Text="" />
              <Entry FontSize="24" Grid.Row="2" Grid.Column="1" Placeholder="Password" IsPassword="True" x:Name="PasswordEntry" Text="" />
              <Button x:Name="LoginButton" Grid.Row="3" Grid.Column="1" Text="Accedi" Clicked="Login_OnClicked"/>
              <Label TextColor="#fff" Text="Ricorda accesso" Grid.Row="3" Grid.Column="1"></Label>
              <Switch x:Name="switchRememberPassword" Grid.Row="4" Grid.Column="1"></Switch>              
              <Label x:Name="recuperaPassword" Grid.Row="4" Grid.Column="1" TextColor="#fff" Text="Recupera credenziali di accesso" FontSize="12"></Label>
            </Grid>
</StackLayout>

Condiment

Answer 1

You can add it as a child of your Grid, and add the properties Grid.ColumnSpan and Grid.RowSpan to span to all your grid. For example:

     <Grid>
        <Image HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill" Source="" Grid.Row="6" Grid.Column="4" Grid.RowSpan="2" Grid.ColumnSpan="2"/>
            <!-- My other properties here code here-->
     </Grid>

(Also if your Grid is on a ContentPage and it occupies the full screen you can use the property BackgroundImage of your page)

Phaedra

This is probably the simplest solution to have an image as a cell/cells background. works like a charm, wish someone had upvoted this and i had a look at it earlier coz i wasted a lot of time with relative layouts. – Unperforated

Answer 2

<RelativeLayout>
<Image Aspect="Fill" Source="Jupiter.png" Opacity="0.3"
            RelativeLayout.WidthConstraint=
              "{ConstraintExpression Type=RelativeToParent, Property=Width}"
            RelativeLayout.HeightConstraint=
              "{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
<Grid RelativeLayout.WidthConstraint=
          "{ConstraintExpression Type=RelativeToParent, Property=Width}"
        RelativeLayout.HeightConstraint=
          "{ConstraintExpression Type=RelativeToParent, Property=Height}">

  <Label Text="Hello world from XAML" VerticalOptions="Center"
     HorizontalOptions="Center" FontSize="30"/>
</Grid>

Delightful

don't work this solution, i have update my code in the answer because the grid is inside the stacklayout – Condiment

the image does not grow in height, but only in width, what is wrong? – Condiment

i have add Aspect="Fill" on image, now works, edit your code and add aspect="fill" please. – Condiment

I have edited my code if you really help this than please rate my code – Delightful

Answer 3

You can use RelativeLayout for this

    <RelativeLayout>
       <Image Source="backgroundimage"   RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" 
     RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}" />
       <Grid RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" 
     RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"> 

//Your grid content


       </Grid>
    </RelativeLayout>

Wherry

I already tried this solution but I'm not the full picture, how can I make it full width and height? – Condiment

Answer 4

There's no ImageBrush on Xamarin Forms XAML, also there's no gridView.. just the similar Grid layout, and for now, it's only accepting a background color

to add a image you should do something like:

<Grid>
<Image Source="imgBackground.png" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill"/>
</Grid>

Pansophy