Added input validator sample page

Author: jamesmcroft

assets/SampleIcons.afdesign

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <string name="Hello">Hello World, Click Me!</string>
-    <string name="ApplicationName">MADE.Samples</string>
+    <string name="ApplicationName">MADE Sample Collection</string>
 </resources>

samples/MADE.Samples/MADE.Samples.Droid/Resources/values/Strings.xml

@@ -14,7 +14,7 @@
     <Grid Padding="12">
         <controls:AdaptiveGridView
             extensions:ListViewBaseExtensions.ItemClickCommand="{x:Bind ViewModel.NavigateToSampleCommand}"
-            DesiredWidth="400"
+            DesiredWidth="340"
             IsItemClickEnabled="true"
             ItemsSource="{x:Bind ViewModel.Samples}"
             OneRowModeEnabled="False"

samples/MADE.Samples/MADE.Samples.Shared/Assets/SharedAssets.md

@@ -17,7 +17,7 @@ public MainPageViewModel(INavigationService navigationService, IMessenger messen
         {
         }
 
-        public ICommand NavigateToSampleCommand => new RelayCommand<Sample>(this.NavigateToSample);
+        public ICommand NavigateToSampleCommand => new RelayCommand<Sample>(NavigateToSample);
 
         public ICollection<SampleGroup> SampleGroups { get; } = new List<SampleGroup>
         {
@@ -30,7 +30,12 @@ public MainPageViewModel(INavigationService navigationService, IMessenger messen
                         "FilePicker",
                         typeof(FilePickerPage),
                         string.Empty,
-                        "/Features/Samples/Assets/FilePicker.png")
+                        "/Features/Samples/Assets/FilePicker.png"),
+                    new Sample(
+                        "InputValidator",
+                        typeof(InputValidatorPage),
+                        string.Empty,
+                        "/Features/Samples/Assets/InputValidator.png"),
                 }
             }
         };
@@ -39,7 +44,7 @@ public MainPageViewModel(INavigationService navigationService, IMessenger messen
 
         private void NavigateToSample(Sample sample)
         {
-            this.NavigationService.NavigateTo(sample.Page);
+            NavigationService.NavigateTo(sample.Page);
         }
     }
 }

samples/MADE.Samples/MADE.Samples.Shared/Features/Home/Pages/MainPage.xaml

@@ -37,13 +37,13 @@
 
             <TextBlock
                 Margin="0,0,0,12"
-                Style="{StaticResource HeaderTextBlockStyle}"
+                Style="{StaticResource TitleTextBlockStyle}"
                 Text="FilePicker control" />
 
             <TextBlock
                 Grid.Row="1"
-                Margin="0,0,0,12"
-                Style="{StaticResource SubtitleTextBlockStyle}"
+                Margin="0,0,0,48"
+                Style="{StaticResource BaseTextBlockStyle}"
                 Text="The FilePicker is a custom-built UI element that provides a file selection user experience. The control works in a similar way to the file input element in web applications." />
 
             <ScrollViewer Grid.Row="2">

samples/MADE.Samples/MADE.Samples.Shared/Features/Home/ViewModels/MainPageViewModel.cs

@@ -0,0 +1,86 @@
+<pages:MvvmPage
+    x:Class="MADE.Samples.Features.Samples.Pages.InputValidatorPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:MADE.UI.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:pages="using:MADE.UI.Views.Navigation.Pages"
+    xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+    mc:Ignorable="d">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <win:CommandBar>
+            <win:CommandBar.Content>
+                <Button
+                    x:Name="BackButton"
+                    VerticalAlignment="Top"
+                    Command="{x:Bind ViewModel.GoBackCommand}"
+                    IsEnabled="{x:Bind Frame.CanGoBack, Mode=OneWay}"
+                    Style="{StaticResource NavigationBackButtonNormalStyle}"
+                    ToolTipService.ToolTip="Back" />
+            </win:CommandBar.Content>
+        </win:CommandBar>
+
+        <Grid Grid.Row="1" Padding="12">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="*" />
+            </Grid.RowDefinitions>
+
+            <TextBlock
+                Margin="0,0,0,12"
+                Style="{StaticResource TitleTextBlockStyle}"
+                Text="InputValidator control" />
+
+            <TextBlock
+                Grid.Row="1"
+                Margin="0,0,0,48"
+                Style="{StaticResource BaseTextBlockStyle}"
+                Text="The InputValidator is a custom-built UI element wrapper for input controls that provides an input validation experience using MADE's in-built or custom built validators." />
+
+            <ScrollViewer Grid.Row="2">
+                <Grid>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="*" />
+                    </Grid.RowDefinitions>
+
+                    <controls:InputValidator
+                        x:Name="TextBoxValidator"
+                        Margin="0,0,0,12"
+                        Input="{x:Bind TextBox.Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
+                        Validators="{x:Bind ViewModel.InputTextValidators}">
+                        <TextBox
+                            x:Name="TextBox"
+                            Header="TextBox with InputValidator"
+                            Text="{x:Bind ViewModel.InputText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
+                    </controls:InputValidator>
+
+                    <controls:InputValidator
+                        x:Name="DatePickerValidator"
+                        Grid.Row="1"
+                        Margin="0,0,0,12"
+                        Input="{Binding SelectedDate, Mode=TwoWay, ElementName=DatePicker, UpdateSourceTrigger=PropertyChanged}"
+                        Validators="{x:Bind ViewModel.InputDateValidators}">
+                        <DatePicker
+                            x:Name="DatePicker"
+                            Header="DatePicker with InputValidator"
+                            SelectedDate="{x:Bind ViewModel.InputDate, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
+                    </controls:InputValidator>
+                </Grid>
+            </ScrollViewer>
+
+        </Grid>
+
+
+    </Grid>
+</pages:MvvmPage>

samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/Assets/InputValidator.png

@@ -6,16 +6,16 @@ namespace MADE.Samples.Features.Samples.Pages
     using MADE.UI.Views.Navigation.Pages;
     using Microsoft.Extensions.DependencyInjection;
 
-    public sealed partial class FilePickerPage : MvvmPage
+    public sealed partial class InputValidatorPage : MvvmPage
     {
-        public FilePickerPage()
+        public InputValidatorPage()
         {
             this.InitializeComponent();
-            this.DataContext = new FileInputSamplePageViewModel(
+            this.DataContext = new InputValidatorPageViewModel(
                 App.Services.GetService<INavigationService>(),
                 App.Services.GetService<IMessenger>());
         }
 
-        public FileInputSamplePageViewModel ViewModel => this.DataContext as FileInputSamplePageViewModel;
+        public InputValidatorPageViewModel ViewModel => this.DataContext as InputValidatorPageViewModel;
     }
-}
+}

samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/Pages/FilePickerPage.xaml

@@ -0,0 +1,36 @@
+namespace MADE.Samples.Features.Samples.ViewModels
+{
+    using System;
+    using CommunityToolkit.Mvvm.Messaging;
+    using MADE.Data.Validation;
+    using MADE.Data.Validation.Validators;
+    using MADE.UI.Views.Navigation;
+    using MADE.UI.Views.Navigation.ViewModels;
+
+    public class InputValidatorPageViewModel : PageViewModel
+    {
+        private string inputText;
+        private DateTimeOffset? inputDate;
+
+        public InputValidatorPageViewModel(INavigationService navigationService, IMessenger messenger)
+            : base(navigationService, messenger)
+        {
+        }
+
+        public ValidatorCollection InputTextValidators { get; } = new ValidatorCollection { new RequiredValidator(), new MaxLengthValidator(16) };
+
+        public string InputText
+        {
+            get => inputText;
+            set => this.SetProperty(ref inputText, value);
+        }
+
+        public ValidatorCollection InputDateValidators { get; } = new ValidatorCollection { new RequiredValidator(), new BetweenValidator(DateTimeOffset.Now.AddDays(-7), DateTimeOffset.Now.AddDays(7)) };
+
+        public DateTimeOffset? InputDate
+        {
+            get => inputDate;
+            set => this.SetProperty(ref inputDate, value);
+        }
+    }
+}