How to make a FloatingActionButton work on top of a ListView and position it correctly
0
I am trying to get a SuaveControls.FloatingActionButton to work on top of a ListView following the example on this page - https://devlinduldulao.pro/how-to-create-a-floating-action-button/
My ListView is inside a StackLayout so I decided to wrap them into an AbsoluteLayout
Here is the View/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:views="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
xmlns:local="clr-namespace:DPM.XForms"
x:Class="DPM.XForms.ProjectListPage"
Title="Drive Plus Mobile"
>
<AbsoluteLayout>
<StackLayout Orientation="Vertical" Spacing="1">
<Label Text="TopBar ..." BackgroundColor="Gray" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center"/>
<!-- Project Search/Filter toolbar-->
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
<Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
<Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Text="++" WidthRequest="27" HeightRequest="27" Clicked="CreateProject_Clicked"></Button>
</StackLayout>
</StackLayout>
<Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />
<ListView x:Name="lvProjects" ItemTapped="OnProjectTapped" RowHeight="54" BackgroundColor="DarkGray">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Project Row -->
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
<Button
Image="Colombia.png"
BackgroundColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="54"
HeightRequest="54"
>
</Button>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label
Text="{Binding Name}"
TextColor="Black"
Font="Bold,17"
HorizontalOptions="StartAndExpand"
VerticalOptions="Start"
/>
<Label
Text="{Binding Brand}"
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="Start"
/>
<Label
Text=".."
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="End"
/>
</StackLayout>
<Button Text="3" WidthRequest="44"></Button>
<Button Text=">" WidthRequest="44" BackgroundColor="White" ></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<views:FloatingActionButton
Image="CreateProject.png"
WidthRequest="80"
HeightRequest="80"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Clicked="FloatingActionButton_Clicked"
>
</views:FloatingActionButton>
</AbsoluteLayout>
</ContentPage>
But with this approach two things are happening
- When the device is in Landscape mode the
ListViewis not growing as it did before adding theAbsoluteLayout
- Dont know how to position the
FloatingActionButtonto always stay on the lower right corner of any device
I have also tried placing the FloatingActionButton inside the current StackLayout but it does not float is just added below or above the listview as a regular "row" like is shown here
Feel free to use the comments if something is not clear.
android listview xamarin floating-action-button asked Nov 13 '18 at 20:51
Mauricio Gracia GutierrezMauricio Gracia Gutierrez
5,54533659
add a comment |
0
I am trying to get a SuaveControls.FloatingActionButton to work on top of a ListView following the example on this page - https://devlinduldulao.pro/how-to-create-a-floating-action-button/
My ListView is inside a StackLayout so I decided to wrap them into an AbsoluteLayout
Here is the View/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:views="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
xmlns:local="clr-namespace:DPM.XForms"
x:Class="DPM.XForms.ProjectListPage"
Title="Drive Plus Mobile"
>
<AbsoluteLayout>
<StackLayout Orientation="Vertical" Spacing="1">
<Label Text="TopBar ..." BackgroundColor="Gray" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center"/>
<!-- Project Search/Filter toolbar-->
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
<Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
<Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Text="++" WidthRequest="27" HeightRequest="27" Clicked="CreateProject_Clicked"></Button>
</StackLayout>
</StackLayout>
<Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />
<ListView x:Name="lvProjects" ItemTapped="OnProjectTapped" RowHeight="54" BackgroundColor="DarkGray">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Project Row -->
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
<Button
Image="Colombia.png"
BackgroundColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="54"
HeightRequest="54"
>
</Button>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label
Text="{Binding Name}"
TextColor="Black"
Font="Bold,17"
HorizontalOptions="StartAndExpand"
VerticalOptions="Start"
/>
<Label
Text="{Binding Brand}"
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="Start"
/>
<Label
Text=".."
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="End"
/>
</StackLayout>
<Button Text="3" WidthRequest="44"></Button>
<Button Text=">" WidthRequest="44" BackgroundColor="White" ></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<views:FloatingActionButton
Image="CreateProject.png"
WidthRequest="80"
HeightRequest="80"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Clicked="FloatingActionButton_Clicked"
>
</views:FloatingActionButton>
</AbsoluteLayout>
</ContentPage>
But with this approach two things are happening
- When the device is in Landscape mode the
ListViewis not growing as it did before adding theAbsoluteLayout
- Dont know how to position the
FloatingActionButtonto always stay on the lower right corner of any device
I have also tried placing the FloatingActionButton inside the current StackLayout but it does not float is just added below or above the listview as a regular "row" like is shown here
Feel free to use the comments if something is not clear.
android listview xamarin floating-action-button asked Nov 13 '18 at 20:51
Mauricio Gracia GutierrezMauricio Gracia Gutierrez
5,54533659
add a comment |
0
0
0
I am trying to get a SuaveControls.FloatingActionButton to work on top of a ListView following the example on this page - https://devlinduldulao.pro/how-to-create-a-floating-action-button/
My ListView is inside a StackLayout so I decided to wrap them into an AbsoluteLayout
Here is the View/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:views="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
xmlns:local="clr-namespace:DPM.XForms"
x:Class="DPM.XForms.ProjectListPage"
Title="Drive Plus Mobile"
>
<AbsoluteLayout>
<StackLayout Orientation="Vertical" Spacing="1">
<Label Text="TopBar ..." BackgroundColor="Gray" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center"/>
<!-- Project Search/Filter toolbar-->
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
<Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
<Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Text="++" WidthRequest="27" HeightRequest="27" Clicked="CreateProject_Clicked"></Button>
</StackLayout>
</StackLayout>
<Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />
<ListView x:Name="lvProjects" ItemTapped="OnProjectTapped" RowHeight="54" BackgroundColor="DarkGray">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Project Row -->
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
<Button
Image="Colombia.png"
BackgroundColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="54"
HeightRequest="54"
>
</Button>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label
Text="{Binding Name}"
TextColor="Black"
Font="Bold,17"
HorizontalOptions="StartAndExpand"
VerticalOptions="Start"
/>
<Label
Text="{Binding Brand}"
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="Start"
/>
<Label
Text=".."
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="End"
/>
</StackLayout>
<Button Text="3" WidthRequest="44"></Button>
<Button Text=">" WidthRequest="44" BackgroundColor="White" ></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<views:FloatingActionButton
Image="CreateProject.png"
WidthRequest="80"
HeightRequest="80"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Clicked="FloatingActionButton_Clicked"
>
</views:FloatingActionButton>
</AbsoluteLayout>
</ContentPage>
But with this approach two things are happening
- When the device is in Landscape mode the
ListViewis not growing as it did before adding theAbsoluteLayout
- Dont know how to position the
FloatingActionButtonto always stay on the lower right corner of any device
I have also tried placing the FloatingActionButton inside the current StackLayout but it does not float is just added below or above the listview as a regular "row" like is shown here
Feel free to use the comments if something is not clear.
android listview xamarin floating-action-button asked Nov 13 '18 at 20:51
Mauricio Gracia GutierrezMauricio Gracia Gutierrez
5,54533659
I am trying to get a SuaveControls.FloatingActionButton to work on top of a ListView following the example on this page - https://devlinduldulao.pro/how-to-create-a-floating-action-button/
My ListView is inside a StackLayout so I decided to wrap them into an AbsoluteLayout
Here is the View/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:views="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
xmlns:local="clr-namespace:DPM.XForms"
x:Class="DPM.XForms.ProjectListPage"
Title="Drive Plus Mobile"
>
<AbsoluteLayout>
<StackLayout Orientation="Vertical" Spacing="1">
<Label Text="TopBar ..." BackgroundColor="Gray" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center"/>
<!-- Project Search/Filter toolbar-->
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
<Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
<Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Text="++" WidthRequest="27" HeightRequest="27" Clicked="CreateProject_Clicked"></Button>
</StackLayout>
</StackLayout>
<Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />
<ListView x:Name="lvProjects" ItemTapped="OnProjectTapped" RowHeight="54" BackgroundColor="DarkGray">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Project Row -->
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
<Button
Image="Colombia.png"
BackgroundColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="54"
HeightRequest="54"
>
</Button>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label
Text="{Binding Name}"
TextColor="Black"
Font="Bold,17"
HorizontalOptions="StartAndExpand"
VerticalOptions="Start"
/>
<Label
Text="{Binding Brand}"
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="Start"
/>
<Label
Text=".."
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="End"
/>
</StackLayout>
<Button Text="3" WidthRequest="44"></Button>
<Button Text=">" WidthRequest="44" BackgroundColor="White" ></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<views:FloatingActionButton
Image="CreateProject.png"
WidthRequest="80"
HeightRequest="80"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Clicked="FloatingActionButton_Clicked"
>
</views:FloatingActionButton>
</AbsoluteLayout>
</ContentPage>
But with this approach two things are happening
- When the device is in Landscape mode the
ListViewis not growing as it did before adding theAbsoluteLayout
- Dont know how to position the
FloatingActionButtonto always stay on the lower right corner of any device
I have also tried placing the FloatingActionButton inside the current StackLayout but it does not float is just added below or above the listview as a regular "row" like is shown here
Feel free to use the comments if something is not clear.
android listview xamarin floating-action-button android listview xamarin floating-action-button asked Nov 13 '18 at 20:51
Mauricio Gracia GutierrezMauricio Gracia Gutierrez
5,54533659
asked Nov 13 '18 at 20:51
Mauricio Gracia GutierrezMauricio Gracia Gutierrez
5,54533659
edited Nov 14 '18 at 14:10
Mauricio Gracia Gutierrez
asked Nov 13 '18 at 20:51
Mauricio Gracia GutierrezMauricio Gracia Gutierrez
5,54533659
asked Nov 13 '18 at 20:51
Mauricio Gracia GutierrezMauricio Gracia Gutierrez
5,54533659
asked Nov 13 '18 at 20:51
Mauricio Gracia GutierrezMauricio Gracia Gutierrez
5,54533659
5,54533659
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
1
You can remove absolute layout since you can see that your layout doesn't fully expand at landscape mode.
You can try this one
<MainLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
//YourTopBar
// YourListView
<StackLayout HorizontalOptions="End"
VerticalOptions="End"
Spacing="0"
Margin="15">
<YourFloatingButton />
</StackLayout>
</MainLayout>
The mainlayout can be a grid or stacklayout
answered Nov 14 '18 at 0:06
Swift_TaltSwift_Talt
312113
Thanks for your answer but this produces something very similar to the third image of my question, but with the button to the right and bottom but is not floating
– Mauricio Gracia Gutierrez
Nov 14 '18 at 14:31
add a comment |
1
You can modify the layout to use Grid and AbsoluteLayout to wrapper the listview and Floating button. So it is somethig like the following:(As I don't have your list datasource, to be simple, I just put a mock list)
<?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:local="clr-namespace:App51"
x:Class="App51.MainPage">
<StackLayout Orientation="Vertical" HorizontalOptions="CenterAndExpand">
<!-- Project Search/Filter toolbar-->
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
<Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
<Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Text="++" WidthRequest="27" HeightRequest="27" ></Button>
</StackLayout>
</StackLayout>
<Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="8*" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="FAB" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="24" FontAttributes="Bold" BackgroundColor="LightGray"
TextColor="CadetBlue" />
<AbsoluteLayout Grid.Row="1">
<ListView AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,1,1,1"
VerticalOptions="FillAndExpand"
SeparatorColor="Black"
RowHeight="50"
BackgroundColor="Gray">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Project Row -->
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
<Button
Image="Colombia.png"
BackgroundColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="54"
HeightRequest="54"
>
</Button>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label
Text="Binding Name"
TextColor="Black"
Font="Bold,17"
HorizontalOptions="StartAndExpand"
VerticalOptions="Start"
/>
<Label
Text="Binding Name"
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="Start"
/>
<Label
Text=".."
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="End"
/>
</StackLayout>
<Button Text="3" WidthRequest="44"></Button>
<Button Text=">" WidthRequest="44" BackgroundColor="White" ></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<views:FloatingActionButton Grid.Row="1" Grid.Column="1"
Image="CreateProject.png"
WidthRequest="80"
HeightRequest="80"
HorizontalOptions="End"
VerticalOptions="End"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="1.0,1.0,-1,-1"
Margin="10" >
</views:FloatingActionButton>
</AbsoluteLayout>
</Grid>
</StackLayout>
</ContentPage>
And the result is like this:
answered Nov 14 '18 at 8:33
AbbyWangAbbyWang
3795
using this approach makes the "Floating" button appear as the last row below the ListView and therefore is not floating, see third image of my question
– Mauricio Gracia Gutierrez
Nov 14 '18 at 14:07
Sorry I didn't notice the disappearance of the "Floating", I have modified the answer.
– AbbyWang
Nov 15 '18 at 6:39
add a comment |
0
Based on @Swift_Talt answer and this discussion- https://forums.xamarin.com/discussion/52420/create-a-layered-page-layering-controls
I found this solution using a Grid of one (1) cell where the ListView (background) and the FloatingActionButton are on the same unique cell
This is how it looks:
And here is the View/Page
<?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:local="clr-namespace:DPM.XForms"
x:Class="DPM.XForms.ProjectListPage"
Title="Drive Plus Mobile"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Orientation="Vertical" Spacing="1">
<Label Text="TopBar ..." BackgroundColor="Gray" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center"/>
<!-- Project Search/Filter toolbar-->
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
<Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
<Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Text="++" WidthRequest="27" HeightRequest="27" Clicked="CreateProject_Clicked"></Button>
</StackLayout>
</StackLayout>
<Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />
<ListView x:Name="lvProjects" ItemTapped="OnProjectTapped" RowHeight="54" BackgroundColor="DarkGray">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Project Row -->
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
<Button
Image="Colombia.png"
BackgroundColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="54"
HeightRequest="54"
>
</Button>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label
Text="{Binding Name}"
TextColor="Black"
Font="Bold,17"
HorizontalOptions="StartAndExpand"
VerticalOptions="Start"
/>
<Label
Text="{Binding Brand}"
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="Start"
/>
<Label
Text=".."
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="End"
/>
</StackLayout>
<Button Text="3" WidthRequest="44"></Button>
<Button Text=">" WidthRequest="44" BackgroundColor="White" ></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="0" HorizontalOptions="End" VerticalOptions="End" Spacing="0" Margin="15">
<views:FloatingActionButton
Image="CreateProject.png"
WidthRequest="80"
HeightRequest="80"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Clicked="FloatingActionButton_Clicked"
>
</views:FloatingActionButton>
</StackLayout>
</Grid>
</ContentPage>
answered Nov 14 '18 at 14:57
Mauricio Gracia GutierrezMauricio Gracia Gutierrez
5,54533659
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53289308%2fhow-to-make-a-floatingactionbutton-work-on-top-of-a-listview-and-position-it-cor%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You can remove absolute layout since you can see that your layout doesn't fully expand at landscape mode.
You can try this one
<MainLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
//YourTopBar
// YourListView
<StackLayout HorizontalOptions="End"
VerticalOptions="End"
Spacing="0"
Margin="15">
<YourFloatingButton />
</StackLayout>
</MainLayout>
The mainlayout can be a grid or stacklayout
answered Nov 14 '18 at 0:06
Swift_TaltSwift_Talt
312113
Thanks for your answer but this produces something very similar to the third image of my question, but with the button to the right and bottom but is not floating
– Mauricio Gracia Gutierrez
Nov 14 '18 at 14:31
add a comment |
1
You can remove absolute layout since you can see that your layout doesn't fully expand at landscape mode.
You can try this one
<MainLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
//YourTopBar
// YourListView
<StackLayout HorizontalOptions="End"
VerticalOptions="End"
Spacing="0"
Margin="15">
<YourFloatingButton />
</StackLayout>
</MainLayout>
The mainlayout can be a grid or stacklayout
answered Nov 14 '18 at 0:06
Swift_TaltSwift_Talt
312113
Thanks for your answer but this produces something very similar to the third image of my question, but with the button to the right and bottom but is not floating
– Mauricio Gracia Gutierrez
Nov 14 '18 at 14:31
add a comment |
1
1
1
You can remove absolute layout since you can see that your layout doesn't fully expand at landscape mode.
You can try this one
<MainLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
//YourTopBar
// YourListView
<StackLayout HorizontalOptions="End"
VerticalOptions="End"
Spacing="0"
Margin="15">
<YourFloatingButton />
</StackLayout>
</MainLayout>
The mainlayout can be a grid or stacklayout
answered Nov 14 '18 at 0:06
Swift_TaltSwift_Talt
312113
You can remove absolute layout since you can see that your layout doesn't fully expand at landscape mode.
You can try this one
<MainLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
//YourTopBar
// YourListView
<StackLayout HorizontalOptions="End"
VerticalOptions="End"
Spacing="0"
Margin="15">
<YourFloatingButton />
</StackLayout>
</MainLayout>
The mainlayout can be a grid or stacklayout
answered Nov 14 '18 at 0:06
Swift_TaltSwift_Talt
312113
edited Nov 14 '18 at 0:18
answered Nov 14 '18 at 0:06
Swift_TaltSwift_Talt
312113
answered Nov 14 '18 at 0:06
Swift_TaltSwift_Talt
312113
answered Nov 14 '18 at 0:06
Swift_TaltSwift_Talt
312113
312113
Thanks for your answer but this produces something very similar to the third image of my question, but with the button to the right and bottom but is not floating
– Mauricio Gracia Gutierrez
Nov 14 '18 at 14:31
add a comment |
Thanks for your answer but this produces something very similar to the third image of my question, but with the button to the right and bottom but is not floating
– Mauricio Gracia Gutierrez
Nov 14 '18 at 14:31
Thanks for your answer but this produces something very similar to the third image of my question, but with the button to the right and bottom but is not floating
– Mauricio Gracia Gutierrez
Nov 14 '18 at 14:31
Thanks for your answer but this produces something very similar to the third image of my question, but with the button to the right and bottom but is not floating
– Mauricio Gracia Gutierrez
Nov 14 '18 at 14:31
add a comment |
1
You can modify the layout to use Grid and AbsoluteLayout to wrapper the listview and Floating button. So it is somethig like the following:(As I don't have your list datasource, to be simple, I just put a mock list)
<?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:local="clr-namespace:App51"
x:Class="App51.MainPage">
<StackLayout Orientation="Vertical" HorizontalOptions="CenterAndExpand">
<!-- Project Search/Filter toolbar-->
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
<Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
<Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Text="++" WidthRequest="27" HeightRequest="27" ></Button>
</StackLayout>
</StackLayout>
<Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="8*" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="FAB" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="24" FontAttributes="Bold" BackgroundColor="LightGray"
TextColor="CadetBlue" />
<AbsoluteLayout Grid.Row="1">
<ListView AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,1,1,1"
VerticalOptions="FillAndExpand"
SeparatorColor="Black"
RowHeight="50"
BackgroundColor="Gray">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Project Row -->
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
<Button
Image="Colombia.png"
BackgroundColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="54"
HeightRequest="54"
>
</Button>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label
Text="Binding Name"
TextColor="Black"
Font="Bold,17"
HorizontalOptions="StartAndExpand"
VerticalOptions="Start"
/>
<Label
Text="Binding Name"
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="Start"
/>
<Label
Text=".."
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="End"
/>
</StackLayout>
<Button Text="3" WidthRequest="44"></Button>
<Button Text=">" WidthRequest="44" BackgroundColor="White" ></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<views:FloatingActionButton Grid.Row="1" Grid.Column="1"
Image="CreateProject.png"
WidthRequest="80"
HeightRequest="80"
HorizontalOptions="End"
VerticalOptions="End"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="1.0,1.0,-1,-1"
Margin="10" >
</views:FloatingActionButton>
</AbsoluteLayout>
</Grid>
</StackLayout>
</ContentPage>
And the result is like this:
answered Nov 14 '18 at 8:33
AbbyWangAbbyWang
3795
using this approach makes the "Floating" button appear as the last row below the ListView and therefore is not floating, see third image of my question
– Mauricio Gracia Gutierrez
Nov 14 '18 at 14:07
Sorry I didn't notice the disappearance of the "Floating", I have modified the answer.
– AbbyWang
Nov 15 '18 at 6:39
add a comment |
1
You can modify the layout to use Grid and AbsoluteLayout to wrapper the listview and Floating button. So it is somethig like the following:(As I don't have your list datasource, to be simple, I just put a mock list)
<?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:local="clr-namespace:App51"
x:Class="App51.MainPage">
<StackLayout Orientation="Vertical" HorizontalOptions="CenterAndExpand">
<!-- Project Search/Filter toolbar-->
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
<Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
<Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Text="++" WidthRequest="27" HeightRequest="27" ></Button>
</StackLayout>
</StackLayout>
<Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="8*" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="FAB" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="24" FontAttributes="Bold" BackgroundColor="LightGray"
TextColor="CadetBlue" />
<AbsoluteLayout Grid.Row="1">
<ListView AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,1,1,1"
VerticalOptions="FillAndExpand"
SeparatorColor="Black"
RowHeight="50"
BackgroundColor="Gray">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Project Row -->
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
<Button
Image="Colombia.png"
BackgroundColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="54"
HeightRequest="54"
>
</Button>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label
Text="Binding Name"
TextColor="Black"
Font="Bold,17"
HorizontalOptions="StartAndExpand"
VerticalOptions="Start"
/>
<Label
Text="Binding Name"
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="Start"
/>
<Label
Text=".."
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="End"
/>
</StackLayout>
<Button Text="3" WidthRequest="44"></Button>
<Button Text=">" WidthRequest="44" BackgroundColor="White" ></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<views:FloatingActionButton Grid.Row="1" Grid.Column="1"
Image="CreateProject.png"
WidthRequest="80"
HeightRequest="80"
HorizontalOptions="End"
VerticalOptions="End"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="1.0,1.0,-1,-1"
Margin="10" >
</views:FloatingActionButton>
</AbsoluteLayout>
</Grid>
</StackLayout>
</ContentPage>
And the result is like this:
answered Nov 14 '18 at 8:33
AbbyWangAbbyWang
3795
using this approach makes the "Floating" button appear as the last row below the ListView and therefore is not floating, see third image of my question
– Mauricio Gracia Gutierrez
Nov 14 '18 at 14:07
Sorry I didn't notice the disappearance of the "Floating", I have modified the answer.
– AbbyWang
Nov 15 '18 at 6:39
add a comment |
1
1
1
You can modify the layout to use Grid and AbsoluteLayout to wrapper the listview and Floating button. So it is somethig like the following:(As I don't have your list datasource, to be simple, I just put a mock list)
<?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:local="clr-namespace:App51"
x:Class="App51.MainPage">
<StackLayout Orientation="Vertical" HorizontalOptions="CenterAndExpand">
<!-- Project Search/Filter toolbar-->
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
<Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
<Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Text="++" WidthRequest="27" HeightRequest="27" ></Button>
</StackLayout>
</StackLayout>
<Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="8*" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="FAB" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="24" FontAttributes="Bold" BackgroundColor="LightGray"
TextColor="CadetBlue" />
<AbsoluteLayout Grid.Row="1">
<ListView AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,1,1,1"
VerticalOptions="FillAndExpand"
SeparatorColor="Black"
RowHeight="50"
BackgroundColor="Gray">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Project Row -->
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
<Button
Image="Colombia.png"
BackgroundColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="54"
HeightRequest="54"
>
</Button>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label
Text="Binding Name"
TextColor="Black"
Font="Bold,17"
HorizontalOptions="StartAndExpand"
VerticalOptions="Start"
/>
<Label
Text="Binding Name"
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="Start"
/>
<Label
Text=".."
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="End"
/>
</StackLayout>
<Button Text="3" WidthRequest="44"></Button>
<Button Text=">" WidthRequest="44" BackgroundColor="White" ></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<views:FloatingActionButton Grid.Row="1" Grid.Column="1"
Image="CreateProject.png"
WidthRequest="80"
HeightRequest="80"
HorizontalOptions="End"
VerticalOptions="End"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="1.0,1.0,-1,-1"
Margin="10" >
</views:FloatingActionButton>
</AbsoluteLayout>
</Grid>
</StackLayout>
</ContentPage>
And the result is like this:
answered Nov 14 '18 at 8:33
AbbyWangAbbyWang
3795
You can modify the layout to use Grid and AbsoluteLayout to wrapper the listview and Floating button. So it is somethig like the following:(As I don't have your list datasource, to be simple, I just put a mock list)
<?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:local="clr-namespace:App51"
x:Class="App51.MainPage">
<StackLayout Orientation="Vertical" HorizontalOptions="CenterAndExpand">
<!-- Project Search/Filter toolbar-->
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
<Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
<Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Text="++" WidthRequest="27" HeightRequest="27" ></Button>
</StackLayout>
</StackLayout>
<Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="8*" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="FAB" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="24" FontAttributes="Bold" BackgroundColor="LightGray"
TextColor="CadetBlue" />
<AbsoluteLayout Grid.Row="1">
<ListView AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,1,1,1"
VerticalOptions="FillAndExpand"
SeparatorColor="Black"
RowHeight="50"
BackgroundColor="Gray">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Project Row -->
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
<Button
Image="Colombia.png"
BackgroundColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="54"
HeightRequest="54"
>
</Button>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label
Text="Binding Name"
TextColor="Black"
Font="Bold,17"
HorizontalOptions="StartAndExpand"
VerticalOptions="Start"
/>
<Label
Text="Binding Name"
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="Start"
/>
<Label
Text=".."
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="End"
/>
</StackLayout>
<Button Text="3" WidthRequest="44"></Button>
<Button Text=">" WidthRequest="44" BackgroundColor="White" ></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<views:FloatingActionButton Grid.Row="1" Grid.Column="1"
Image="CreateProject.png"
WidthRequest="80"
HeightRequest="80"
HorizontalOptions="End"
VerticalOptions="End"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="1.0,1.0,-1,-1"
Margin="10" >
</views:FloatingActionButton>
</AbsoluteLayout>
</Grid>
</StackLayout>
</ContentPage>
And the result is like this:
answered Nov 14 '18 at 8:33
AbbyWangAbbyWang
3795
edited Nov 15 '18 at 6:38
answered Nov 14 '18 at 8:33
AbbyWangAbbyWang
3795
answered Nov 14 '18 at 8:33
AbbyWangAbbyWang
3795
answered Nov 14 '18 at 8:33
AbbyWangAbbyWang
3795
3795
using this approach makes the "Floating" button appear as the last row below the ListView and therefore is not floating, see third image of my question
– Mauricio Gracia Gutierrez
Nov 14 '18 at 14:07
Sorry I didn't notice the disappearance of the "Floating", I have modified the answer.
– AbbyWang
Nov 15 '18 at 6:39
add a comment |
using this approach makes the "Floating" button appear as the last row below the ListView and therefore is not floating, see third image of my question
– Mauricio Gracia Gutierrez
Nov 14 '18 at 14:07
Sorry I didn't notice the disappearance of the "Floating", I have modified the answer.
– AbbyWang
Nov 15 '18 at 6:39
using this approach makes the "Floating" button appear as the last row below the ListView and therefore is not floating, see third image of my question
– Mauricio Gracia Gutierrez
Nov 14 '18 at 14:07
using this approach makes the "Floating" button appear as the last row below the ListView and therefore is not floating, see third image of my question
– Mauricio Gracia Gutierrez
Nov 14 '18 at 14:07
Sorry I didn't notice the disappearance of the "Floating", I have modified the answer.
– AbbyWang
Nov 15 '18 at 6:39
Sorry I didn't notice the disappearance of the "Floating", I have modified the answer.
– AbbyWang
Nov 15 '18 at 6:39
add a comment |
0
Based on @Swift_Talt answer and this discussion- https://forums.xamarin.com/discussion/52420/create-a-layered-page-layering-controls
I found this solution using a Grid of one (1) cell where the ListView (background) and the FloatingActionButton are on the same unique cell
This is how it looks:
And here is the View/Page
<?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:local="clr-namespace:DPM.XForms"
x:Class="DPM.XForms.ProjectListPage"
Title="Drive Plus Mobile"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Orientation="Vertical" Spacing="1">
<Label Text="TopBar ..." BackgroundColor="Gray" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center"/>
<!-- Project Search/Filter toolbar-->
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
<Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
<Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Text="++" WidthRequest="27" HeightRequest="27" Clicked="CreateProject_Clicked"></Button>
</StackLayout>
</StackLayout>
<Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />
<ListView x:Name="lvProjects" ItemTapped="OnProjectTapped" RowHeight="54" BackgroundColor="DarkGray">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Project Row -->
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
<Button
Image="Colombia.png"
BackgroundColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="54"
HeightRequest="54"
>
</Button>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label
Text="{Binding Name}"
TextColor="Black"
Font="Bold,17"
HorizontalOptions="StartAndExpand"
VerticalOptions="Start"
/>
<Label
Text="{Binding Brand}"
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="Start"
/>
<Label
Text=".."
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="End"
/>
</StackLayout>
<Button Text="3" WidthRequest="44"></Button>
<Button Text=">" WidthRequest="44" BackgroundColor="White" ></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="0" HorizontalOptions="End" VerticalOptions="End" Spacing="0" Margin="15">
<views:FloatingActionButton
Image="CreateProject.png"
WidthRequest="80"
HeightRequest="80"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Clicked="FloatingActionButton_Clicked"
>
</views:FloatingActionButton>
</StackLayout>
</Grid>
</ContentPage>
answered Nov 14 '18 at 14:57
Mauricio Gracia GutierrezMauricio Gracia Gutierrez
5,54533659
add a comment |
0
Based on @Swift_Talt answer and this discussion- https://forums.xamarin.com/discussion/52420/create-a-layered-page-layering-controls
I found this solution using a Grid of one (1) cell where the ListView (background) and the FloatingActionButton are on the same unique cell
This is how it looks:
And here is the View/Page
<?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:local="clr-namespace:DPM.XForms"
x:Class="DPM.XForms.ProjectListPage"
Title="Drive Plus Mobile"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Orientation="Vertical" Spacing="1">
<Label Text="TopBar ..." BackgroundColor="Gray" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center"/>
<!-- Project Search/Filter toolbar-->
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
<Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
<Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Text="++" WidthRequest="27" HeightRequest="27" Clicked="CreateProject_Clicked"></Button>
</StackLayout>
</StackLayout>
<Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />
<ListView x:Name="lvProjects" ItemTapped="OnProjectTapped" RowHeight="54" BackgroundColor="DarkGray">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Project Row -->
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
<Button
Image="Colombia.png"
BackgroundColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="54"
HeightRequest="54"
>
</Button>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label
Text="{Binding Name}"
TextColor="Black"
Font="Bold,17"
HorizontalOptions="StartAndExpand"
VerticalOptions="Start"
/>
<Label
Text="{Binding Brand}"
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="Start"
/>
<Label
Text=".."
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="End"
/>
</StackLayout>
<Button Text="3" WidthRequest="44"></Button>
<Button Text=">" WidthRequest="44" BackgroundColor="White" ></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="0" HorizontalOptions="End" VerticalOptions="End" Spacing="0" Margin="15">
<views:FloatingActionButton
Image="CreateProject.png"
WidthRequest="80"
HeightRequest="80"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Clicked="FloatingActionButton_Clicked"
>
</views:FloatingActionButton>
</StackLayout>
</Grid>
</ContentPage>
answered Nov 14 '18 at 14:57
Mauricio Gracia GutierrezMauricio Gracia Gutierrez
5,54533659
add a comment |
0
0
0
Based on @Swift_Talt answer and this discussion- https://forums.xamarin.com/discussion/52420/create-a-layered-page-layering-controls
I found this solution using a Grid of one (1) cell where the ListView (background) and the FloatingActionButton are on the same unique cell
This is how it looks:
And here is the View/Page
<?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:local="clr-namespace:DPM.XForms"
x:Class="DPM.XForms.ProjectListPage"
Title="Drive Plus Mobile"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Orientation="Vertical" Spacing="1">
<Label Text="TopBar ..." BackgroundColor="Gray" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center"/>
<!-- Project Search/Filter toolbar-->
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
<Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
<Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Text="++" WidthRequest="27" HeightRequest="27" Clicked="CreateProject_Clicked"></Button>
</StackLayout>
</StackLayout>
<Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />
<ListView x:Name="lvProjects" ItemTapped="OnProjectTapped" RowHeight="54" BackgroundColor="DarkGray">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Project Row -->
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
<Button
Image="Colombia.png"
BackgroundColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="54"
HeightRequest="54"
>
</Button>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label
Text="{Binding Name}"
TextColor="Black"
Font="Bold,17"
HorizontalOptions="StartAndExpand"
VerticalOptions="Start"
/>
<Label
Text="{Binding Brand}"
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="Start"
/>
<Label
Text=".."
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="End"
/>
</StackLayout>
<Button Text="3" WidthRequest="44"></Button>
<Button Text=">" WidthRequest="44" BackgroundColor="White" ></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="0" HorizontalOptions="End" VerticalOptions="End" Spacing="0" Margin="15">
<views:FloatingActionButton
Image="CreateProject.png"
WidthRequest="80"
HeightRequest="80"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Clicked="FloatingActionButton_Clicked"
>
</views:FloatingActionButton>
</StackLayout>
</Grid>
</ContentPage>
answered Nov 14 '18 at 14:57
Mauricio Gracia GutierrezMauricio Gracia Gutierrez
5,54533659
Based on @Swift_Talt answer and this discussion- https://forums.xamarin.com/discussion/52420/create-a-layered-page-layering-controls
I found this solution using a Grid of one (1) cell where the ListView (background) and the FloatingActionButton are on the same unique cell
This is how it looks:
And here is the View/Page
<?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:local="clr-namespace:DPM.XForms"
x:Class="DPM.XForms.ProjectListPage"
Title="Drive Plus Mobile"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Orientation="Vertical" Spacing="1">
<Label Text="TopBar ..." BackgroundColor="Gray" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center"/>
<!-- Project Search/Filter toolbar-->
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
<Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
<Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Text="++" WidthRequest="27" HeightRequest="27" Clicked="CreateProject_Clicked"></Button>
</StackLayout>
</StackLayout>
<Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />
<ListView x:Name="lvProjects" ItemTapped="OnProjectTapped" RowHeight="54" BackgroundColor="DarkGray">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Project Row -->
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
<Button
Image="Colombia.png"
BackgroundColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="54"
HeightRequest="54"
>
</Button>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label
Text="{Binding Name}"
TextColor="Black"
Font="Bold,17"
HorizontalOptions="StartAndExpand"
VerticalOptions="Start"
/>
<Label
Text="{Binding Brand}"
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="Start"
/>
<Label
Text=".."
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="End"
/>
</StackLayout>
<Button Text="3" WidthRequest="44"></Button>
<Button Text=">" WidthRequest="44" BackgroundColor="White" ></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="0" HorizontalOptions="End" VerticalOptions="End" Spacing="0" Margin="15">
<views:FloatingActionButton
Image="CreateProject.png"
WidthRequest="80"
HeightRequest="80"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Clicked="FloatingActionButton_Clicked"
>
</views:FloatingActionButton>
</StackLayout>
</Grid>
</ContentPage>
answered Nov 14 '18 at 14:57
Mauricio Gracia GutierrezMauricio Gracia Gutierrez
5,54533659
answered Nov 14 '18 at 14:57
Mauricio Gracia GutierrezMauricio Gracia Gutierrez
5,54533659
answered Nov 14 '18 at 14:57
Mauricio Gracia GutierrezMauricio Gracia Gutierrez
5,54533659
answered Nov 14 '18 at 14:57
Mauricio Gracia GutierrezMauricio Gracia Gutierrez
5,54533659
5,54533659
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53289308%2fhow-to-make-a-floatingactionbutton-work-on-top-of-a-listview-and-position-it-cor%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
