如何在 Xamarin 表单中制作浮动操作按钮
Posted
技术标签:
【中文标题】如何在 Xamarin 表单中制作浮动操作按钮【英文标题】：How to make a Floating Action Button in Xamarin Forms 【发布时间】：2019-06-28 07:06:05 【问题描述】：我正在构建一个 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 做到这一点？帮我解决这个问题，谢谢！
【问题讨论】：
【参考方案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>
输出：
【讨论】：
我在上面添加了我的 XAML 代码，所以请您告诉我在哪里可以使用这个绝对布局，所以它可以工作！谢谢 @HashirMalik 在我使用 AbsoluteLayout 的示例中，它是页面的 root 内容，将页面的其余内容添加到图像按钮上方。【参考方案2】：**
如果您想要一个简单且无需下载库或其他任何东西的解决方案，请尝试以下操作：
**
在您的 xaml 中，您可以使用带圆角的普通按钮。只要确保宽度和高度都相同。要让它浮动，请使用绝对布局并将按钮放在底部。我从我的 app.xml 资源字典中粘贴了我的及其样式条目。
（我使用了 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>
<Setter Property="CornerRadius">
<OnPlatform iOS="25" Android="100"/>
</Setter>
（当高度和宽度都是50时。）
【讨论】：
我确实在绝对布局周围放置了一个stacklayout，它上面显示一些文本，下面是一个关闭按钮。这样浮动操作按钮就不会显示在它们上面。 会认为这是浮动操作按钮的重点 - 即：它浮动在任何重叠内容之上【参考方案3】：最快的方法：
-
安装此 Nuget：https://github.com/jamesmontemagno/FloatingActionButton-for-Xamarin.Android
像这样定位浮动操作按钮 (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>
不要忘记将 “add.png” 图标添加到您的资源中
【讨论】：
绝对布局的网格子元素让这很棒，因为当我使用堆栈布局作为绝对布局的直接后代时，我遇到了居中问题【参考方案4】：在 xamarin 表单中添加浮动按钮非常容易。只需添加一个 Grid，其中一行具有 Height="*"，然后在其中添加一个 ScrollView 和一个 Button，两者都在 Grid.Row="0" 中。在您的 ScrollView 中，放置您的设计表单。要使按钮呈圆形，请放置一些 BorderRadius 和 HeightRequest 以及 WidthRequest 应该是该 BorderRadius 的两倍。此外，要将其显示在右下角，请输入 Margin="0,0,20,22"。要在该按钮内显示图标，请将 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>
【讨论】：
【参考方案5】：如果您想使用本机控件，您可以使用 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”的值即可纠正位置
【讨论】：
我在代码中编辑了一个错误，现在试试。我第一次在没有 Visual Studio 的情况下即时写作。【参考方案6】：在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 自定义控件的命名空间。
为了更好地理解检查我在哪里引用它可以找到here
祝你好运
如果您有任何查询，请还原。
【讨论】：
?为什么不使用内置的ImageButton
@SushiHangover 是的，但我不确定这家伙有什么 Xamarin.Forms 版本，所以问题很复杂以上是关于如何在 Xamarin 表单中制作浮动操作按钮的主要内容，如果未能解决你的问题，请参考以下文章
如何在 xamarin 表单的集合视图中的最后一项旁边添加图像/按钮？