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

您可以使用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 2

如果要使用本机控件，可以使用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”的值即可纠正位置

Answer 3

最快的方法：

安装此Nuget：https://github.com/jamesmontemagno/FloatingActionButton-for-Xamarin.Android
将浮动操作按钮（FAB）放置在这样的位置：

ion-content{
--padding-top: 100px;
}

不要忘记在资源中添加“ add.png” 图标

Answer 4

**

如果您想要一种简单而无需下载库或任何东西的解决方案，请尝试以下操作：

**

在xaml中，您可以使用带有圆角的普通按钮。只要确保宽度和高度相同即可。要使其浮动，请使用绝对布局，然后将按钮放在底部。我从我的app.xml资源字典中粘贴了mine及其样式条目。

（我已经使用了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 5

使用Xamarin Forms中的Floating action按钮比您想像的要容易，您所需要的只是一点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自定义控件的名称空间。

为了更好地理解，请检查我在哪里引用了它，here

祝你好运

如果您有任何查询，请还原。

Answer 6

以xamarin形式添加浮动按钮非常容易。只需添加一个带有Height =“ *”的网格，并在其中添加ScrollView和Button，它们都在Grid.Row =“ 0”中。在您的ScrollView中，放入您的设计表单。为了使按钮呈圆形，请放置一些BorderRadius和HeightRequest以及WidthRequest应该是该BorderRadius的两倍。另外，要显示在右下角，请输入Margin =“ 0,0,20,22”。要在该按钮内显示一个Icon，请将FontAwesome Icon作为该按钮的ImageSource。可以在单独的类中定义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>

如何在Xamarin表单中制作浮动操作按钮

6 个答案:

输出：

如果您想要一种简单而无需下载库或任何东西的解决方案，请尝试以下操作：