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>
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 a simple Xamarin Form app with a .net standard project and Android Project. I am facing a problem since the very first day of development is that , I am unable to pull Toast and Activity Indicator on my forms. I dont know why? I tried almost all major plugins as well.
Here's my login code where I want to see a toast. I have used UserDialogs, Forms.Plugin etc and now using Plugin.Toast.
protected void BtnLogin_Clicked(object sender, EventArgs e)
{
try
{
CrossToastPopUp.Current.ShowToastMessage("Message"); // Plugin.Toast package
var userName = TxtUserName.Text.Trim();
var password = TxtPassword.Text.Trim();
userController.DoLogin(userName, password);
}
catch (NullReferenceException)
{
DisplayAlert("Mobile # and Password, both are required.", "JCAA", "OK");
}
catch (Exception ex)
{
DisplayAlert(ex.Message, "JCAA", "OK");
Crashes.TrackError(ex);
}
}
UPDATE
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="JCAA.Views.Login" NavigationPage.HasNavigationBar="False" BackgroundColor="#ffffff">
<ContentPage.Content>
<StackLayout HorizontalOptions="Fill" VerticalOptions="StartAndExpand">
<StackLayout VerticalOptions="StartAndExpand">
<Image Source="logo.png" Aspect="AspectFit" HeightRequest="150" Scale="0.8" ></Image>
</StackLayout>
<StackLayout VerticalOptions="StartAndExpand" HeightRequest="70">
<Label Text="JCAA" HorizontalOptions="CenterAndExpand" FontSize="50" VerticalOptions="Start" FontFamily="{StaticResource JostBold}" TextColor="SeaGreen"></Label>
<Label Text="Jh Cul Art Association" HorizontalOptions="CenterAndExpand" FontSize="10" VerticalOptions="Start" FontFamily="{StaticResource JostBold}" TextColor="SeaGreen"></Label>
</StackLayout>
<StackLayout HorizontalOptions="Center" WidthRequest="300" HeightRequest="140" VerticalOptions="StartAndExpand" Margin="30">
<Entry x:Name="TxtUserName" MaxLength="10" Placeholder="Mobile Number" FontFamily="{StaticResource JostReg}" HorizontalTextAlignment="Center" FontSize="30" Keyboard="Numeric" Completed="TxtUserName_Completed"></Entry>
<Button x:Name="BtnLogin" Text="Login" Clicked="BtnLogin_Clicked" BackgroundColor="DarkSlateBlue" TextColor="White" FontFamily="{StaticResource JostReg}" FontSize="20"></Button>
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<StackLayout HorizontalOptions="CenterAndExpand">
<Label Text="New User?? Register your mobile with us." HorizontalTextAlignment="Center" FontSize="11" VerticalTextAlignment="Center" TextColor="DarkSlateBlue" FontFamily="{StaticResource JostReg}"></Label>
<ImageButton Source="signup.png" BackgroundColor="Transparent" HeightRequest="40" Aspect="AspectFit" x:Name="BtnSignUp" Clicked="BtnSignUp_Clicked" ></ImageButton>
</StackLayout>
<StackLayout HorizontalOptions="CenterAndExpand">
<Label Text="Lost Phone!!" HorizontalTextAlignment="Center" FontSize="9" VerticalTextAlignment="Center" TextColor="DarkSlateBlue" FontFamily="{StaticResource JostReg}"></Label>
<ImageButton x:Name="BtnRecoverPassword" BackgroundColor="Transparent" HeightRequest="40" Aspect="AspectFit" Clicked="BtnRecoverPassword_Clicked" Source="passwordreset.png" ></ImageButton>
</StackLayout>
</StackLayout>
<StackLayout Padding="30" HeightRequest="220" HorizontalOptions="Center" VerticalOptions="CenterAndExpand">
<Label FontSize="13" TextColor="DarkSlateBlue" HorizontalOptions="Center" VerticalOptions="EndAndExpand">
<Label.FormattedText>
<FormattedString>
<Span FontFamily="{StaticResource JostThin}" TextColor="Black" FontSize="18">
powered by
</Span>
<Span Text=" a" TextColor="Red" ></Span>
<Span Text="r" TextColor="Black"></Span>
<Span Text=" technosoft" TextColor="Black">
</Span>
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
</StackLayout>
</ContentPage.Content>
Above is the xaml of my login page. I am using conventional windows form style of development. No MVVM is involved here.
This toast is in my login page & my toast is coming up when all codes written the BtnLogin_Clicked event executes and the next landing page shows up. Since my login process taks 4-5secs, so in that window , i want to show toast to the user.
this is happening in my entire application. Only display alert is poping up as desired.
Now, I have changed my code to use native toast, via these two ways:
Device.BeginInvokeOnMainThread(()=> DependencyService.Get<IToast>().Show("Toast Message"));
DependencyService.Get<IToast>().Show("Toast Message");
But none of the above is working as expected. toast is coming up but after executions of all blocks of code.
VS2019 and all modules updated.
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'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"