A while back I put together a GitHub repository for Material Design Controls for form elements (Entry, Picker, etc.) for Xamarin.Forms (iOS, Android, and UWP).
You can find some of the original posts about that here:
- Xamarin.Control – Xamarin.Forms MaterialEntry
- Xamarin.NuGet – Coming to a NuGet Package Near You
- Xamarin.Tip – Borderless Inputs
And you can find the GitHub repo and NuGet package here:
- GitHub: https://github.com/SuavePirate/SuaveControls.MaterialFormControls
- NuGet: https://www.nuget.org/packages/MaterialFormControls/2018.1.28-pre1
In this post, I wanted to focus on some of the newer features I’ve added to the latest 2018.1.28-pre1
release.
The gist is:
- Invalid vs. Valid State
- Font updates
- Color flexibility
With these, you can now specify updated default colors, invalid state colors, and the original focused accent colors.
Here’s an example of a Style
resource that uses these:
<!-- Material Entry Styles --> <Style x:Key="PrimaryMaterialEntry" TargetType="material:MaterialEntry"> <Setter Property="AccentColor" Value="{DynamicResource PrimaryColor}"/> <Setter Property="DefaultColor" Value="Gray"/> <Setter Property="InvalidColor" Value="Red"/> </Style>
What does validation state mean? You can attach behaviors to easily add validation to your material form controls. Here is an example behavior on the MaterialEntry
that requires a length, and sets the state:
/// <summary> /// Material entry length behavior. Allows for the limitation of the text with a min and max length /// </summary> public class MaterialEntryLengthValidationBehavior : Behavior<MaterialEntry> { public int MaxLength { get; set; } public int MinLength { get; set; } = 0; /// <summary> /// Attach events on attachment to view /// </summary> /// <param name="bindable">Bindable.</param> protected override void OnAttachedTo(MaterialEntry bindable) { base.OnAttachedTo(bindable); bindable.TextChanged += OnEntryTextChanged; bindable.EntryUnfocused += Bindable_EntryUnfocused; } /// <summary> /// Detach events on detaching from view /// </summary> /// <param name="bindable">Bindable.</param> protected override void OnDetachingFrom(MaterialEntry bindable) { base.OnDetachingFrom(bindable); bindable.TextChanged -= OnEntryTextChanged; bindable.EntryUnfocused -= Bindable_EntryUnfocused; } /// <summary> /// Stop text input once max is hit /// </summary> /// <param name="sender">Sender.</param> /// <param name="e">E.</param> void OnEntryTextChanged(object sender, TextChangedEventArgs e) { var entry = (Entry)sender; if (entry.Text == null) return; // if Entry text is longer than valid length if (entry.Text.Length > this.MaxLength) { string entryText = entry.Text; entryText = entryText.Remove(entryText.Length - 1); // remove last char entry.Text = entryText; } } /// <summary> /// Set invalid on unfocus if the min is not met /// </summary> /// <param name="sender">Sender.</param> /// <param name="e">E.</param> void Bindable_EntryUnfocused(object sender, FocusEventArgs e) { var entry = (MaterialEntry)sender; if (MinLength > 0) { if (entry.Text == null || entry.Text.Length < this.MinLength) { entry.IsValid = false; } else { entry.IsValid = true; } } } }
Then you can attach it to a MaterialEntry
<material:MaterialEntry Placeholder="CVV" Keyboard="Numeric" Text="{Binding CVV}" Style="{DynamicResource PrimaryMaterialEntry}"> <material:MaterialEntry.Behaviors> <behaviors:MaterialEntryLengthValidationBehavior MaxLength="3" MinLength="3"/> </material:MaterialEntry.Behaviors> </material:MaterialEntry>
And then you get:
These validation states, and updated color properties are available on all the Material Forms controls, so install the preview nuget package and get started!
Install-Package MaterialFormControls -Version 2018.1.28-pre1
If you like what you see, don’t forget to follow me on twitter @Suave_Pirate, check out my GitHub, and subscribe to my blog to learn more mobile developer tips and tricks!
Interested in sponsoring developer content? Message @Suave_Pirate on twitter for details.
Like
LikeLike