如何使我的自定義控件在 Xamarin Forms 中浮動？

Question

我正在做一個自定義浮動按鈕控件，但是當我在屏幕上添加更多元素時，我的控件會離開屏幕。 我的想法是，即使屏幕上有元素，它也會保持在它們之上。

按鈕.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>

主頁.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>

[編輯]我的完整代碼。

主頁.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>

浮動按鈕.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

您需要將ImageButton放在AbsoluteLayout

在內容頁面

 <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>

單擊 ImageButton 時在 StackLayout 中添加按鈕