我正在构建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做到这一点?帮我解决这个问题,谢谢!
答案 0 :(得分:4)
您可以使用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>
答案 1 :(得分:1)
如果要使用本机控件,可以使用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”的值即可纠正位置
答案 2 :(得分:1)
最快的方法:
ion-content{
--padding-top: 100px;
}
不要忘记在资源中添加“ add.png” 图标
答案 3 :(得分:1)
**
**
在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>
<Setter Property="CornerRadius">
<OnPlatform iOS="25" Android="100"/>
</Setter>
(当高度和宽度均为50时。)
答案 4 :(得分:0)
使用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
祝你好运
如果您有任何查询,请还原。
答案 5 :(得分:0)
以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>