xamarin.forms - How to add background image to grid layout in xamarin forms?


Question: 

I have four rows and two columns.I need to display the background image to full grid.Please provide me solution.I had referred this creating background image in content page link:Xamarin Forms - how to add background image to a content page .But how to set background image to grid layout.




2 Answers: 

Just add the Image to the first row and column, set ColumnSpan and RowSpan to cover your entire grid and set the Aspect to AdjustFit.

Then you add the other items you want to add to the grid.

A grid cell can hold more than just one element, however keep in mind that the last item in a cell will end up on top of the items having been added earlier.

For example:

<Grid>
    <Image>
    <Button>
</Grid>

The button is the last item in the order, so it will become the topmost item and be clickable. If you had the button first and the image last, the image would cover the button, which therefore would not be clickable.

 

You will have to do some AbsoluteLayout trickery here:

<AbsoluteLayout>
<Image  AbsoluteLayout.LayoutBounds="0, 0, 1.0, 1.0" AbsoluteLayout.LayoutFlags="All" InputTransparent="true" Source="Your_Image" Aspect="AspectFill" />
<!--Your Grid Here-->
<Grid AbsoluteLayout.LayoutFlags="All" BackgroundColor="Transparent" AbsoluteLayout.LayoutBounds="0, 0, 1.0, 1.0" />
<AbsoluteLayout>

See to it that you place the image first in absolute layout so that it goes in the back, and set its input transparent so it does not take any click events.

 

More Articles


material design - android lollipop toolbar: how to hide/show the toolbar while scrolling?

I'm using the new toolbar widget introduced in the appcompat / support-v7. I would like to hide/show the toolbar depending on if the user is scrolling up/down the page, just like in the new Google's playstore app or NewsStand app. Is there something built into the toolbar widget for this or should I

Android: pin TabLayout to top of Scrollview

I was looking at the twitter app on my phone.You can see that when a user scrolls up, the tabLayout actually just pins itself onto the bottom of the toolbar nicely and does not move at all.I thought maybe they did it by just putting all of the top part of the app (the profile picture, the profile wa

WPF Frame Source Refreshing the Loaded Page

I've come across a strange scenario where a frame refuses to refresh its content.I can kinda understand what's happening but the solution is not coming to me.I have a page that has a frame (Frame1) and several buttons. When I click on a button a page is loaded into the frame. This works perfectly in


android - Horizontal and Vertical linear layout inside a scroll view

I am trying to get a combination of Views established. They must constantly have a Button and Edittext box at the top horizontally next to each other and below that a vertical list of Textviews. The vertical list should be enclosed in a ScrollView to allow the user to scroll down through the TextVie

WPF c# window navigation

i got 2 window , i want to navigate from one another but i when i debug it , it shows that nav is null , why is that so? Does it suppose to be null? because i used the same way to navigate in the past and it work and i try it now , it doesn't work. But if i put nav == null , it says nav.Navigate(n

c# - Custom Control, bind to code behind

Having trouble binding to the data in my code behind for my custom control. Obviously I have got to use the Generic.xaml to style my control, and I want to bind to the data in my control UserProfile.cs. This is the code behind:using System;using System.Windows;using System.Windows.Controls;namespace


PhpStorm: automatically rename file on remote host when renaming it locally

Is there any configuration in PhpStorm that automatically renames file on remote host when you rename it locally and reverse?

xamarin.forms - Margin to a Image in Xamarin Forms

I have an image on my Xamarin.Forms. I want to add some margin from Top. Form.XAML:-<ContentPage.Content> <Grid> <Image x:Name="image" /> </Grid></ContentPage.Content>"Form.XAML.cs:- image.Source = ImageSource.FromFile (Height > Width ? "portrait.jpg"

c# - ASP.NET Chart Control and Databinding to multiple Series

I am working with the ASP.NET chart control and I am using the following code to databind data to the chart control. The chart has three series on it: Series1, Series2 and Series3. The problem that I am having with the code below is that it only seems to bind to the first series so that when the ch

How to disable version control in phpstorm?

I am playing around with phpstorm and somehow I activated version control. I don't need it. Now all my tabs are different: orange text on gray background. All files in the file view are orange. How do I disable version control?