XAML 如何在Xamarin窗体中制作浮动操作按钮

yv5phkfx  于 2023-01-22  发布在  其他
关注(0)|答案(7)|浏览(161)

我正在建立一个Xamarin跨平台应用程序!
我想在应用程序页面的右下角添加一个浮动操作按钮,就像这样

下面是我的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做到这一点?请帮助我完成这个,谢谢!

inkz8wg9

inkz8wg91#

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

输出:

cetgtptt

cetgtptt2#

**

如果你想要一个简单的解决方案,不需要下载库或任何东西,试试这个:

**

在你的xaml中你可以使用一个圆角的普通按钮,只要确保宽度和高度是一样的,要让它浮动,使用一个绝对布局,把按钮放在底部,我从app.xml资源字典中粘贴了我的和它的样式条目。
(Ive我使用了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,按钮显示不正确。这可以通过将角半径设置为宽度和高度的一半来解决,或者您可以像这样使用OnPlatform:
<Setter Property="CornerRadius">
          <OnPlatform iOS="25" Android="100"/>
     </Setter>

(When高度和宽度均为50。)

nzrxty8p

nzrxty8p3#

在xamarin表单中添加一个浮动按钮非常简单。只需添加一个网格,其中一行的高度为"*”,在网格中添加一个滚动视图和一个按钮。行=“0”。在滚动视图中,放置您的设计表单。对于圆形的按钮,放置一些边框半径和高度请求,以及宽度请求应该是边框半径的两倍。另外,要在右下角显示它,put Margin=“0,0,20,22”.要在该按钮内显示图标,请将FontAwesome图标作为按钮的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>
4smxwvx5

4smxwvx54#

最快的方法:
1.安装此Nuget:https://github.com/jamesmontemagno/FloatingActionButton-for-Xamarin.Android
1.按如下方式放置浮动操作按钮(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”**图标添加到资源中

wz8daaqr

wz8daaqr5#

如果你想使用本地控件,你可以在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>

您可以使用任何其他控件更改按钮,并且只需更改“常量=-60”的值即可纠正位置

wkftcu5l

wkftcu5l6#

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
祝你好运
如果您有任何类型的查询,请还原。

k5hmc34c

k5hmc34c7#

在实现浮动操作按钮时,我注意到这里的答案都没有覆盖按钮下方的阴影。下面是我的(hacky)解决方案,以获得FAB下方的阴影:

<Grid>
    <Frame
        Margin="3,8,-3,-8"
        CornerRadius="35"
        HasShadow="False"
        HeightRequest="70"
        VerticalOptions="Start"
        WidthRequest="70">
        <Frame.Background>
            <RadialGradientBrush Center="0.5,0.5" Radius="0.5">
                <GradientStop Offset="0" Color="Gray" />
                <GradientStop Offset="0.5" Color="Gray" />
                <GradientStop Offset="1.0" Color="#01000000" />
            </RadialGradientBrush>
        </Frame.Background>
    </Frame>
    <ImageButton
        Padding="20"
        Command="{Binding <YourCommand>}"
        CornerRadius="35"
        HeightRequest="70"
        Source="<YourImage.png>"
        VerticalOptions="Start" />
</Grid>

注:

  • 帧上的边距是相对于ImageButton的偏移量wrt,因此它显示在ImageButton的右下方。
  • 渐变的最后一种颜色是黑色,alpha值为1Transparent在iOS上没有达到预期效果,01000000工作得很好。
  • ImageButton必须低于Frame,因为xaml顺序确定绘制顺序。
  • 将此Grid放入另一个Grid中,使其与其他内容重叠。
  • 这适用于Android和iOS,不适用于UWP。
  • 我认为这不是一个高性能的解决方案,因为视图中有一个额外的元素,以及Xamarin的布局/绘图性能问题。
  • 为了让它更好,你可以使用Visual State Manager。不过他们在它的xamarin实现中留下了一些bug。

相关问题