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

Question

Я создаю приложение Xamarin CrossPlatform!

Я хотел добавить плавающую кнопку в правом нижнем углу страницы приложения, как это

Вот мой код 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="Last_MSPL.Views.HomePage">


    <ListView x:Name="Demolist" ItemSelected="OnItemSelected" BackgroundColor="AliceBlue">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.ContextActions>
                        <MenuItem x:Name="OnMore" Clicked="OnMore_Clicked" CommandParameter="{Binding .}"
                                 Text="More" />
                        <MenuItem x:Name="OnDelete" Clicked="OnDelete_Clicked" CommandParameter="{Binding .}"
                                 Text="Delete" IsDestructive="True" />
                    </ViewCell.ContextActions>
                    <StackLayout>

                        <StackLayout Padding="15,0">
                            <Label Text="{Binding employee_name}" FontAttributes="bold" x:Name="en"/>
                            <Label Text="{Binding employee_age}"/>
                        </StackLayout>

                    </StackLayout>

                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>



</ContentPage>

Как я могу сделать это с помощью XAML?Помогите мне через это, спасибо!

Answer 1

**

Если вы хотите простое решение без загрузки библиотек или чего-нибудь еще, попробуйте это:

**

В вашем xaml вы можете использовать обычную кнопкус закругленными углами.Просто убедитесь, что ширина и высота одинаковы.Чтобы он плавал, используйте абсолютную раскладку и поместите кнопку внизу.Я вставил свою запись и ее стиль из моего словаря ресурсов app.xml.

(Я использовал как пакеты james montenago, так и элементы управления suave. Первая не работает на iOS, а вторая не показывает изображенияна Android. Это решение работает как на iOS, так и на Android.)

XAML:

<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<!-- other content goes here -->      
  <Button x:Name="yourname" Image="baseline_menu_white_24"
                Clicked="OnFabMenuClick" IsVisible="True"
                AbsoluteLayout.LayoutFlags="PositionProportional"
                AbsoluteLayout.LayoutBounds="1, 1, AutoSize, AutoSize"
                Style="{StaticResource FABPrimary}"  />
            </AbsoluteLayout>

Запись словаря ресурсов:

<Color x:Key="DarkButtonBackground">#921813</Color> 
            <Style x:Key="FABPrimary" TargetType="Button">
                <Setter Property="CornerRadius" Value="100"/>
                <Setter Property="BackgroundColor" Value="{StaticResource DarkButtonBackground}"/>
                <Setter Property="HeightRequest" Value="55"/>
                <Setter Property="WidthRequest" Value="55"/>
                <Setter Property="HorizontalOptions" Value="CenterAndExpand"/>
                <Setter Property="VerticalOptions" Value="CenterAndExpand"/>
                <Setter Property="Padding" Value="15"/>
                <Setter Property="Margin" Value="0,0,0,15"/>
            </Style>

• Вы можете игнорироватьесли хотите, введите словарь ресурсов и вместо этого поместите свойства непосредственно в объявление кнопки в файле xaml.
• Я обнаружил, что на некоторых устройствах iOS кнопки не отображаются правильно, если радиус установлен на 100.Это можно исправить, установив для CornerRadius половину ширины и высоты, или вы можете использовать OnPlatform следующим образом:

     <Setter Property="CornerRadius">
          <OnPlatform iOS="25" Android="100"/>
     </Setter>

(когда высота и ширина равны 50).

Answer 2

самый быстрый способ:

1. Установите этот Nuget: https://github.com/jamesmontemagno/FloatingActionButton-for-Xamarin.Android
2. Установите кнопку плавающего действия (FAB), например:

      <?xml version="1.0" encoding="utf-8" ?>
        <ContentPage
            x:Class="Tawsil.Views.DemoPage"
            xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:fab="clr-namespace:Refractored.FabControl;assembly=Refractored.FabControl">

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

                    <!-- your content here -->

                </Grid>

                <!-- the FAB -->
                <fab:FloatingActionButtonView AbsoluteLayout.LayoutBounds="1, 1, AutoSize, AutoSize" AbsoluteLayout.LayoutFlags="PositionProportional" ImageName="add.png" />
            </AbsoluteLayout>
        </ContentPage>

Не забудьте добавить значок "add.png" к своим ресурсам

Answer 3

Использование плавающей кнопки в Xamarin Forms проще, чем вы думаете. Все, что вам нужно, это немного AbsoluteLayout и ImageButton, которые могут реагировать на ваши щелчки и вуаля!Ваш FAB готов

Добавить пользовательский ImageButton Элемент управления примерно так:как показано ниже:

  <customControls:ImageButton Source="{Binding ImageSource}"
                                    Command="{Binding AddCommand}"                                        AbsoluteLayout.LayoutFlags="PositionProportional"                                        AbsoluteLayout.LayoutBounds="1.0,1.0,-1,-1"
                                    Margin="10" />

Где customControls - это пространство имен, в которое вы добавили пользовательский элемент управления ImageButton.

Для лучшего понимания проверьте, откуда я ссылался, откуда можно найти здесь

Удачи

Вернитесь, если у вас есть какой-либо запрос.

Answer 4

Вы можете использовать ImageButton (Xamarin.Forms v3.4 +)

Создайте изображение с прозрачным фоном в вашем любимом редакторе, а затем назначьте ему местоположение на странице.

Например, используя AbsoluteLayout, просто поместите «FAB» в качестве последнего элемента так, чтобы его Z-порядок был наивысшим, и он «плавал» над остальнымисодержание.

    <AbsoluteLayout>

         ~~~~

        <ImageButton Source="editFAB.png" 
            BackgroundColor="Transparent"
            AbsoluteLayout.LayoutFlags="PositionProportional"  
            AbsoluteLayout.LayoutBounds=".95,.95,80,80" 
            Clicked="Handle_Clicked" />
    </AbsoluteLayout>

Выход:

Answer 5

Вы можете использовать для Android, кнопку с плавающим действием (https://developer.android.com/guide/topics/ui/floating-action-button)), если вы хотите использовать собственный элемент управления, и пользовательскую доску для iOS. В противном случае вы можете добавить на свою страницу Xamarin.Forms контейнер RelativeLayout и ограничения на спецификацию.где хочешь. Как то так:

 <ContentPage.Content>
    <RelativeLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <StackLayout >
            <Label Text="YOUR CODE" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
        </StackLayout>
        <Button CornerRadius="25" Text="B"
                 RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
        Property=Width, Factor=1, Constant=-60}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
        Property=Height, Factor=1, Constant=-60}" />
    </RelativeLayout>
</ContentPage.Content>

Вы можете изменить Button с помощью любого другого элемента управления, и вы можете исправить положение, просто изменив значение «Constant = -60»