Open ziomek64 opened 1 year ago
We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.
Any updates on this? Still waiting.
Any updates on this? Still waiting.
Not up to me man, ms doesn't have resources on MAUI π
PLEASE, implement it is really useful!
still waiting!
Up
Any progress on this?
Any progress on this?
Of course not, nobody cares from Microsoft
Any progress on this?
Still no ofc........
This is how I realized <FloatingActionButton>
using only XAML markup.
Example based on <Grid>
Control, that have such feature: if any contol inside Grid-layout placed in same position (row-column) like another - this second element stay up on that first like on the stack.
So, if that first element is <StackLayout>
with <ScrollView>
, and second element is usual <Button>
we getting as a result <FloatingActionButton>
-analogue with full functionality of that, that can "fly"on the stack while user is scrolling screen.
This is how it looks on device:
This is markup example.
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XXX.MainPage">
<Grid>
<ScrollView>
<VerticalStackLayout Spacing="10">
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
<Label Text="-------------------------------------------------"/>
<Label Text="================================================="/>
</VerticalStackLayout>
</ScrollView>
<Button
x:Name="FloatingActionButton"
HorizontalOptions="End"
VerticalOptions="End"
Text="+"
Clicked="OnFloatingActionButtonClicked"
CornerRadius="50"
Margin="0, 0, 10, 10"
FontAttributes="Bold"/>
</Grid>
</ContentPage>```
This is how I realized
<FloatingActionButton>
using only XAML markup.Example based on
<Grid>
Control, that have such feature: if any contol inside Grid-layout placed in same position (row-column) like another - this second element stay up on that first like on the stack.So, if that first element is
<StackLayout>
with<ScrollView>
, and second element is usual<Button>
we getting as a result<FloatingActionButton>
-analogue with full functionality of that, that can "fly"on the stack while user is scrolling screen.This is how it looks on device:
This is markup example.
<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XXX.MainPage"> <Grid> <ScrollView> <VerticalStackLayout Spacing="10"> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> <Label Text="-------------------------------------------------"/> <Label Text="================================================="/> </VerticalStackLayout> </ScrollView> <Button x:Name="FloatingActionButton" HorizontalOptions="End" VerticalOptions="End" Text="+" Clicked="OnFloatingActionButtonClicked" CornerRadius="50" Margin="0, 0, 10, 10" FontAttributes="Bold"/> </Grid> </ContentPage>```
Couldn't you just use absolute layout and place it where you want?
Yea I've used absolute layout myself with positionproportional
Description
This was already requested in Xamarin Forms - https://github.com/xamarin/Xamarin.Forms/issues/12997
So I will copy what's there, the author is - techprotom, he described it perfectly
We really need it, it's a core of material design
Floating action button
The floating action button is one of the most crucial components used in Google's material design - especially for layouts in which it is needed to add one or more items to a list or compose a new email. In addition to this - it's striking design - which can come in two forms (mini or normal size) make for a better user experience than using standard buttons.
Imagine this GitHub Repo as a puzzle - this puzzle is missing crucial parts. One of these parts is the floating action - which I know and can guarantee will be a perfect feature/addition to your library.
Implementing a floating action button in Xamarin.Forms right now is a clunky job - and a third-party library which makes it easier to implement a floating action button plus one that utilises material design would make not only my life - but the life of many others - just that much better.
Please consider adding this to your library - it will certainly attract more users.
Email me at todoescode@gmail.com if you need help or want to ask any questions. - Probably don't email him, as it was old issue
Images and links:
Floating action button: https://material.io/components/buttons-floating-action-button
Regular![regular](https://github.com/dotnet/maui/assets/84880432/5bea9dbb-121e-4e22-bf75-1b5cb0efa031)
Mini![mini](https://github.com/dotnet/maui/assets/84880432/ddd6fe14-b1ac-4a6d-9ba0-7239efc2ecc6)
On Hover![on_hover](https://github.com/dotnet/maui/assets/84880432/6778906d-7469-46c3-96e8-2226f3ddc6b1)
On Clicked![on_clicked](https://github.com/dotnet/maui/assets/84880432/e0c00b95-474d-4d8f-8075-e6641cfae0ca)
Extended![extended](https://github.com/dotnet/maui/assets/84880432/7affc659-ebab-4037-9b88-cb3f8bf60386)
Extended (no icon)![extended_noicon](https://github.com/dotnet/maui/assets/84880432/81e293f9-c117-4f2a-b0d3-ea9abf228714)
Use cases (there are many)
![case6](https://github.com/dotnet/maui/assets/84880432/b9dd4b64-28a8-45ba-a1b8-d499bd67ecd0)
Public API Changes
TBD
Intended Use-Case
For example mail app, would be great to have an action button at a glance at all times to compose a new email. When scrolling down it would disappear to not cover mails, when going up it would appear again.
For long lists, collections, a button like this could scroll the whole collection up so you're back at the top again or display a pop-up to choose a group to scroll to.
Possibilities are endless, those are two simple ones that i came up with and that I often see in apps. See the pictures as well!