XAML code to put button in bottom right corner

user_7714100 0
Viewed 4464

I'm trying to get my floating action button in the bottom left corner of my application.

Currently it looks like this:

How I don't want it

And I want it to look like this:

What I want

My XAML 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"
         xmlns:local="clr-namespace:xxx;assembly=xxx"
         x:Class="xxx.xxx.xxx.xxxx"> 

 <AbsoluteLayout HorizontalOptions="FillAndExpand"  VerticalOptions="FillAndExpand">

    <StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">

        <StackLayout Orientation="Vertical" VerticalOptions="StartAndExpand">
            <StackLayout HorizontalOptions="CenterAndExpand"  Margin="0,15,0,0" Orientation="Vertical">
                <!--<local:CustomImage Source="logo.png" HeightRequest="100" WidthRequest="100" HorizontalOptions="Center" />-->

                <local:CustomImageButton  WidthRequest="150" Image="Foto.png" ClassId="Eigendommen" x:Name="buttonFoto" HeightRequest="150"/>

            </StackLayout>

            <StackLayout Orientation="Vertical" VerticalOptions="CenterAndExpand" Margin="10,0,0,0" x:Name="MainStack" >
                <BoxView BackgroundColor="#F15A35" HeightRequest="1" WidthRequest="400" Margin="0,-2,0,5" />
                <Label Text="Toegevoegd:" FontSize="Medium" FontAttributes="Bold" />
                <StackLayout Orientation="Horizontal">
                    <StackLayout Orientation="Vertical"  IsVisible="False" Margin="10,0,10,0" x:Name="hideImage1">
                        <local:CustomImage HeightRequest="100" WidthRequest="100"/>
                        <StackLayout Orientation="Horizontal">
                            <Label Text="Verwijderen" FontSize="Small" VerticalTextAlignment="Center" />
                            <local:CustomImageButton Image="close_zwart.png" BackgroundColor="White" Clicked="Hide_Image_Click" HeightRequest="40" WidthRequest="40" />
                        </StackLayout>
                    </StackLayout>
                    <StackLayout Orientation="Vertical" Margin="10,0,10,0" x:Name="hideImage2" IsVisible="False">
                        <local:CustomImage HeightRequest="100" WidthRequest="100"/>
                        <StackLayout Orientation="Horizontal">
                            <Label Text="Verwijderen" FontSize="Small" VerticalTextAlignment="Center" />
                            <local:CustomImageButton Image="close_zwart.png" Clicked="Hide_Image_Click" BackgroundColor="White" HeightRequest="40" WidthRequest="40" />
                        </StackLayout>
                    </StackLayout>
                    <StackLayout Orientation="Vertical" Margin="10,0,10,0" x:Name="hideImage3" IsVisible="False">
                        <local:CustomImage HeightRequest="100" WidthRequest="100"/>
                        <StackLayout Orientation="Horizontal">
                            <Label Text="Verwijderen" FontSize="Small" VerticalTextAlignment="Center" />
                            <local:CustomImageButton Image="close_zwart.png" Clicked="Hide_Image_Click" BackgroundColor="White" HeightRequest="40" WidthRequest="40" />
                        </StackLayout>
                    </StackLayout>
                </StackLayout>

            </StackLayout>

        </StackLayout>

    </StackLayout>

    <StackLayout 
             AbsoluteLayout.LayoutFlags="All"
             AbsoluteLayout.LayoutBounds="1,1,0.25,0.25">

        <StackLayout HorizontalOptions="End" VerticalOptions="End" Margin="0,0,0,0">
            <local:FloatingActionButton Image="checktaak.png" x:Name="insertTaak"  HeightRequest="60" WidthRequest="60" />
        </StackLayout>

    </StackLayout>

</AbsoluteLayout>

</ContentPage>

You can find the my floating action button at the bottom of all the code ( the last stacklayout). if you need more code let me know in the comments. Edit I want the button always there even if it overlaps a other stacklayout

xamarin.forms xamarin xaml c#
2 Answers

Assuming FloatingActionButton inherits from Button and the AbsoluteLayout is the child of a ContentPage and the expected margin for the floating button as (15,15) from right and bottom borders,

<AbsoluteLayout>
    <!-- SOME OTHER ELEMENTS -->

    <local:FloatingActionButton Image="checktaak.png"
                                CornerRadius="30"
                                WidthRequest="60" HeightRequest="60"
                                AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="1,1,75,75"
                                HorizontalOptions="Center" VerticalOptions="Center" />
</AbsoluteLayout>

To NOTE,

  • Use AbsoluteLayout.LayoutFlags="PositionProportional" to make only the positioning proportional

    Then for AbsoluteLayout.LayoutBounds set X and Y, 1 and 1 to push it to the bottom right corner. The Width and Height is set to 75 and 75 to position the element 75 points left from the layout's right border and 75 points top from the layout's bottom border.

    The 75 is calculated as,

    60(element width/height request) + 15(right/bottom margin) = 75

  • Since the WidthRequest and HeightRequest is 60, half of it 30 will be the CornerRadius of the element.

user_42942750
Related