I am very new to Xamarin . I am looking for a way to create an authentication form page and then put my slqite data in a server.
I have already managed to create my sqlite database model and managed to put data (in this instance names of cars) into the database.
Here is my xaml form, this is presented to a user when they want to create an account and it is identical for log in:
<ContentPage.Content>
<StackLayout Padding="20">
<StackLayout Orientation="Horizontal" Spacing="2" HorizontalOptions="Center">
<Label Text="Connect !" FontSize="25"/>
</StackLayout>
<Label Text="Name" FontSize="25"/>
<Entry x:Name="MyName" Placeholder="Your Name please" ></Entry>
<Label Text="Adress Mail" FontSize="25"/>
<Entry x:Name="Mymail" Placeholder="Your Adress mail please"></Entry>
<Label Text="Profession" FontSize="25"/>
<Entry x:Name="MyProfession" Placeholder="Your Profession please" ></Entry>
<Label Text="Your Password" FontSize="25"/>
<Entry IsPassword="true" x:Name="MyPassword" Placeholder="your password please" FontSize="Medium"></Entry>
<StackLayout Orientation="Horizontal">
<Button Text="OK" BackgroundColor="Gray" TextColor="White" FontSize="25"/>
</StackLayout>
</StackLayout>
</ContentPage.Content>
Ideally I'm looking for easy to follow examples of how to implement this kind of pattern, If you have any sample code for each step that would also be really useful.
Thanks in advance.
Related
I'm trying to create a reusable ContentView that can be bound to an instance specific value. The view is defined as follows:
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:element="clr-namespace:SimultaneousEquations.Elements"
x:Class="SimultaneousEquations.Elements.EquationElement">
<ContentView.BindingContext>
<element:EquationElement />
</ContentView.BindingContext>
<HorizontalStackLayout HorizontalOptions="Center">
<Label FontSize="22" Text="{Binding EquationAsString}" HorizontalOptions="Center" />
<Label>
<Label.Margin>8,0,0,0</Label.Margin>
</Label>
<Frame
WidthRequest="30"
HeightRequest="30"
CornerRadius="15"
BorderColor="Black"
Padding="0" >
<Label
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
Text="1"
TextColor="Black"
FontSize="22" >
</Label>
</Frame>
</HorizontalStackLayout>
</ContentView>
Code Behind:
namespace SimultaneousEquations.Elements;
public partial class EquationElement : ContentView
{
public EquationElement()
{
InitializeComponent();
}
public string EquationAsString
{
get => (string)GetValue(EquationAsStringProperty);
set => SetValue(EquationAsStringProperty, value);
}
public static readonly BindableProperty EquationAsStringProperty =
BindableProperty.Create(
nameof(EquationAsString),
typeof(string),
typeof(EquationElement),
"Equation Not Set"//string.Empty
);
}
I'm then trying to use it in a ContentPage. Using the Reusable elements causes the app to crash. Using similar code directly in the view works fine:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewModels="clr-namespace:SimultaneousEquations.ViewModels"
xmlns:elements="clr-namespace:SimultaneousEquations.Elements"
x:Class="SimultaneousEquations.Views.SolveView"
Title="Solver">
<ContentPage.BindingContext>
<viewModels:SolveViewModel />
</ContentPage.BindingContext>
<VerticalStackLayout>
<!-- THIS CAUSES APP TO CRASH AT LAUNCH -->
<elements:EquationElement EquationAsString="{Binding FirstEquation.AsString}"/>
<!-- THIS WORKS -->
<HorizontalStackLayout HorizontalOptions="Center">
<Label FontSize="22" Text="{Binding FirstEquation.AsString}" HorizontalOptions="Center" />
<Label><Label.Margin>8,0,0,0</Label.Margin></Label>
<Frame
WidthRequest="30"
HeightRequest="30"
CornerRadius="15"
BorderColor="Black"
Padding="0" >
<Label
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
Text="1"
TextColor="Black"
FontSize="22" >
</Label>
</Frame>
</HorizontalStackLayout>
<Button HorizontalOptions="Center" Text="Solve" Command="{Binding SolveCommand}" />
</VerticalStackLayout>
</ContentPage>
Please can somebody help me get this to work. Thanks
EDIT: On android, the app just crashes without exception. I tried re-running the code that crashed in a WindowsMachine and got an exception in an auto-generated code file called Elements_EquationElement.xaml.sg.cs. The exception hit here:
private void InitializeComponent()
{
global::Microsoft.Maui.Controls.Xaml.Extensions.LoadFromXaml(this, typeof(EquationElement));
}
The message said Exception Unhandled - System.StackOverflowException: 'Exception_WasThrown'
I'm not sure that this appears very helpful.
The change I needed to make this work was to change the way I set up the Binding in the reusable ContentView, with a Binding Source and Path, like this:
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:element="clr-namespace:SimultaneousEquations.Elements"
x:Class="SimultaneousEquations.Elements.EquationElement"
x:Name="ControlView">
<HorizontalStackLayout HorizontalOptions="Center">
<Label FontSize="22"
Text="{Binding Source={x:Reference ControlView}, Path=EquationAsString}"
HorizontalOptions="Center" />
<Label>
<Label.Margin>8,0,0,0</Label.Margin>
</Label>
<Frame
WidthRequest="30"
HeightRequest="30"
CornerRadius="15"
BorderColor="Black"
Padding="0" >
<Label
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
Text="{Binding Source={x:Reference ControlView}, Path=EquationNumber}"
TextColor="Black"
FontSize="22" >
</Label>
</Frame>
</HorizontalStackLayout>
</ContentView>
This example really helped me: .net Maui binding values multiple levels deep
My project is in Xamarin Forms and i have a very simple code.
<SwipeView x:Name="MainSwipe" BackgroundColor="#dcdde1">
<SwipeView.LeftItems>
<SwipeItems Mode="Reveal">
<SwipeItemView>
<StackLayout BackgroundColor="#208b55" Orientation="Vertical" Margin="20">
<Label Text="HITÉLET" Style="{x:StaticResource LabelLeftMenu}" x:Name="open_hitelet" Padding="10"/>
<Label Text="KULTÚRA" Style="{x:StaticResource LabelLeftMenu}" x:Name="open_kultura" Padding="10"/>
<Label Text="KÖZÉLET" Style="{x:StaticResource LabelLeftMenu}" x:Name="open_kozelet" Padding="10"/>
<Label Text="ÉLETMÓD" Style="{x:StaticResource LabelLeftMenu}" x:Name="open_eletmod" Padding="10"/>
<Label Text="GAZDASÁG" Style="{x:StaticResource LabelLeftMenu}" x:Name="open_gazdasag" Padding="10"/>
<Label Text="SZÍNES" Style="{x:StaticResource LabelLeftMenu}" x:Name="open_szines" Padding="10"/>
<Label Text="RÓLUNK" Style="{x:StaticResource LabelLeftMenu}" x:Name="open_rolunk" Padding="10"/>
</StackLayout>
</SwipeItemView>
</SwipeItems>
</SwipeView.LeftItems>
</SwipeView>
And i have a method to open left menu:
MainSwipe.Open(OpenSwipeItem.LeftItems);
But it isn't work perfectly.(does not open completely)
I have tested with shared coed, it's interesting. It shows the same with yours. Maybe it's an issue of SwipeView.
However, I have a workaround to solve this. You could add WidthRequest for the child view of SwipeItemView. As follows:(set WidthRequest="100")
<SwipeView x:Name="swipeView" HeightRequest="300">
<SwipeView.LeftItems>
<SwipeItems>
<SwipeItemView>
<StackLayout BackgroundColor="#208b55"
Orientation="Vertical"
WidthRequest="100"
Margin="20">
...
</StackLayout>
</SwipeItemView>
</SwipeItems>
</SwipeView.LeftItems>
The effect:
In addition, you could submit it as an issue here in Github to follow it up there to know whether it has been sloved.
So Im building an app where I should show multiple products, since I want to show more than just one product in one row, i couldn't use a ListView, so I thought about using a FlexLayout as a Bindable-Layout and use the ItemsSource to display my list of products, whiche was a sucess. So I wanted to add a touch event to each of my products shown in the flexlayout, to do so I created a new Behaviour, this is the link for the code I used :
https://gist.github.com/jtaubensee/96a5e49c66a205e36ff32787f1d2114d
that did work and therefor I can use a Command. my problem is that I want to get the product that was clicked, and I can't figure out how to do ? is there anyone who can possibly help me with that ?
If you are not adverse to xaml, this is how I handle it.
<FlexLayout BindableLayout.ItemsSource="{Binding Abilities}" IsVisible="{Binding HasAbilities}" BindableLayout.ItemTemplate="{DataTemplate attitm:AttachedAbility}"
AlignItems="Center" Wrap="Wrap" JustifyContent="Center"/>
and the template implements the touch gesture, and passes the object as the Command Parameter;
<ContentView.Content>
<StackLayout Padding="20,8" HorizontalOptions="Center">
<Frame BorderColor="{OnPlatform Android=DarkCyan, UWP=Accent}" Padding="4">
<Frame.GestureRecognizers>
<TapGestureRecognizer Command="{Binding DrillIntoCommand}" CommandParameter="{Binding}"/>
</Frame.GestureRecognizers>
<StackLayout HorizontalOptions="Center" Orientation="Horizontal">
<Label x:Name="TitleLabel" Text="{Binding Title}" HorizontalOptions="Center" VerticalOptions="Center"/>
<Label Text="" FontFamily="{StaticResource FontAwesomeSolid}" IsVisible="{Binding IsUserCreated}" TextColor="Orange" HorizontalOptions="Center"/>
</StackLayout>
</Frame>
</StackLayout>
</ContentView.Content>
This used to work for me but no longer does. Maybe because of updates? But I am just trying to get a tap event attached to my label called JournalWarning. I was using TapGestureRecognizer.
Before I had the TapGestureRecognizer calling an OnReconnect method in xaml like so
<StackLayout x:Name="Journal" IsVisible="false" VerticalOptions="FillAndExpand" Padding="20, 0, 20, 20" Spacing="10">
<StackLayout Orientation="Horizontal">
<Label x:Name="JournalTitle" FontSize="Micro" />
<Label x:Name="AboutFormat" Text="About Formatted Text" FontSize="Micro" TextColor="{StaticResource InputBackgroundColor}" HorizontalTextAlignment="End" HorizontalOptions="EndAndExpand" />
</StackLayout>
<StackLayout>
<local:DarkKeyboardEditor x:Name="JournalContent" Text="{Binding Source={x:Static local:JournalTracker.Current}, Path=Content}" TextChanged="OnJournalChanged" Focused="OnEdit" Unfocused="OffEdit" FontSize="Small" HeightRequest="{Binding Source={x:Static local:JournalTracker.Current}, Path=EntryHeight}" />
<Label x:Name="JournalWarning" Text="Your device has lost its connection to the journal server. Journals cannot be viewed or edited at this time. Tap here to try and reconnect." FontSize="Medium" Style="{StaticResource warningLabelStyle}" IsVisible="{Binding Source={x:Static local:JournalTracker.Current}, Path=IsConnected, Converter={StaticResource inverser}}" VerticalOptions="EndAndExpand" AutomationProperties.IsInAccessibleTree="true">
<Label.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnReconnect" />
</Label.GestureRecognizers>
</Label>
<BoxView x:Name="spacer" Style="{StaticResource SpacerStyle}" />
</StackLayout>
</StackLayout>
This stopped working so I thought maybe my padding was in the way and started to take away padding and margins but that made no difference so far. I also tried making the TapGestureRecognizer in C# like...
var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += (s, e) => {
OnReconnect();
};
JournalWarning.GestureRecognizers.Add(tapGestureRecognizer);
Thought about making a command instead to see if that would make a difference. I'll probably try that next idk, this seems like a really noob question and I'm not sure why this isn't getting hit at all.
Can you see anything that might be an issue? Or did something changed in an update that I missed? Thanks
I have a xaml user registration page in a Xamarin Forms app where I want the user to accept the terms and conditions of use. I've used two labels in a horizontal stacklayout so that I can make the "terms and conditions" tappable to navigate to the terms and conditions page. It looks fine on an iPhone 6 and up:
But on a 5s it wraps as below:
The xaml for the controls:
<StackLayout Grid.Row="8" Grid.Column="0" Grid.ColumnSpan="2" Orientation="Horizontal" Padding="0,0,0,5">
<Label Text="I agree to the" VerticalOptions="Center" HorizontalOptions="Start" />
<Label Text="terms and conditions" VerticalOptions="Center" HorizontalOptions="Start" LineBreakMode="WordWrap" >
<Label.TextColor>
<OnPlatform x:TypeArguments="Color"
iOS="#0076fa"
Android="#3d5afe" />
</Label.TextColor>
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding TermsCommand}" />
</Label.GestureRecognizers>
</Label>
<Switch IsToggled="{Binding Agree}" HeightRequest="30" WidthRequest="50" HorizontalOptions="Start" VerticalOptions="Center" />
</StackLayout>
Is there anyway to format all the text to wrap as a single sentence would?
I would suggest you create a custom label control to handle this!
There is a very good starting point available up on the blog of Pieter Nijs here https://blog.pieeatingninjas.be/2017/11/05/creating-a-hyperlinklabel-in-xamarin-forms/ which looks like would be enough for your needs.
In short he created a label control that accepts markup text to be displayed on screen, meaning you can have hyperlinks available for only a portion of the text!
Technically it will transform the text on each platform to a control that can handle hyperlinks.