如何在Xamarin表单中制作浮动操作按钮 [英] How to make a Floating Action Button in Xamarin Forms

问题描述

我正在构建Xamarin CrossPlatform应用程序！

I'm building a Xamarin CrossPlatform App!

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

I wanted to add a floating action button at the bottom right corner of the app page just like this

这是我的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做到这一点?帮帮我，谢谢！

How can I do this using XAML? Help me through this, Thanks!

推荐答案

您可以使用ImageButton(Xamarin.Forms v3.4 +)

You can use an ImageButton (Xamarin.Forms v3.4+)

在您喜欢的编辑器中使用透明背景创建图像，然后在页面上为其分配位置.

Create your image with a transparent background in your favorite editor and then assign it a location on the Page.

使用AbsoluteLayout的示例，只需将"FAB"放置为最后一个元素，以使其Z顺序最高，它将浮动"在其余内容上方.

Example using an AbsoluteLayout, just place your "FAB" as the last element so that its Z-order is highest and it will "float" above the rest of the content.

    <AbsoluteLayout>

         ~~~~

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

输出:

这篇关于如何在Xamarin表单中制作浮动操作按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！