Develop Reference

How to Fill Stacklayout with Image

I want to have a background image like the following for the header section of my navigation panel
I currently have an image to display the profile picture in a StackLayout. Instead of setting the BackgroundColor property to the StackLayout tag how can I add a background image?
<StackLayout>
<Image Source="profile.png" WidthRequest="75" HeightRequest="75" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
</Stacklayout>

You'll need to switch from Stacklayout to a something that allows it's views to overlap, like a Grid or Absolute layout.
To use a grid, simply put your image and your content in the same row:
<Grid>
<Image Grid.Row="0"
Aspect="AspectFill"
Source="airplane" />
<Label Grid.Row="0"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand" />
</Grid>
Result:
:

Disable faint border shadow around StackLayout in Xamarin Forms

When i have one StackLayout inside another one, there is a faint border shadow around it.
I don't like the way it looks, is there a way to get rid of it ?
Here is XAML of the bottom pannel:
<StackLayout Orientation="Horizontal"
HorizontalOptions="Fill"
VerticalOptions="EndAndExpand">
<Button Text="⌂"
HorizontalOptions="StartAndExpand"/>
<StackLayout>
<Button Text="Kontrola"
VerticalOptions="Start"
HorizontalOptions="CenterAndExpand"/>
<Label Text="Autorem zadání je Cermat.cz"
FontSize="Micro"
HorizontalOptions="FillAndExpand"
VerticalOptions="EndAndExpand"/>
</StackLayout>
<Button Text="˃"
HorizontalOptions="EndAndExpand"
FontSize="Title"
BackgroundColor="Gray"
BorderColor="Gray"
IsEnabled="False"/>
</StackLayout>

In your Stacklayout:
<StackLayout Orientation="Horizontal"
HorizontalOptions="Fill"
VerticalOptions="EndAndExpand">
you are not setting the Spacing to 0, in the Microsoft Documentation for Stacklayout it says:
By default, StackLayout will add a 6px margin between views.
And that's why you se those lines, it's the spacing between the 3 elements you have inside horizontally. But it's weird why you even see those lines, because you are not setting the background color to white in those elements. i don't know if you ommited that, since i don't see you setting the border color to green too.

Button not clickable due to overlapping view

This might be an easy solution but for some reason I couldn't find the solution online.
I have two views. One view is a grid and the other is a button. The Grid View is showing different views (boxview, label, etc..)
But underneath it is a button view. But this view is not included in the Grid View. I cannot put it inside the Grid View because of reasons. I just wanted to know if there's a possibility for it to be clickable without moving the views or even if there's a view on top of it?
Here's how it looks like:
<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PlayUIArea.NotificationConfirmView">
<ContentView.Content>
<Grid BackgroundColor="Blue">
<BoxView
WidthRequest="100"
VerticalOptions="Fill"
HorizontalOptions="Start"
BackgroundColor="Black" />
<Button Text="Confirm"
OnClick="Button_Click"
VerticalOptions="Start"
HorizontalOptions="Center" />
<Grid BackgroundColor="Red" Margin="100,0,0,0" Padding="-100,0,0,0">
<Label Text="Label Here"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Grid>
</Grid>
</ContentView.Content>
</ContentView>
Is there anyway to make this clickable?

I am a bit late but I think I found a solution to this.
<Grid>
<WebView Grid.Row ="1" Source="[insert random embedded youtube source]"/>
<RelativeLayout Grid.Row ="1" InputTransparent="True" CascadeInputTransparent="False">
<Button CornerRadius="0" Command="{Binding GoToVideoFullscreen}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.8}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.9}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=Constant, Constant=17}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=Constant, Constant=17}"/>
</RelativeLayout>
</Grid>
I had a similar problem, where I wanted to overlap a WebView with a custom button. But my RelativeLayout, which I used to place the button was eating all the inputs and the WebView could not be used anymore.
So I added InputTransparent="True" and CascadeInputTransparent="False" to the RelativeLayout. The InputTransparent="True" makes it invisible to inputs, the CascadeInputTransparent="False" prevents the InputTransparent value from inheriting to the children (in this case my button).
Documentation:
https://learn.microsoft.com/de-de/dotnet/api/xamarin.forms.visualelement.inputtransparent?view=xamarin-forms
https://learn.microsoft.com/en-us/dotnet/api/xamarin.forms.layout.cascadeinputtransparent?view=xamarin-forms

Agree with #G.Mich , you should put all of elements in one layout . For example you can put them in a StackLayout
<ContentPage.Content>
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Button Onclick="Button_Clicked" /> <!-- This isn't clickable -->
<Grid>
your code here
</Grid>
</StackLayout>
</ContentPage.Content>

place the button on top of the Grid by placing it after the Grid in the XAML
<ContentPage.Content>
<Grid>
My code here
</Grid>
<Button Onclick="Button_Clicked" /> <!-- This isn't clickable -->
</ContentPage.Content>

Using AbsoluteLayout for a background image but some elements are not correctly positioned Xamarin Forms

I have an background image that I have to set to my ContentPage however the image is zoomed in. I need it to be at Aspect="Fill" so it appears properly. I looked online and the solution was to have either an AbsoluteLayout or RelativeLayout with an image. But when adding this, an image which is supposed to be at the bottom of the page is no longer there.
<RelativeLayout Parent="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Image Source="Background.jpg" Aspect="Fill" RelativeLayout.WidthConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height}"></Image>
<StackLayout>
<Label Text="Timetable" TextColor="Silver" HorizontalOptions="EndAndExpand" Margin="0, 10, 20, 0">
</Label>
<Image Margin="15, 20" HorizontalOptions="Center" WidthRequest="350" Source="subtle-logo.png"></Image>
<Image HorizontalOptions="Center" x:Name="PlayPauseButton" Source="play.png" WidthRequest="75">
</Image>
<Image HorizontalOptions="Center" x:Name="shareButton" Source="share-button.png" WidthRequest="50"
VerticalOptions="End" Margin="0, 0, 0, 20">
</Image>
</StackLayout>
</RelativeLayout>
However, that share button should be at the bottom of the page because of the VerticalOptions="End" property. How do I fix this?

AbsoluteLayout is better for performance reasons. Plus you are asking about AbsoluteLayout, but using RelativeLayout in the code you shared.
Regardless, you need the VerticalOptions for that last image to be VerticalOptions="EndAndExpand" which will expand the area to fill the available space and then place the image at the vertical end of that area.
Basically the Start, Center, End, and Fill layout options say where to place the element in the available space or whether to enlarge the element to fill the available space, where StartAndExpand, CenterAndExpand, EndAndExpand, and FillAndExpand will expand the available space, if possible, and then set the item in that space to Start, Center, etc. AndExpand options are only applicable in a StackLayout
Here's the code if you want to use an AbsoluteLayout instead (recommended by the Forms engineering team):
<AbsoluteLayout>
<Image Source="Background.jpg" Aspect="AspectFill" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" />
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
<Label Text="Timetable" TextColor="Silver" HorizontalOptions="EndAndExpand" Margin="0, 10, 20, 0">
</Label>
<Image Margin="15, 20" HorizontalOptions="Center" WidthRequest="350" Source="subtle-logo.png"></Image>
<Image HorizontalOptions="Center" x:Name="PlayPauseButton" Source="play.png" WidthRequest="75">
</Image>
<Image HorizontalOptions="Center" x:Name="shareButton" Source="share-button.png" WidthRequest="50"
VerticalOptions="EndAndExpand" Margin="0, 0, 0, 20">
</Image>
</StackLayout>
</AbsoluteLayout>

Circular button to add items on ListView

I´m looking to create the classic circular button on a ListView to add items. I´ve done that by using AbsoluteLayout just fine. But the problem I have is that I cannot make the Button to go with rounded border. No matter what I´ve set it just stays square. For what I´ve read it just seems that Xamarin overrrides the border behaviour. I cannot believe there is not a simple way to solve this.
Can anyone help me out with this?.
EDIT: I´ve tried https://github.com/wilsonvargas/ButtonCirclePlugin but I´m still getting the button with an erratic behaviour:
<local:CircleButton
Text="+"
FontSize="Medium"
FontAttributes="Bold"
AbsoluteLayout.LayoutBounds="0.9,0.9,50,50"
AbsoluteLayout.LayoutFlags="PositionProportional"
HeightRequest="70"
WidthRequest="70"/>

This is a problem only in Android 6.0 but it is solved by adding the BorderRadius property and assigning it the same value as the height of the button. something like this:
<local:CircleButton Icon="ic_directions_bike"
FontSize="30" TextColor="Black"
HeightRequest="70" WidthRequest="70"
BorderRadius="70" BackgroundColor="#DCDCDC"/>
<!--This button is not exactly circular-->
<local:CircleButton FontSize="30" TextColor="Black"
HeightRequest="70" WidthRequest="200"
BorderRadius="20" BackgroundColor="#DCDCDC"/>
This property allows you to create buttons that are not exactly circular, as seen in the image.

I can get the background button using Xamarin.Forms. If you are writing Xamarin.Forms you can try.
<StackLayout Orientation="Horizontal">
<Image Margin="10,10" HeightRequest="50" WidthRequest="50" Source="backButton.png">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="btnSetting_Clicked"/>
</Image.GestureRecognizers>
</Image>
<Image HorizontalOptions="EndAndExpand" Margin="0,0,10,10" HeightRequest="50" WidthRequest="50" Source="settingsButton.png">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="btnSetting_Clicked"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>