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

Вы можете использовать для Android плавающую кнопку действия (https://developer.android.com/guide/topics/ui/кнопка с плавающим действием), если хотите использовать собственный элемент управления, и пользовательскую доску для 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>

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

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

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

public class ImageButton : Image
{
    public static readonly BindableProperty CommandProperty =
        BindableProperty.Create("Command", typeof(ICommand), typeof(ImageButton), null);

    public static readonly BindableProperty CommandParameterProperty =
        BindableProperty.Create("CommandParameter", typeof(object), typeof(ImageButton), null);

    public event EventHandler ItemTapped = (e, a) => { };

    public ImageButton()
    {
        Initialize();
    }

    public ICommand Command
    {
        get { return (ICommand)GetValue(CommandProperty); }
        set { SetValue(CommandProperty, value); }
    }

    public object CommandParameter
    {
        get { return GetValue(CommandParameterProperty); }
        set { SetValue(CommandParameterProperty, value); }
    }

    private ICommand TransitionCommand
    {
        get
        {
            return new Command(async () =>
            {
                AnchorX = 0.48;
                AnchorY = 0.48;
                await this.ScaleTo(0.8, 50, Easing.Linear);
                await Task.Delay(100);
                await this.ScaleTo(1, 50, Easing.Linear);
                Command?.Execute(CommandParameter);

                ItemTapped(this, EventArgs.Empty);
            });
        }
    }

    public void Initialize()
    {
        GestureRecognizers.Add(new TapGestureRecognizer
        {
            Command = TransitionCommand
        });
    }
}

После того, как вы запустите это в макете, самым родительским из которых является AbsoluteLayout, добавьте ImageButton, как показано ниже:

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

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

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

Удачи

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

Вы можете использовать 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>

Вывод:

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

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>

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

**

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

**

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

(Я использовал как пакеты james montenago, так и вежливые элементы управления. Первый не работает на 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.)

Добавить плавающую кнопку в формы xamarin довольно просто. Просто добавьте сетку с одной строкой, имеющей высоту = "*", а внутри нее добавьте ScrollView и кнопку, обе в Grid.Row = "0". Внутри вашего ScrollView поместите свою форму дизайна. Чтобы кнопка была круглой формы, поместите немного BorderRadius и HeightRequest, а WidthRequest должен быть в два раза больше этого BorderRadius. Кроме того, чтобы показать его в правом нижнем углу, введите Margin="0,0,20,22". Чтобы отобразить значок внутри этой кнопки, поместите значок FontAwesome в качестве источника изображения кнопки. Иконки FontAwesome могут быть определены в отдельном классе (пожалуйста, дайте мне знать, если вам нужны подробности о том, как использовать значки FontAwesome).

Вот и все.

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height = "*"/>
        </Grid.RowDefinitions>
        <ScrollView Grid.Row = "0">
        
        </ScrollView>
        <Button Grid.Row = "0" BorderColor = "#2b3c3c" BorderWidth = "1" FontAttributes = "Bold" BackgroundColor = "#1968B3" BorderRadius = "35" TextColor = "White" 
                    HorizontalOptions = "End" VerticalOptions = "End" WidthRequest = "70" HeightRequest = "70" Margin = "0,0,20,22" Command = "{Binding OpenSearchModalPopupCommand}">
            <Button.ImageSource>
                <FontImageSource FontFamily = "{StaticResource FontAwesomeSolidFontFamily}"
                                 Glyph = "{x:Static fonts:Icons.FAFilter}" 
                                 Size = "20"
                                 Color = "White"/>
            </Button.ImageSource>
        </Button>
    </Grid>