A custom view to create a FloatingActionButton for both Android and iOS as part of Material Design

License: MIT License

C# 100.00%

xamarin.forms.controls.floatingactionbutton's Introduction

Xamarin.Forms.Controls.FloatingActionButton

A custom view to create a FloatingActionButton for both Android and iOS as part of Material Design

That's right, even on iOS!

How to use

Clone the repository and open include the src projects in your Xamarin.Forms and Platform projects.

Now Available on NuGet!

Install-Package SuaveControls.FloatingActionButton

Special note for iOS: Make sure to call FloatingActionButtonRenderer.InitRenderer(); in your AppDelegate.cs in order to avoid linking it out.

Then you can include it in your XAML or call it from C# (See the example projects for a demo):

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:SuaveControls.FabExample"
             xmlns:controls="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
             x:Class="SuaveControls.FabExample.MainPage">
    <StackLayout Margin="32">
        <Label Text="This is a Floating Action Button!" 
           VerticalOptions="Center" 
           HorizontalOptions="Center"/>
        
        <controls:FloatingActionButton x:Name="FAB" HorizontalOptions="CenterAndExpand" WidthRequest="50" HeightRequest="50"  VerticalOptions="CenterAndExpand" Image="ic_add_white.png" ButtonColor="#03A9F4" Clicked="Button_Clicked"/>
    </StackLayout>
</ContentPage>

Android Example

iOS Example

TODO:

Make it more flexible. Add Different color states, add sizing adjustments, etc.
Create UWP implementation
Create Xamarin Component

xamarin.forms.controls.floatingactionbutton's People

Contributors

Stargazers

Watchers

xamarin.forms.controls.floatingactionbutton's Issues

Can it Works on UWP?

Hi, I try this in my Xamarin.Forms Project, It's very Good. But,It only work on Android & iOS, How to make it works on UWP? Because that I an not very good at XAML, I have no idea with this.

Crash on Android 4.x

Hi, if use this approach in Android 4.x will crash, to solve:

Change the two lines:
fab.BackgroundTintList = ColorStateList.ValueOf(this.Element.ButtonColor.ToAndroid());

To:
Android.Support.V4.View.ViewCompat.SetBackgroundTintList(fab, ColorStateList.ValueOf(this.Element.ButtonColor.ToAndroid()));

not circular button

code

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:views="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
             xmlns:transacoes="clr-namespace:FinanceiroApp.Transacoes;assembly=FinanceiroApp"
             xmlns:base="clr-namespace:FinanceiroApp.Base;assembly=FinanceiroApp"
             xmlns:resources="clr-namespace:FinanceiroApp.Resources;assembly=FinanceiroApp"
             x:Class="FinanceiroApp.Transacoes.TransacaoListaPage"
             x:Name="This">

    <ContentPage.ToolbarItems>
        <ToolbarItem Name="Filtro" Order="Primary" Priority="0" Command="{Binding FiltroCommand}"></ToolbarItem>
    </ContentPage.ToolbarItems>

    <ContentPage.Resources>
        <base:ListViewBackgroudColorConverter x:Key="ListViewBackgroudColorConverter" />
        <transacoes:ListaTransacaoIcone x:Key="ListaTransacaoIcone" />
    </ContentPage.Resources>

    <ContentPage.BindingContext>
        <transacoes:TransacaoListaPageModel></transacoes:TransacaoListaPageModel>
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <RelativeLayout>
            <StackLayout>

                <ListView
                          ItemsSource="{Binding Transacoes}"
                          CachingStrategy="RecycleElement"
                          HasUnevenRows="True">


                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <ViewCell.ContextActions>
                                    <MenuItem Command="{Binding BindingContext.QuitarTransacaoCommand, Source={x:Reference Name=This}}"  
                                              CommandParameter="{Binding .}" Text="Quitar"></MenuItem>

                                    <MenuItem Command="{Binding BindingContext.AlterarTransacaoCommand, Source={x:Reference Name=This}}"  
                                        CommandParameter="{Binding .}" Text="Alterar"></MenuItem>

                                    <MenuItem Command="{Binding BindingContext.ExcluirTransacaoCommand, Source={x:Reference Name=This}}"  
                                        CommandParameter="{Binding .}" Text="Excluir"></MenuItem>
                                </ViewCell.ContextActions>

                                <StackLayout 
                                     BackgroundColor="{Binding Pago, Converter={StaticResource ListViewBackgroudColorConverter}}">
                                    <Grid BackgroundColor="{Binding Pago, Converter={StaticResource ListViewBackgroudColorConverter}}">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"></ColumnDefinition>
                                            <ColumnDefinition Width="*"></ColumnDefinition>
                                        </Grid.ColumnDefinitions>

                                        <Image 
                                            Margin="15,0,0,0"
                                            HeightRequest="40" WidthRequest="40" Source="{Binding TipoTransacao, Converter={StaticResource ListaTransacaoIcone}}" ></Image>

                                        <StackLayout 
                                            Spacing="0"
                                            Grid.Column="1"
                                            BackgroundColor="{Binding Pago, Converter={StaticResource ListViewBackgroudColorConverter}}">
                                            <Label Text="{Binding Descricao}" FontSize="Medium"
                                                   Margin="15,0,0,0"
                                                   TextColor="White"
                                                   IsVisible="{Binding IsDescricao}"
                                                   VerticalOptions="Center"></Label>
                                            <Label FontSize="Medium"
                                                   Margin="15,0,0,0"
                                                   TextColor="White"
                                                   Text="{Binding NomePessoa}"
                                                   VerticalOptions="Center"></Label>
                                            <Label 
                                                Margin="15,0,0,0"
                                                FontSize="Small"
                                                FontAttributes="Italic"
                                                TextColor="White"
                                                Text="{Binding DataComValor}" Style="{DynamicResource ListItemDetailTextStyle}"
                                                VerticalOptions="Center"></Label>
                                        </StackLayout>

                                    </Grid>
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>

                </ListView>

            </StackLayout>
            <views:FloatingActionButton HorizontalOptions="CenterAndExpand" 
                                        VerticalOptions="CenterAndExpand" 
                                        Image="plus.png" ButtonColor="#03A9F4"
                                        Command="{Binding NovaTransacaoCommand}"
                                        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-90}"  
                                        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=-90}" />
        </RelativeLayout>
    </ContentPage.Content>
</ContentPage>

When building.. "skipping.. please check that your nuget package versions are compatiable"

i don't know why that warning occured. same warning occurs about 325.

i'm using version 2017.10.17, in application it works well.
but in VS that warning looks so busy.

can you help me?

Install-Package : Failed to add reference. The package 'SuaveControls.FloatingActionButton' tried to add a framework reference to 'System.Runtime' which was not found in the GAC. This is possibly a bug in the package. Please contact the package owners for assistance.
Error HRESULT E_FAIL has been returned from a call to a COM component.

trying to install with Xamarin Forms 2.4.0.282 and Xamarin.Android.Support 25.3.1.

Xamarin Forms 3.0.1

Is this compliant with latest Support Libraries and Xamarin 3.0? I'm getting XA errors, and I think it's related to this package.

Put a Label on the side of the FabButton

So, my Fab Button its working fine, but i need to put a label (caption) about what the button do like this.

How to do this ? My code:

<ContentPage.Content>

            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Padding="10" RowSpacing="10" ColumnSpacing="35">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <controls:CircleImage Aspect="AspectFill" Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
                                <controls:CircleImage.Source>
                                    <UriImageSource Uri="{Binding User.ProfilePicture}" CacheValidity="14" CachingEnabled="true"/>
                                </controls:CircleImage.Source>

                                <controls:CircleImage.WidthRequest>
                                    <OnPlatform x:TypeArguments="x:Double">
                                        <On Platform="Android, iOS">55</On>
                                        <On Platform="WinPhone">75</On>
                                    </OnPlatform>
                                </controls:CircleImage.WidthRequest>
                                <controls:CircleImage.HeightRequest>
                                    <OnPlatform x:TypeArguments="x:Double">
                                        <On Platform="Android, iOS">55</On>
                                        <On Platform="WinPhone">75</On>
                                    </OnPlatform>
                                </controls:CircleImage.HeightRequest>
                            </controls:CircleImage>

                            <Label  Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding User.FullName}" FontAttributes="Bold" VerticalOptions="End" />
                            <Label  Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding User.Username, StringFormat='@{0}'}" Font="Small" TextColor="#4BA0FB" VerticalOptions="Start"/>
                            <Image  Grid.Row="0" Grid.RowSpan="2" Grid.Column="2" Source="ic_add.png" HorizontalOptions="End" >
                                <Image.GestureRecognizers>
                                    <TapGestureRecognizer  CommandParameter="{Binding .}" Tapped="Image_OnTapped" />
                                </Image.GestureRecognizers>
                            </Image>
                        </Grid>

                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentView>
    <fabbutton:FloatingActionButton x:Name="btncurt" Clicked="btnCurt" ButtonColor="#4BA0FB" Image="ic_functions.png" WidthRequest="60" HeightRequest="60" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"
        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-75}"
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=-75}" />


</RelativeLayout>

</ContentPage.Content>

Turn the button into a menu composed of FAB

Something similar

Event Clicked not Firing if VerticalOptions=Start (any version)

So, i was testing the latest version and also pre-release version to check the updates of shadows, etc...
For my surprise, i had a FAB Button on VerticalOptions= End of page and was Ok. I changed to Start and the Event Clicked are not been fired. Althought the button appear normally. At 2018.1.5 and pre release 2018.3.1-pre1
Tested on Android 7.0 Api 24 (Galaxy S8 Device)

My structure is:

<contentpage>
<grid>
<Fabbutton HorizontalOptions="End" VerticalOptions="Start"/>
<StackLayout/>
</grid>
</contentpage>

Update: All versions tested and no one works.

FAB's size is shrunk when resume the app

Greetings!

I noticed that the first time you access the page containing a FAB it looks normal but when you resume the app it shrinks its size (see screenshots).

This is my (simplified) 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"
             xmlns:suave="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
             x:Class="Views.ListPage">

	<Grid Padding="0">
		<ListView></ListView>

		<suave:FloatingActionButton HorizontalOptions="End" VerticalOptions="End" 
		                            Image="ic_camera_alt.png" >
		</suave:FloatingActionButton>
	</Grid>
</ContentPage>

First page access:

After resuming the app:

I ran this test in the simulator with Android 6.0 and 9.0.
I'm using the version 2018.1.5 of the plugin with Xamarin.Forms 3.4.0.1008975

I did have this working but now am stuck :(

I did have this working but now am stuck, Hopeful you can help :) the error i get is as below

Severity Code Description Project File Line Suppression State
Error CS0400 The type or namespace name 'SuaveControls' could not be found in the global namespace (are you missing an assembly reference?) test C:\test \test \test \obj\Debug\netstandard2.0\Pages\test \Displaytest\GroupDetails.xaml.g.cs 23 Active

Floating Popup Menu

Hi @SuavePirate,

Thank you for helping us with this great renderer.

Any thought on supporting a ListView on the ButtonClick event that opens up a dynamic floating menu [served via an ItemTemplate + dynamic data template containing floating menu (image, and label) ] on the appropriate side on the screen depending on the button's position ?

Thanks,

[Request] Example List view

Can you add a example to put a Floating Action Button on top of List view and also support for UWP platform.

Button looks mashed together

I downloaded the sample project and run it on a android emulator. But the button looks like this:

I don't know if that is related, but I had to update the nuget packages (especially the Xamarin Ones) before I could build.
I had the same in a project of mine. Do you have any idea what that might be?

You need to use a Theme.AppCompat theme (or descendant) with the design library

When I have a Floating Action Button added to a page i get this exception with Xamarin.Forms 2.5.1.527436

Java.Lang.IllegalArgumentException: You need to use a Theme.AppCompat theme (or descendant) with the design library.

It seems this is due to an obsolet constructor in the renderer.

How to set resource embedded for image?

example:

<views:FloatingActionButton HorizontalOptions="CenterAndExpand" 
                                        Command="{Binding NovoClienteCommand}"
                                           VerticalOptions="CenterAndExpand" 
                                           Image="{resources:ImageResource plus.png}" ButtonColor="#03A9F4"
                                           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-90}"  
                                           RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=-90}" />

[ContentProperty(nameof(Source))]
    public class ImageResourceExtension : IMarkupExtension
    {
        public string Source { get; set; }

        public object ProvideValue(IServiceProvider serviceProvider)
        {
            if (Source == null)
            {
                return null;
            }

            var imageSource = ImageSource.FromResource(ImageNameFromResource(Source), typeof(ImageResourceExtension).GetTypeInfo().Assembly);

            return imageSource;
        }

        private string ImageNameFromResource(string u)
        {
            var assembly = typeof(App).GetTypeInfo().Assembly;
            foreach (var res in assembly.GetManifestResourceNames())
            {
                if (res.Contains(u))
                {
                    return res;
                }
            }
            return null;
        }
    }

float button border radius can not control

After installing Version 2018.1.5 (Not updated PCL, but update work on droid and ios, separate issue added) in droid project previously worked floating button with, width and height 50 and border radius 30 looks like tiny flat egg. No icon in there.
My button has no BackgroundColor, if i add background color, it is looking big with tiny ellipse inside it, still no icon.
Remove border radius and border radius 20 both seems not working

FAB on iOS has fixed size

When manipulating Height/WidthRequest properties of controls:FloatingActionButton Android version scales correctly but iOS keeps always the same size

Xamarin.Forms.Controls.FloatingActionButton/src/SuaveControls.FloatingActionButton.iOS/Renderers/FloatingActionButtonRenderer.cs

Line 35 in 384d93e

Element.HeightRequest = 50;

Change the image size when the fab button heightrequest or widthrequest changes to smaller

I am trying to change dinamically the size of the button, but the image inside disappear when decrease the size to half.

No image showing in the Android Section

I have added the image in the drawable folder but the icon is not showing.

But it's working fine in the IOS section...

Can you guide me please what's the issue here??

Button color not set

Hi,
Really exiting to see FAB in xamarin forms. Grate work.

i have got small issue when I am trying this out , button not getting color although i have assign it
can please help me on this ,

my code

        <ListView x:Name="list" 
              ItemTapped="list_ItemTapped" 
              HasUnevenRows="True" 
              BackgroundColor="LightGray" 
              IsPullToRefreshEnabled="True"
          SelectedItem="{Binding SelectedQuote, Mode=TwoWay}"
          CachingStrategy="RecycleElement"
              RefreshCommand="{Binding RefreshCommand}"
              IsRefreshing="{Binding IsRefreshing}">
        
    <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Frame   HasShadow="True"   CornerRadius="7"    Padding="5">
                    <Grid RowSpacing="0">
                        <Grid.RowDefinitions >
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="1.5*" />
                            <RowDefinition Height="40" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <Label Text="{Binding item}" BackgroundColor="{Binding itemColor}" TextColor="White" FontAttributes="Bold" ></Label>
                        <Label Text="{Binding description}" BackgroundColor="White" Grid.Row="1" ></Label>
                        <StackLayout Grid.Row="2" Orientation="Horizontal" Padding="0,5,0,5" HorizontalOptions="FillAndExpand">
                            <controls:CircleImage x:Name="imageview"  Source="{Binding Image}" Aspect="AspectFill" HorizontalOptions="Start"></controls:CircleImage>
                            <controls:CircleImage x:Name="imageview2"  Source="star.png" IsVisible="{Binding isFavarit}" Aspect="AspectFill" HorizontalOptions="EndAndExpand"></controls:CircleImage>
                        </StackLayout>
                    </Grid>
                    </Frame>
            </ViewCell>
                </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

    <fbcontrols:FloatingActionButton HorizontalOptions="End" VerticalOptions="End" Margin="0,0,10,10" WidthRequest="50" HeightRequest="50" Image="ic_add_white.png"  ButtonColor="Blue" />
</Grid>

Final Release of FAB 2018.3.1-pre1

Hi @SuavePirate,

When do you plan to release a final version of FAB 2018 3.1?
Will you be releasing a .Net Compatible version of this package ?

Thanks,

FAB Button square in shape

FAB Button square in shape.

Can not install on PCL profile259

Can not install latest on PCL profile 259

Severity Code Description Project File Line Suppression State
Error Could not install package 'SuaveControls.FloatingActionButton 2018.1.5'. You are trying to install this package into a project that targets '.NETPortable,Version=v4.5,Profile=Profile259', but the package does not contain any assembly references or content files that are compatible with that framework. For more information, contact the package author. 0

You need to use a Theme.AppCompat theme (or descendant) with the design library.

Hi,

I am getting this error. I added the l;ibrary to Protable, IOS, and Droid. I also initiated the FloatingActionButtonRenderer.

Thanks

Absolute Layout example

I have been trying to get this to show properly using an absolute layout (so I can have the FAB on the bottom right, about 16 from the edge, over any other content on the screen).

I am not coming right.
I have been checking other examples of AbsoluteLayout, but nothing is working.

Could anyone create an example of this FAB in the bottom right of the layout?

Navigation through DelegateCommand from Prism Library never gets called

Hello there,

I have this small issue where when I setup the FAB and set up the command to navigate like so:

This is ContentPage with FAB in it:
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms" prism:ViewModelLocator.AutowireViewModel="True" xmlns:control="clr-namespace:CashFlowBuddie.CustomRenderers;assembly=CashFlowBuddie" x:Class="CashFlowBuddie.Views.IncomeSummaryPage" Title="CashFlow Summary"> <StackLayout Margin="32"> <control:FloatingActionButton x:Name="FAB" WidthRequest="50" HeightRequest="50" HorizontalOptions="EndAndExpand" VerticalOptions="EndAndExpand" Image="ic_add_black" ButtonColor="#ffa4a2" Command="{Binding AddIncomeCommand}"/> </StackLayout> </ContentPage>

This is my page viewmodel with the DelegateCommand setup:

public class IncomeSummaryPageViewModel : ViewModelBase
{
    private readonly INavigationService _navigationService;
    private readonly IPageDialogService _dialogService;
    public DelegateCommand AddIncomeCommand { get; set; }
    public IncomeSummaryPageViewModel(INavigationService navigationService, IPageDialogService 
        dialogService) : base(navigationService, dialogService)
    {
        Title = "Income Summary";
        AddIncomeCommand = new DelegateCommand(AddIncome);
        _navigationService = navigationService;
        _dialogService = dialogService;
    }
    private void AddIncome()
    {
        //dialogService.DisplayAlertAsync("Hey", "FAB click is handled by command", "Yipee!", "Dang It!");
        _navigationService.NavigateAsync(
        "/NavigationPage/MainDetailPage/IncomeSummaryPage/AddIncomePage", null,true,true);
    }
}

It doesn't work! If I am not navigating anywhere using the dialogService, I get a dialog with the message I commented out in the code above. I am not sure what to do here so I thought maybe you could help?

Android has square shadow - not circle

The button shadow around the floating action button in Android is a square, not a circle.
Currently using:

Android 8.0 as target
Xamarin.Android.Support.Compat v26.1.0.1
Xamarin.Forms v2.5.0.91635

Project can't be opened in VS 15.8.1 - "SuaveControls.FloatingActionButton.NuGet.nuproj"

Hi @SuavePirate,

I cloned your repo to take a look at the sample app.

Apparently, while opening it in VS 15.8.1 I am getting following error -
May be this project need to be ported to a newer project template under 15.8 ?

Thanks,

Circular Dependency in NuGet Package

Do this:
Install-Package SuaveControls.FloatingActionButton

Then you get this:

PM> Install-Package SuaveControls.FloatingActionButton


Attempting to gather dependency information for package 'SuaveControls.FloatingActionButton.2017.11.27' with respect to project 'Veronica.Android', targeting 'MonoAndroid,Version=v7.1'
Gathering dependency information took 1.55 sec
Attempting to resolve dependencies for package 'SuaveControls.FloatingActionButton.2017.11.27' with DependencyBehavior 'Lowest'
Install-Package : Circular dependency detected 'SuaveControls.FloatingActionButton 2017.11.27 => SuaveControls.FloatingActionButton 2017.11.27'.
At line:1 char:1
+ Install-Package SuaveControls.FloatingActionButton
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : NotSpecified: (:) [Install-Package], Exception
    + FullyQualifiedErrorId : NuGetCmdletUnhandledException,NuGet.PackageManagement.PowerShellCmdlets.InstallPackageCommand
 
Time Elapsed: 00:00:01.9385645

I attempted to install it in the PCL, The Android and the iOS projects. I tried it from the console as well as from the Manage NuGet Packages GUI.

FAB is not a circle but a rectangle

Hi,
i want to use your project for implementig FAB into my Xamarin project. I downloaded the nuget package and just implemented the example on an empty page. But my Button is a rectangle and did not have the color i set to it. Would be greate if one can help me. I added the code and a screenshot:

The XAML File:
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:b="clr-namespace:Xam.Behaviors;assembly=Xam.Behaviors" xmlns:libEx="clr-namespace:Lib.MarkupExtensions;assembly=Lib" xmlns:fab="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton" Title="{libEx:Translate ListShops}"> <StackLayout Margin="32"> <fab:FloatingActionButton x:Name="FAB" HorizontalOptions="FillAndExpand" WidthRequest="50" HeightRequest="50" VerticalOptions="FillAndExpand" Image="ic_add_white.png" ButtonColor="#03A9F4" Clicked="Button_Clicked"/> </StackLayout> </ContentPage>

Screenshot

Thank you in advance.

Press event not working?

Hello!
First off - thanks for this extension! There is a minor issue when adding the NuGet Package:

Warning NU1701 Package 'SuaveControls.FloatingActionButton 2018.1.5' was restored using '.NETFramework,Version=v4.6.1' instead of the project target framework '.NETStandard,Version=v2.0'. This package may not be fully compatible with your project.

Don't know if the issue here is on my side or on yours.

Main Issue here:
I want to show a ActionSheet when pressing the FAB but for some reason the event is never invoked.

Here is my sample code
XAML

        <fab:FloatingActionButton HorizontalOptions="EndAndExpand" VerticalOptions="EndAndExpand"
                                  HeightRequest="90"
                                  WidthRequest="80"
                                  Clicked="AddNewScan"
                                  Pressed="Test">
            <fab:FloatingActionButton.Image>
                <OnPlatform x:TypeArguments="FileImageSource">
                    <On Platform="Android" Value="ic_add_a_photo_white_48dp.png" />
                    <On Platform="iOS" Value="ic_add_a_photo_white_48pt.png" />
                </OnPlatform>
            </fab:FloatingActionButton.Image>
        </fab:FloatingActionButton>

Code-Behind:

 private void Test(object sender, EventArgs e)
    {
        Console.WriteLine($"?!?!?!?!BUTTON PRESS WORKS?!?!?!?!");
    }

Hope you could help me out!
Thanks
Kineese

suavepirate / xamarin.forms.controls.floatingactionbutton Goto Github PK

xamarin.forms.controls.floatingactionbutton's Introduction

Xamarin.Forms.Controls.FloatingActionButton

How to use

Now Available on NuGet!

Android Example

iOS Example

TODO:

xamarin.forms.controls.floatingactionbutton's People

Contributors

Stargazers

Watchers

Forkers

xamarin.forms.controls.floatingactionbutton's Issues

Recommend Projects

Recommend Topics

Recommend Org