Блог

Главная - Вопросы по программированию - Как мне сделать мой пользовательский элемент управления плавающим в формах Xamarin?

Как мне сделать мой пользовательский элемент управления плавающим в формах Xamarin?

#c# #xamarin.forms

#c# #xamarin.forms

Вопрос:

Я создаю пользовательский элемент управления с плавающей кнопкой, но когда я добавляю больше элементов на экран, мой элемент управления исчезает с экрана. Моя идея заключается в том, что даже если на экране есть элементы, он остается над ними.

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>

[Отредактировано]
Мой полный код.

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>

Ответ №1:

Вам нужно поместить ImageButton в AbsoluteLayout

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

Добавить кнопку в StackLayout при нажатии кнопки ImageButton

Комментарии:

1. Я поместил его в AbsoluteLayout , но при добавлении кнопок на экран или других объектов он продолжает перемещаться.

2. Как я могу проверить, что он нормально работает на главной странице? Я проверяю это следующим образом ( gyazo.com/f6a41ed561852c2e8be893039d3d7e88 ) и это продолжает перекрываться. Моя идея заключается в том, что, хотя ниже есть элементы, кнопка всегда находится над всем.