How do I make my Custom Control float in Xamarin Forms?

Question

I'm doing a custom floating button control but when I add more elements on screen, my control goes off screen. My idea is that even if there are elements on the screen, it stays above them.

Button.xaml:

    <StackLayout>

        <AbsoluteLayout>
            <CollectionView
                x:Name="listView"
                Margin="0,0,22,-10"
                AbsoluteLayout.LayoutBounds="1,0,AutoSize,AutoSize"
                AbsoluteLayout.LayoutFlags="PositionProportional"
                BackgroundColor="Transparent"
                ItemsSource="{Binding Source={x:Reference FloatingButtonView}, Path=ItemSource}"
                IsVisible="{Binding Source={x:Reference FloatingButtonView}, Path=CollectionViewVisible}"
                Rotation="180"
                WidthRequest="55">

                <CollectionView.ItemTemplate>

                    <DataTemplate>

                        <Grid
                            Padding="5"
                            HeightRequest="50"
                            WidthRequest="50">

                            <Grid.RowDefinitions>

                                <RowDefinition Height="Auto" />


                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />


                            </Grid.ColumnDefinitions>
                            <!--This ImageButton contais the data of the list-->

                            <ImageButton
                                x:Name="listita"
                                Padding="10"
                                BackgroundColor="{Binding ColorButton}"
                                Command="{Binding Source={x:Reference FloatingButtonView}, Path=BindingContext.LaunchWeb}"
                                CommandParameter="{Binding Website}"
                                CornerRadius="70"
                                WidthRequest="45"
                                HeightRequest="45"
                                Rotation="180"
                                Source="{Binding Image}"   
                            />
                            
                        </Grid>


                    </DataTemplate>

                </CollectionView.ItemTemplate>


            </CollectionView>
        </AbsoluteLayout>
        <ImageButton
            Margin="15"
            Padding="15"
            WidthRequest="70"
            HeightRequest="70"
            BackgroundColor="{Binding Source={x:Reference FloatingButtonView}, Path=PrimaryButtonColor}"
            Command="{Binding Source={x:Reference FloatingButtonView}, Path=BindingContext.OpenFloating}"
            CornerRadius="70"
            HorizontalOptions="End"
            Source="{Binding Source={x:Reference FloatingButtonView}, Path=PrimaryImageSource}"
            VerticalOptions="EndAndExpand" />

    </StackLayout>

MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CustomControlWithList.MainPage"
             x:Name="page"
             xmlns:local="clr-namespace:CustomControlWithList">



        <local:FloatingButton
       
        ItemSource="{Binding ItemList}"
        CollectionViewVisible = "{Binding IsVisible}"
        PrimaryImageSource="{Binding FirstImage}"
        PrimaryButtonColor="{Binding FirstButtonColor}"           
        />

</ContentPage>

[Edited] My full code.

MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CustomControlWithList.MainPage"
             x:Name="page"
             xmlns:local="clr-namespace:CustomControlWithList">

  
    
    <local:FloatingButton
       
        ItemSource="{Binding ItemList}"
        CollectionViewVisible = "{Binding IsVisible}"
        PrimaryImageSource="{Binding FirstImage}"
        PrimaryButtonColor="{Binding FirstButtonColor}"           
        />
 

</ContentPage>

FloatingButton.xaml:

<?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="CustomControlWithList.FloatingButton"
              xmlns:pv="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
             x:Name="FloatingButtonView">


    <StackLayout>

        <AbsoluteLayout>
            <CollectionView
                x:Name="listView"
                Margin="0,0,22,-10"
                AbsoluteLayout.LayoutBounds="1,0,AutoSize,AutoSize"
                AbsoluteLayout.LayoutFlags="PositionProportional"
                BackgroundColor="Transparent"
                ItemsSource="{Binding Source={x:Reference FloatingButtonView}, Path=ItemSource}"
                IsVisible="{Binding Source={x:Reference FloatingButtonView}, Path=CollectionViewVisible}"
                Rotation="180"
                WidthRequest="55">

                <CollectionView.ItemTemplate>

                    <DataTemplate>

                        <Grid
                            Padding="5"
                            HeightRequest="50"
                            WidthRequest="50">

                            <Grid.RowDefinitions>

                                <RowDefinition Height="Auto" />


                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />


                            </Grid.ColumnDefinitions>
                            <!--This ImageButton contais the data of the list-->

                            <ImageButton
                                x:Name="listita"
                                Padding="10"
                                BackgroundColor="{Binding ColorButton}"
                                Command="{Binding Source={x:Reference FloatingButtonView}, Path=BindingContext.LaunchWeb}"
                                CommandParameter="{Binding Website}"
                                CornerRadius="70"
                                WidthRequest="45"
                                HeightRequest="45"
                                Rotation="180"
                                Source="{Binding Image}"   
                            />
                            
                        </Grid>


                    </DataTemplate>

                </CollectionView.ItemTemplate>


            </CollectionView>
        </AbsoluteLayout>
        <ImageButton
            Margin="15"
            Padding="15"
            WidthRequest="70"
            HeightRequest="70"
            BackgroundColor="{Binding Source={x:Reference FloatingButtonView}, Path=PrimaryButtonColor}"
            Command="{Binding Source={x:Reference FloatingButtonView}, Path=BindingContext.OpenFloating}"
            CornerRadius="70"
            HorizontalOptions="End"
            Source="{Binding Source={x:Reference FloatingButtonView}, Path=PrimaryImageSource}"
            VerticalOptions="EndAndExpand" />

    </StackLayout>


</ContentView>

Answer 1

You need to put the ImageButton in the AbsoluteLayout

in ContentPage

 <AbsoluteLayout>

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

        //... buttons

    </StackLayout>
      
        <StackLayout AbsoluteLayout.LayoutFlags="PositionProportional"  
            AbsoluteLayout.LayoutBounds=".95,.55,AutoSize,AutoSize" >

        <local:FloatingButton
          ...
         />

    </StackLayout>
</AbsoluteLayout>

Add button in the StackLayout when click the ImageButton