CODEWITHSUNDEEP
c#androidiosxamarinxamarin.forms
Ben Johnson
Ben Johnson

Reputation: 985

How to set image in StackLayout as background using xamarin?

I want to stretch image like background but I don't want to set a width and heigh to stretch it. Also want the button located inside the picture ?

StackLayout

How to fill the whole stacklayout with this image ?

Code:

<StackLayout BackgroundColor="White" Padding="60" VerticalOptions="Center">
        <Image Source="SplashScreen.png" HeightRequest="100" Opacity="1.0"
          RelativeLayout.WidthConstraint=
            "{ConstraintExpression Type=RelativeToParent, Property=Width}"
          RelativeLayout.HeightConstraint=
            "{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
        <Button Text="Хидрология" TextColor="White" BackgroundColor="#2196F3" Clicked="NavigateButtonHydro_OnClicked">
        </Button>
    </StackLayout>

Upvotes: 0

Views: 1825

Answers (3)

Himanshu Dwivedi
Himanshu Dwivedi

Reputation: 8124

Simply place the image inside Grid like this:

<Grid>
  <Image Source="SplashScreen.png" Aspect="AspectFill"/>
  <StackLayout Padding="60" VerticalOptions="Center">
       <Button Text="Хидрология" TextColor="White" BackgroundColor="#2196F3" 
        Clicked="NavigateButtonHydro_OnClicked">
       </Button>
  </StackLayout>
</Grid>

Upvotes: 1

Wendy Zang - MSFT
Wendy Zang - MSFT

Reputation: 10978

You could use RelativeLayout.

<StackLayout BackgroundColor="White" Padding="60" VerticalOptions="Center">
        <RelativeLayout>
            <Image Source="image.jpeg" HeightRequest="100" Opacity="1.0" Aspect="AspectFill"
      RelativeLayout.WidthConstraint=
        "{ConstraintExpression Type=RelativeToParent, Property=Width}"
      RelativeLayout.HeightConstraint=
        "{ConstraintExpression Type=RelativeToParent, Property=Height}"/>

            <StackLayout Padding="60" VerticalOptions="Center">
                <Button Text="Хидрология" TextColor="White" BackgroundColor="#2196F3" Clicked="NavigateButtonHydro_OnClicked">
                </Button>
            </StackLayout>
         
        </RelativeLayout>
       
    </StackLayout>

enter image description here

Upvotes: 1

FreakyAli
FreakyAli

Reputation: 16587

On the your ContentPage set a background like this:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
 .
 .
 .
 BackgroundImageSource="SplashScreen.png"/>

Upvotes: 0

Related Questions