<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>
Related
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:vm="clr-namespace:App1.ViewModel"
x:Class="App1.View.LoginPage" BackgroundColor="#f0f2f5">
<ContentPage.BindingContext>
<vm:LoginViewModel/>
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout>
<Image Source="XamarinLogo.png" ></Image>
<Frame BackgroundColor="White" CornerRadius="20" WidthRequest="396" HeightRequest="430" VerticalOptions="Center" HorizontalOptions="Center" >
<StackLayout>
<Label Text="Вход на Lockdown" TextColor="Black" HorizontalOptions="Center" FontSize="Title" Margin="0,30,0,10" />
<Entry Placeholder="Логин" x:Name="login" Text="{Binding Login}" />
<Entry Placeholder="Пароль" x:Name ="password" Text="{Binding Password}" IsPassword="True"/>
<Label x:Name="LoginMessageLabel" Text="{Binding LoginMessage,Mode=OneWay}" IsVisible="{Binding TurnLoginMessage,Mode=OneWay}" Margin="10,0,0,0" TextColor="Red"></Label>
<Button x:Name="loginButton" Text="Вход" TextColor="White" BorderRadius="6" BackgroundColor="#1877F2" Margin="10,10,10,10"
Command="{Binding cmdLogin}">
</Button>
<Button x:Name="createAccount" Text="Создать новый аккаунт" TextColor="White" BorderRadius="6" BackgroundColor="#42B72A" Margin="10,10,10,10" Command="{Binding cmdCreateAccount}"/>
<Label Text="Забыли пароль?" TextColor="#1877F2" HorizontalOptions="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding cmdForgotPassword}"/>
</Label.GestureRecognizers>
</Label>
</StackLayout>
</Frame>
</StackLayout></ContentPage.Content>
what is the problem?This is my first time working with xamarin, I don't understand what the error is.What is not closed if I closed it?
you need to close every control you create. you forget to close ContentPage
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:vm="clr-namespace:App1.ViewModel"
x:Class="App1.View.LoginPage" BackgroundColor="#f0f2f5">
<ContentPage.BindingContext>
<vm:LoginViewModel/>
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout>
<Image Source="XamarinLogo.png" ></Image>
<Frame BackgroundColor="White" CornerRadius="20" WidthRequest="396" HeightRequest="430" VerticalOptions="Center" HorizontalOptions="Center" >
<StackLayout>
<Label Text="Вход на Lockdown" TextColor="Black" HorizontalOptions="Center" FontSize="Title" Margin="0,30,0,10" />
<Entry Placeholder="Логин" x:Name="login" Text="{Binding Login}" />
<Entry Placeholder="Пароль" x:Name ="password" Text="{Binding Password}" IsPassword="True"/>
<Label x:Name="LoginMessageLabel" Text="{Binding LoginMessage,Mode=OneWay}" IsVisible="{Binding TurnLoginMessage,Mode=OneWay}" Margin="10,0,0,0" TextColor="Red"></Label>
<Button x:Name="loginButton" Text="Вход" TextColor="White" BorderRadius="6" BackgroundColor="#1877F2" Margin="10,10,10,10"
Command="{Binding cmdLogin}">
</Button>
<Button x:Name="createAccount" Text="Создать новый аккаунт" TextColor="White" BorderRadius="6" BackgroundColor="#42B72A" Margin="10,10,10,10" Command="{Binding cmdCreateAccount}"/>
<Label Text="Забыли пароль?" TextColor="#1877F2" HorizontalOptions="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding cmdForgotPassword}"/>
</Label.GestureRecognizers>
</Label>
</StackLayout>
</Frame>
</StackLayout></ContentPage.Content>
</ContentPage>
I have problem while i am debugging my application, when i click the button with timePicker this
Error occurs
'Binary XML file line #20: Binary XML file line #20: Error inflating class android.widget.TimePicker'
Can somebody help me with this issue
That is my XML code :
<Label Text="Godzina" Grid.Column="3" Grid.ColumnSpan="3" Grid.Row="8" TextColor="Black" Font="Bold,14"></Label>
<TimePicker x:Name="StartHour"
Format="T" Grid.Row="9" Grid.ColumnSpan="3" BindingContext="{Binding StartHour}" HorizontalOptions="FillAndExpand">
</TimePicker>
<TimePicker x:Name="EndHour"
Format="T" Grid.Row="9" Grid.ColumnSpan="3" BindingContext="{Binding EndHour}" Grid.Column="3" HorizontalOptions="FillAndExpand">
</TimePicker>
<Label Text="Miejsce spotkania" Grid.Row="10" Grid.ColumnSpan="6" TextColor="Black" Font="Bold,14"></Label>
<controls:CustomEntry x:Name="Place" Grid.ColumnSpan="6" Text="{Binding Place}" Grid.Row="11"></controls:CustomEntry>
<Label Text="Przypomnienie" Grid.Row="12" Grid.ColumnSpan="6" TextColor="Black" Font="Bold,14"></Label>
<TimePicker x:Name="Reminder"
Format="T" Grid.Row="13" BindingContext="{Binding Reminder}" Grid.ColumnSpan="6" HorizontalOptions="FillAndExpand">
</TimePicker>
<Button x:Name="MakeMeeting" Command="{Binding CreateCommand}" Text="Stworz spotkanie" Grid.ColumnSpan="6" BackgroundColor="#034ad7" BorderRadius="14" TextColor="FloralWhite" HeightRequest="50" VerticalOptions="Start" Grid.Row="14"></Button>
The reason I've found is that the TimePicker does not work with ScrollView, this is a bug, some ideas how to resolve it ?
Based on my test, we could use TimePicker work with ScorellView. I test with your layout. Due to I do not have your viewmodel, I only show the gif of layout.
Xaml:
<StackLayout>
<ScrollView>
<StackLayout>
<Label Text="Godzina" Grid.Column="3" Grid.ColumnSpan="3" Grid.Row="8" TextColor="Black" Font="Bold,14"></Label>
<TimePicker x:Name="StartHour"
Format="T" Grid.Row="9" Grid.ColumnSpan="3" BindingContext="{Binding StartHour}" HorizontalOptions="FillAndExpand">
</TimePicker>
<TimePicker x:Name="EndHour"
Format="T" Grid.Row="9" Grid.ColumnSpan="3" BindingContext="{Binding EndHour}" Grid.Column="3" HorizontalOptions="FillAndExpand">
</TimePicker>
<Label Text="Miejsce spotkania" Grid.Row="10" Grid.ColumnSpan="6" TextColor="Black" Font="Bold,14"></Label>
<!--<controls:CustomEntry x:Name="Place" Grid.ColumnSpan="6" Text="{Binding Place}" Grid.Row="11"></controls:CustomEntry>-->
<Label Text="Przypomnienie" Grid.Row="12" Grid.ColumnSpan="6" TextColor="Black" Font="Bold,14"></Label>
<TimePicker x:Name="Reminder"
Format="T" Grid.Row="13" BindingContext="{Binding Reminder}" Grid.ColumnSpan="6" HorizontalOptions="FillAndExpand">
</TimePicker>
<Button x:Name="MakeMeeting" Command="{Binding CreateCommand}" Text="Stworz spotkanie" Grid.ColumnSpan="6" BackgroundColor="#034ad7" BorderRadius="14" TextColor="FloralWhite" HeightRequest="50" VerticalOptions="Start" Grid.Row="14"></Button>
</StackLayout>
</ScrollView>
</StackLayout>
You could download from the ScorellView_TimePciker folder of GitHub for reference.
https://github.com/WendyZang/Test.git
Updated:
I test the same code in my previous reply. It could run well on Xamarin.Forms 4.4.0.991265. You could check the source code from ScorellView_TimePicker_4.4.0.991265 folder on GitHub.
https://github.com/WendyZang/Test/tree/master/ScorellView_TimePicker_4.4.0.991265/XamarinTest
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'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>
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"