I'm trying to get my floating action button in the bottom left corner of my application.
Currently it looks like this:
And I want it to look like this:
My XAML 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:local="clr-namespace:xxx;assembly=xxx"
x:Class="xxx.xxx.xxx.xxxx">
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<StackLayout Orientation="Vertical" VerticalOptions="StartAndExpand">
<StackLayout HorizontalOptions="CenterAndExpand" Margin="0,15,0,0" Orientation="Vertical">
<!--<local:CustomImage Source="logo.png" HeightRequest="100" WidthRequest="100" HorizontalOptions="Center" />-->
<local:CustomImageButton WidthRequest="150" Image="Foto.png" ClassId="Eigendommen" x:Name="buttonFoto" HeightRequest="150"/>
</StackLayout>
<StackLayout Orientation="Vertical" VerticalOptions="CenterAndExpand" Margin="10,0,0,0" x:Name="MainStack" >
<BoxView BackgroundColor="#F15A35" HeightRequest="1" WidthRequest="400" Margin="0,-2,0,5" />
<Label Text="Toegevoegd:" FontSize="Medium" FontAttributes="Bold" />
<StackLayout Orientation="Horizontal">
<StackLayout Orientation="Vertical" IsVisible="False" Margin="10,0,10,0" x:Name="hideImage1">
<local:CustomImage HeightRequest="100" WidthRequest="100"/>
<StackLayout Orientation="Horizontal">
<Label Text="Verwijderen" FontSize="Small" VerticalTextAlignment="Center" />
<local:CustomImageButton Image="close_zwart.png" BackgroundColor="White" Clicked="Hide_Image_Click" HeightRequest="40" WidthRequest="40" />
</StackLayout>
</StackLayout>
<StackLayout Orientation="Vertical" Margin="10,0,10,0" x:Name="hideImage2" IsVisible="False">
<local:CustomImage HeightRequest="100" WidthRequest="100"/>
<StackLayout Orientation="Horizontal">
<Label Text="Verwijderen" FontSize="Small" VerticalTextAlignment="Center" />
<local:CustomImageButton Image="close_zwart.png" Clicked="Hide_Image_Click" BackgroundColor="White" HeightRequest="40" WidthRequest="40" />
</StackLayout>
</StackLayout>
<StackLayout Orientation="Vertical" Margin="10,0,10,0" x:Name="hideImage3" IsVisible="False">
<local:CustomImage HeightRequest="100" WidthRequest="100"/>
<StackLayout Orientation="Horizontal">
<Label Text="Verwijderen" FontSize="Small" VerticalTextAlignment="Center" />
<local:CustomImageButton Image="close_zwart.png" Clicked="Hide_Image_Click" BackgroundColor="White" HeightRequest="40" WidthRequest="40" />
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
<StackLayout
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="1,1,0.25,0.25">
<StackLayout HorizontalOptions="End" VerticalOptions="End" Margin="0,0,0,0">
<local:FloatingActionButton Image="checktaak.png" x:Name="insertTaak" HeightRequest="60" WidthRequest="60" />
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</ContentPage>
You can find the my floating action button at the bottom of all the code ( the last stacklayout). if you need more code let me know in the comments.
Edit I want the button always there even if it overlaps a other stacklayout
Assuming FloatingActionButton inherits from Button and the AbsoluteLayout is the child of a ContentPage and the expected margin for the floating button as (15,15) from right and bottom borders,
<AbsoluteLayout>
<!-- SOME OTHER ELEMENTS -->
<local:FloatingActionButton Image="checktaak.png"
CornerRadius="30"
WidthRequest="60" HeightRequest="60"
AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="1,1,75,75"
HorizontalOptions="Center" VerticalOptions="Center" />
</AbsoluteLayout>
To NOTE,
Use AbsoluteLayout.LayoutFlags="PositionProportional" to make
only the positioning proportional
Then for AbsoluteLayout.LayoutBounds set X and Y, 1 and 1 to
push it to the bottom right corner. The Width and Height is set
to 75 and 75 to position the element 75 points left from the layout's
right border and 75 points top from the layout's bottom border.
The 75 is calculated as,
60(element width/height request) + 15(right/bottom margin) = 75
Since the WidthRequest and HeightRequest is 60, half of it 30
will be the CornerRadius of the element.
Found it!
Just had to tweak the layoutbounds a little, I didn't knew I could go over 1.
This is my new layoutbound for the stacklayout that includes the fab:
AbsoluteLayout.LayoutBounds="0.94,1.18,0.5,0.25"
Related
<StackLayout Grid.Row="1" Grid.Column="0" BackgroundColor="#57bcec" Padding="5" Orientation="Horizontal">
<ContentView Padding="5,0,0,0">
<ffimageloading:CachedImage DownsampleToViewSize="True" HorizontalOptions="Center" VerticalOptions="Center"
ErrorPlaceholder="{Binding PlaceholderImage}" LoadingPlaceholder="{Binding PlaceholderImage}"
Source="{Binding UserImage, Converter={Helper:ImageSourceConverter}}"
Aspect="AspectFit">
<ffimageloading:CachedImage.WidthRequest>
<OnPlatform x:TypeArguments="x:Double" iOS="40" Android="40" WinPhone="40" />
</ffimageloading:CachedImage.WidthRequest>
<ffimageloading:CachedImage.HeightRequest>
<OnPlatform x:TypeArguments="x:Double" iOS="40" Android="40" WinPhone="40" />
</ffimageloading:CachedImage.HeightRequest>
<ffimageloading:CachedImage.Transformations>
<fftransformations:CircleTransformation BorderSize="3" BorderHexColor="#34C04E"/>
</ffimageloading:CachedImage.Transformations>
</ffimageloading:CachedImage>
</ContentView>
<ContentView Padding="10,0,0,0" VerticalOptions="FillAndExpand">
<Label Text="Alan Parker" FontSize="14" FontFamily="{StaticResource Lato_Regular}" TextColor="White" VerticalOptions="Center" />
</ContentView>
</StackLayout>
Image URL: https://images.app.goo.gl/ZLSN5x9VNeebTD6z8
Output: Notice that image get cut-off from the corners
Normal Image:
I found one way to do this.
I have used: https://github.com/daniel-luberda/DLToolkit.Forms.Controls/tree/master/ImageCropView
<imgcrop:ImageCropView HeightRequest="50" WidthRequest="50" x:Name="cropView"
Source="https://anothercommonman.files.wordpress.com/2011/10/gandhiji.jpg">
<imgcrop:ImageCropView.PreviewTransformations>
<ffTransformations:CircleTransformation />
</imgcrop:ImageCropView.PreviewTransformations>
</imgcrop:ImageCropView>
How do i add logo to center of the Xaml Form, i am starting out Xamarin.
My xaml code looks something like this :
<StackLayout Spacing="20" Padding="50" VerticalOptions="Center">
<Entry Placeholder="Mail id"></Entry>
<Entry Placeholder="Password" IsPassword="True"></Entry>
<Button Text="Log In" TextColor="White" BackgroundColor="##ff77D065"></Button> </StackLayout>
</ContentPage>
This works fine, Now i want to see where i can add the logo to the Xaml form, Its cross platform.
I am new to this.
Edit
Trying out something like this
<StackLayout Spacing="20" Padding="50" VerticalOptions="Center">
VerticalOptions="Center" Padding="10">
<Image Source="screenimg2.png" x:Name="imgLogo" HeightRequest="150" WidthRequest="150"/>
<Entry Placeholder="Mail id"></Entry>
<Entry Placeholder="Password" IsPassword="True"></Entry>
<Button Text="Log In" TextColor="White" BackgroundColor="##ff77D065"></Button>
</StackLayout>
You can use an AbsoluteLayout to contain your "background" logo and then the StackLayout, both centered on screen and then place your UI widgets inside the StackLayout to control the order of their placement:
Example (Logo is set to a 25% opacity):
<AbsoluteLayout BackgroundColor="Black">
<Image Source="logo.png" AbsoluteLayout.LayoutBounds=".5,.5,.75,.75" AbsoluteLayout.LayoutFlags="All" Opacity=".25" />
<StackLayout AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<Label Text="INTRO TO THE WORLD" TextColor="Green" />
<Entry Text="Some Entry Text" BackgroundColor="Green" />
</StackLayout>
</AbsoluteLayout>
re: Xamarin.Forms AbsoluteLayout
I'm working with MVVM and I have a bindablelayout like this:
<StackLayout Margin="20" BindableLayout.ItemsSource="{Binding MyApartments}" >
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout Margin="0,10,0,0">
<Frame Padding="15" HasShadow="True" BackgroundColor="WhiteSmoke" HorizontalOptions="Fill" VerticalOptions="CenterAndExpand" HeightRequest="150" CornerRadius="15">
<StackLayout x:Name="AptItems">
<Label x:Name="apartmentlabel" Text="{Binding MyApartments.apartment}" Margin="0,15,0,0" FontFamily="{StaticResource mon_extrabold}" TextColor="DarkBlue" FontSize="Title"/>
<Label x:Name="numberlabel" Text="{Binding MyApartments.number}" FontFamily="{StaticResource mon_bold}" TextColor="DarkBlue" FontSize="Subtitle"/>
<Button HorizontalOptions="End" FontFamily="{StaticResource mon_regular}" BackgroundColor="{StaticResource bounty}" TextColor="White" Command="{Binding Path=BindingContext.SelectApartment, Source={x:Reference ApartmentsPage}}"/>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
I need to save the value in buildinglabel and numberlabel to my preferences but I don't know how to pass both labels to a command and searched for a long time now with no success, how is it done?
I am attempting to add a label above my button but the label never shows. This is the code xaml that I am using. What is it that keeps the label from being displayed?
<Frame HasShadow="False">
<StackLayout Orientation="Vertical" Spacing="10">
<Label x:Name="registererror" Text="Error, please verify all fields have valid input" TextColor="Red" />
</StackLayout>
<Button Command="{Binding SubmitCommand}" Text="Register" TextColor="White"
FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand"
BackgroundColor="#088da5" Clicked="OnRegisterTap" />
</Frame>
a Frame can only have a single child. To contain multiple children you must use a layout container. Your Button is not enclosed in the StackLayout.
<Frame HasShadow="False">
<StackLayout Orientation="Vertical" Spacing="10">
<Label x:Name="registererror" Text="Error, please verify all fields have valid input" TextColor="Red" />
<Button Command="{Binding SubmitCommand}" Text="Register" TextColor="White"
FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand"
BackgroundColor="#088da5" Clicked="OnRegisterTap" />
</StackLayout>
</Frame>
I'm using xamarin cross-platform.
I want to add same the "floating menu item" in the every .xaml page.(home/logout/view/ account)
I have added below master page.
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ABCAPP.Views.MasterDetailPage1"
xmlns:pages="clr-namespace:ABCAPP.Views">
<MasterDetailPage.Master>
<pages:MasterDetailPage1Master x:Name="MasterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<pages:MasterDetailPage1Detail>
<StackLayout>
<StackLayout Orientation="Horizontal" VerticalOptions="Start">
<!--top controls-->
</StackLayout>
<StackLayout VerticalOptions="CenterAndExpand">
<!--middle controls-->
</StackLayout>
<StackLayout Orientation="Horizontal" VerticalOptions="End">
<Button Text="A" FontAttributes="Bold" BackgroundColor="MediumSlateBlue" BorderRadius="50" TextColor="White"></Button>
<Button Text="B" FontAttributes="Bold" BackgroundColor="MediumSlateBlue" TextColor="White"></Button>
<!--bottom controls-->
</StackLayout>
</StackLayout>
</pages:MasterDetailPage1Detail>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
How do I add this layout to my other .xaml Content Pages ?
This is my Content Pages
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ABCAPP.Views.Confirmed">
<ContentPage.Content>
<ScrollView>
<StackLayout Spacing="20" Padding="15" BackgroundColor="Orange">
<Label Text="Thank you!" FontSize="50" FontAttributes="Bold" TextColor="White" HorizontalOptions="Center" />
<Label Text=" confirmed." FontSize="30" FontAttributes="Bold" TextColor="White" HorizontalOptions="Center" />
<Label x:Name="lblMsg" TextColor="Red" IsVisible="False" ></Label>
<Button Text="ADD " Clicked="NewAttend_Clicked" FontAttributes="Bold" BackgroundColor="MediumSlateBlue" BorderRadius="5" TextColor="White"></Button>
<Button Text="RETURN " Clicked="List_Clicked" FontAttributes="Bold" BackgroundColor="MediumSlateBlue" BorderRadius="5" TextColor="White"></Button>
<Image Source="drawable/icon" ></Image>
</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>