xaml - 如何在 Xamarin 表单中制作 float 操作按钮

Question

我正在构建一个 Xamarin CrossPlatform 应用程序!

我想在应用页面的右下角添加一个 float 操作按钮，就像这样



这是我的 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

在 xamarin 表单中添加 float 按钮非常容易。只需添加一个 Grid，其中一行具有 Height="*"，然后在其中添加一个 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>