如何在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

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

在 xamarin 表单中添加浮动按钮非常容易。只需添加一个具有 Height="*" 的一行的 Grid，然后在其中添加一个 ScrollView 和一个 Button，两者都在 Grid.Row="0" 中。在你的 ScrollView 中，放置你的设计表单。要使按钮呈圆形，请放置一些 BorderRadius 和 HeightRequest，并且 WidthRequest 应为该 BorderRadius 的两倍。另外，要将其显示在右下角，请放置 Margin="0,0,20,22"。要在该按钮内显示图标，请将 FontAwesome Icon 作为按钮的 ImageSource。FontAwesome Icons 可以在单独的类中定义（如果您还需要有关如何使用 FontAwesome Icons 的详细信息，请告诉我）。

就是这样，你就完成了。

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

Answer 3

**

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

**

在您的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时。）