如何使我的自定义控件在 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