feat: rename to PinCode, add styles for size.

This commit is contained in:
rabbitism
2024-07-31 14:11:16 +08:00
parent 16e68061d1
commit ff666cafdc
17 changed files with 149 additions and 94 deletions

View File

@@ -0,0 +1,25 @@
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:u="https://irihi.tech/ursa"
xmlns:vm="using:Ursa.Demo.ViewModels"
x:DataType="vm:PinCodeDemoViewModel"
x:CompileBindings="True"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="Ursa.Demo.Pages.PinCodeDemo">
<StackPanel>
<u:Form>
<u:PinCode u:FormItem.Label="Regular" Count="4" Name="v4" CompleteCommand="{Binding CompleteCommand}"/>
<u:PinCode u:FormItem.Label="Digit Only" Count="4" Mode="Digit" DataValidationErrors.Errors="{Binding Error}"/>
<u:PinCode u:FormItem.Label="Letter Only" Count="4" Mode="Letter"/>
<u:PinCode u:FormItem.Label="Password Mask" Count="6" PasswordChar="•" Complete="VerificationCode_OnComplete" />
<u:FormGroup>
<u:PinCode u:FormItem.Label="Size Small" Count="6" Classes="Small" />
<u:PinCode u:FormItem.Label="Size Default" Count="6" />
<u:PinCode u:FormItem.Label="Size Large" Count="6" Classes="Large" />
</u:FormGroup>
</u:Form>
</StackPanel>
</UserControl>

View File

@@ -3,14 +3,14 @@ using Ursa.Controls;
namespace Ursa.Demo.Pages;
public partial class VerificationCodeDemo : UserControl
public partial class PinCodeDemo : UserControl
{
public VerificationCodeDemo()
public PinCodeDemo()
{
InitializeComponent();
}
private async void VerificationCode_OnComplete(object? _, VerificationCodeCompleteEventArgs e)
private async void VerificationCode_OnComplete(object? _, PinCodeCompleteEventArgs e)
{
var text = string.Join(string.Empty, e.Code);
await MessageBox.ShowOverlayAsync(text);

View File

@@ -1,17 +0,0 @@
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:u="https://irihi.tech/ursa"
xmlns:vm="using:Ursa.Demo.ViewModels"
x:DataType="vm:VerificationCodeDemoViewModel"
x:CompileBindings="True"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="Ursa.Demo.Pages.VerificationCodeDemo">
<StackPanel>
<u:VerificationCode Count="4" Name="v4" CompleteCommand="{Binding CompleteCommand}"/>
<u:VerificationCode Count="4" Mode="Digit" DataValidationErrors.Errors="{Binding Error}"/>
<u:VerificationCode Count="4" Mode="Letter"/>
<u:VerificationCode Count="6" PasswordChar="•" Complete="VerificationCode_OnComplete" />
</StackPanel>
</UserControl>

View File

@@ -67,7 +67,7 @@ public class MainViewViewModel : ViewModelBase
MenuKeys.MenuKeyThemeToggler => new ThemeTogglerDemoViewModel(),
MenuKeys.MenuKeyToolBar => new ToolBarDemoViewModel(),
MenuKeys.MenuKeyTimeBox => new TimeBoxDemoViewModel(),
MenuKeys.MenuKeyVerificationCode => new VerificationCodeDemoViewModel(),
MenuKeys.MenuKeyPinCode => new PinCodeDemoViewModel(),
_ => throw new ArgumentOutOfRangeException(nameof(s), s, null)
};
}

View File

@@ -40,6 +40,7 @@ public class MenuViewModel: ViewModelBase
new() { MenuHeader = "Numeric UpDown", Key = MenuKeys.MenuKeyNumericUpDown },
new() { MenuHeader = "NumPad", Key = MenuKeys.MenuKeyNumPad },
new() { MenuHeader = "Pagination", Key = MenuKeys.MenuKeyPagination },
new() { MenuHeader = "PinCode", Key = MenuKeys.MenuKeyPinCode},
new() { MenuHeader = "RangeSlider", Key = MenuKeys.MenuKeyRangeSlider },
new() { MenuHeader = "Rating", Key = MenuKeys.MenuKeyRating, Status = "New"},
new() { MenuHeader = "Scroll To", Key = MenuKeys.MenuKeyScrollToButton },
@@ -53,7 +54,6 @@ public class MenuViewModel: ViewModelBase
new() { MenuHeader = "TwoTonePathIcon", Key = MenuKeys.MenuKeyTwoTonePathIcon},
new() { MenuHeader = "ToolBar", Key = MenuKeys.MenuKeyToolBar },
new() { MenuHeader = "Time Box", Key = MenuKeys.MenuKeyTimeBox },
new() { MenuHeader = "Verification Code", Key = MenuKeys.MenuKeyVerificationCode},
};
}
}
@@ -101,7 +101,7 @@ public static class MenuKeys
public const string MenuKeyThemeToggler = "ThemeToggler";
public const string MenuKeyTreeComboBox = "TreeComboBox";
public const string MenuKeyToolBar = "ToolBar";
public const string MenuKeyVerificationCode = "VerificationCode";
public const string MenuKeyPinCode = "PinCode";
public const string MenuKeyTimeBox = "TimeBox";
}

View File

@@ -8,12 +8,12 @@ using Ursa.Controls;
namespace Ursa.Demo.ViewModels;
public partial class VerificationCodeDemoViewModel: ObservableObject
public partial class PinCodeDemoViewModel: ObservableObject
{
public ICommand CompleteCommand { get; set; }
[ObservableProperty] private List<Exception>? _error;
public VerificationCodeDemoViewModel()
public PinCodeDemoViewModel()
{
CompleteCommand = new AsyncRelayCommand<IList<string>>(OnComplete);
Error = [new Exception("Invalid verification code")];

View File

@@ -17,7 +17,8 @@ internal class ClassHelper: AvaloniaObject
private static void OnClassesChanged(StyledElement sender, AvaloniaPropertyChangedEventArgs value)
{
string classes = value.GetNewValue<string>();
string? classes = value.GetNewValue<string?>();
if (classes is null) return;
sender.Classes.Clear();
sender.Classes.Add(classes);
}

View File

@@ -3,24 +3,23 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:u="https://irihi.tech/ursa">
<Design.PreviewWith>
<u:VerificationCode Count="4" />
<u:PinCode Count="4" />
</Design.PreviewWith>
<!-- Add Resources Here -->
<ControlTheme x:Key="{x:Type u:VerificationCodeItem}" TargetType="u:VerificationCodeItem">
<Setter Property="Margin" Value="8" />
<Setter Property="FontSize" Value="20" />
<ControlTheme x:Key="{x:Type u:PinCodeItem}" TargetType="u:PinCodeItem">
<Setter Property="Focusable" Value="True" />
<Setter Property="Height" Value="48" />
<Setter Property="Width" Value="48" />
<Setter Property="CornerRadius" Value="3" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Height" Value="{DynamicResource TextBoxDefaultHeight}" />
<Setter Property="Width" Value="{DynamicResource TextBoxDefaultHeight}" />
<Setter Property="CornerRadius" Value="{DynamicResource TextBoxDefaultCornerRadius}" />
<Setter Property="BorderThickness" Value="{DynamicResource TextBoxBorderThickness}" />
<Setter Property="Background" Value="{DynamicResource TextBoxDefaultBackground}"></Setter>
<Setter Property="Template">
<ControlTemplate>
<Border
Name="PART_Background"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{DynamicResource TextBoxDefaultBackground}"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<TextPresenter
@@ -45,34 +44,43 @@
<Style Selector="^:focus:error /template/ Border#PART_Background">
<Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
</Style>
<Style Selector="^.Large">
<Setter Property="Height" Value="{DynamicResource TextBoxLargeHeight}" />
<Setter Property="Width" Value="{DynamicResource TextBoxLargeHeight}" />
</Style>
<Style Selector="^.Small">
<Setter Property="Height" Value="{DynamicResource TextBoxSmallHeight}" />
<Setter Property="Width" Value="{DynamicResource TextBoxSmallHeight}" />
</Style>
</ControlTheme>
<ControlTheme x:Key="{x:Type u:VerificationCodeCollection}" TargetType="u:VerificationCodeCollection">
<ControlTheme x:Key="{x:Type u:PinCodeCollection}" TargetType="u:PinCodeCollection">
<Setter Property="Template">
<ControlTemplate TargetType="u:VerificationCodeCollection">
<ControlTemplate TargetType="u:PinCodeCollection">
<ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
</ControlTemplate>
</Setter>
</ControlTheme>
<ControlTheme x:Key="{x:Type u:VerificationCode}" TargetType="u:VerificationCode">
<ControlTheme x:Key="{x:Type u:PinCode}" TargetType="u:PinCode">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Template">
<ControlTemplate TargetType="u:VerificationCode">
<ControlTemplate TargetType="u:PinCode">
<DataValidationErrors>
<u:VerificationCodeCollection HorizontalAlignment="Left" Name="{x:Static u:VerificationCode.PART_ItemsControl}" ItemsSource="{TemplateBinding Digits}">
<u:VerificationCodeCollection.ItemsPanel>
<u:PinCodeCollection HorizontalAlignment="Left" Name="{x:Static u:PinCode.PART_ItemsControl}" ItemsSource="{TemplateBinding Digits}">
<u:PinCodeCollection.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="{TemplateBinding Count}" Rows="1" />
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</u:VerificationCodeCollection.ItemsPanel>
<u:VerificationCodeCollection.ItemContainerTheme>
<ControlTheme BasedOn="{StaticResource {x:Type u:VerificationCodeItem}}" TargetType="u:VerificationCodeItem">
<Setter Property="PasswordChar" Value="{Binding $parent[u:VerificationCode].PasswordChar}" />
<Setter Property="DataValidationErrors.Errors" Value="{Binding $parent[u:VerificationCode].(DataValidationErrors.Errors)}" />
</u:PinCodeCollection.ItemsPanel>
<u:PinCodeCollection.ItemContainerTheme>
<ControlTheme BasedOn="{StaticResource {x:Type u:PinCodeItem}}" TargetType="u:PinCodeItem">
<Setter Property="PasswordChar" Value="{Binding $parent[u:PinCode].PasswordChar}" />
<Setter Property="DataValidationErrors.Errors" Value="{Binding $parent[u:PinCode].(DataValidationErrors.Errors)}" />
</ControlTheme>
</u:VerificationCodeCollection.ItemContainerTheme>
</u:VerificationCodeCollection>
</u:PinCodeCollection.ItemContainerTheme>
</u:PinCodeCollection>
</DataValidationErrors>
</ControlTemplate>
</Setter>

View File

@@ -48,6 +48,6 @@
<ResourceInclude Source="ToolBar.axaml" />
<ResourceInclude Source="TimeBox.axaml"/>
<ResourceInclude Source="UrsaWindow.axaml"/>
<ResourceInclude Source="VerificationCode.axaml" />
<ResourceInclude Source="PinCode.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

View File

@@ -0,0 +1,33 @@
<Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:u="https://irihi.tech/ursa"
xmlns:theme="https://irihi.tech/ursa/themes/semi">
<Design.PreviewWith>
<Border Padding="20">
<!-- Add Controls for Previewer Here -->
</Border>
</Design.PreviewWith>
<!-- Add Styles Here -->
<Style Selector="u|PinCode">
<Style Selector="^ u|PinCodeItem:nth-last-child(n+2)">
<Setter Property="Margin" Value="0 0 8 0"></Setter>
</Style>
</Style>
<Style Selector="u|PinCode.Small">
<Style Selector="^ u|PinCodeItem">
<Setter Property="theme:ClassHelper.Classes" Value="Small"></Setter>
<Style Selector="^:nth-last-child(n+2)">
<Setter Property="Margin" Value="0 0 6 0"></Setter>
</Style>
</Style>
</Style>
<Style Selector="u|PinCode.Large">
<Style Selector="^ u|PinCodeItem">
<Setter Property="theme:ClassHelper.Classes" Value="Large"></Setter>
<Style Selector="^:nth-last-child(n+2)">
<Setter Property="Margin" Value="0 0 12 0"></Setter>
</Style>
</Style>
</Style>
</Styles>

View File

@@ -6,6 +6,7 @@
</Design.PreviewWith>
<StyleInclude Source="Breadcrumb.axaml" />
<StyleInclude Source="ButtonGroup.axaml" />
<StyleInclude Source="PinCode.axaml" />
<StyleInclude Source="Skeleton.axaml" />
<StyleInclude Source="ToolBar.axaml"/>
<StyleInclude Source="TimeBox.axaml"/>

View File

@@ -5,18 +5,19 @@ using Avalonia.Controls.Metadata;
using Avalonia.Controls.Primitives;
using Avalonia.Input;
using Avalonia.Interactivity;
using Avalonia.LogicalTree;
using Irihi.Avalonia.Shared.Helpers;
namespace Ursa.Controls;
[TemplatePart(PART_ItemsControl, typeof(ItemsControl))]
public class VerificationCode: TemplatedControl
public class PinCode: TemplatedControl
{
public const string PART_ItemsControl = "PART_ItemsControl";
private ItemsControl? _itemsControl;
private int _currentIndex;
public static readonly StyledProperty<ICommand?> CompleteCommandProperty = AvaloniaProperty.Register<VerificationCode, ICommand?>(
public static readonly StyledProperty<ICommand?> CompleteCommandProperty = AvaloniaProperty.Register<PinCode, ICommand?>(
nameof(CompleteCommand));
public ICommand? CompleteCommand
@@ -25,7 +26,7 @@ public class VerificationCode: TemplatedControl
set => SetValue(CompleteCommandProperty, value);
}
public static readonly StyledProperty<int> CountProperty = AvaloniaProperty.Register<VerificationCode, int>(
public static readonly StyledProperty<int> CountProperty = AvaloniaProperty.Register<PinCode, int>(
nameof(Count));
public int Count
@@ -35,7 +36,7 @@ public class VerificationCode: TemplatedControl
}
public static readonly StyledProperty<char> PasswordCharProperty =
AvaloniaProperty.Register<VerificationCode, char>(
AvaloniaProperty.Register<PinCode, char>(
nameof(PasswordChar));
public char PasswordChar
@@ -44,17 +45,17 @@ public class VerificationCode: TemplatedControl
set => SetValue(PasswordCharProperty, value);
}
public static readonly StyledProperty<VerificationCodeMode> ModeProperty =
AvaloniaProperty.Register<VerificationCode, VerificationCodeMode>(
nameof(Mode), defaultValue: VerificationCodeMode.Digit | VerificationCodeMode.Letter);
public static readonly StyledProperty<PinCodeMode> ModeProperty =
AvaloniaProperty.Register<PinCode, PinCodeMode>(
nameof(Mode), defaultValue: PinCodeMode.Digit | PinCodeMode.Letter);
public VerificationCodeMode Mode
public PinCodeMode Mode
{
get => GetValue(ModeProperty);
set => SetValue(ModeProperty, value);
}
public static readonly DirectProperty<VerificationCode, IList<string>> DigitsProperty = AvaloniaProperty.RegisterDirect<VerificationCode, IList<string>>(
public static readonly DirectProperty<PinCode, IList<string>> DigitsProperty = AvaloniaProperty.RegisterDirect<PinCode, IList<string>>(
nameof(Digits), o => o.Digits);
private IList<string> _digits = [];
@@ -64,23 +65,23 @@ public class VerificationCode: TemplatedControl
private set => SetAndRaise(DigitsProperty, ref _digits, value);
}
public static readonly RoutedEvent<VerificationCodeCompleteEventArgs> CompleteEvent =
RoutedEvent.Register<VerificationCode, VerificationCodeCompleteEventArgs>(
public static readonly RoutedEvent<PinCodeCompleteEventArgs> CompleteEvent =
RoutedEvent.Register<PinCode, PinCodeCompleteEventArgs>(
nameof(Complete), RoutingStrategies.Bubble);
public event EventHandler<VerificationCodeCompleteEventArgs> Complete
public event EventHandler<PinCodeCompleteEventArgs> Complete
{
add => AddHandler(CompleteEvent, value);
remove => RemoveHandler(CompleteEvent, value);
}
static VerificationCode()
static PinCode()
{
CountProperty.Changed.AddClassHandler<VerificationCode, int>((code, args) => code.OnCountOfDigitChanged(args));
FocusableProperty.OverrideDefaultValue<VerificationCode>(true);
CountProperty.Changed.AddClassHandler<PinCode, int>((code, args) => code.OnCountOfDigitChanged(args));
FocusableProperty.OverrideDefaultValue<PinCode>(true);
}
public VerificationCode()
public PinCode()
{
InputMethod.SetIsInputMethodEnabled(this, false);
}
@@ -103,18 +104,21 @@ public class VerificationCode: TemplatedControl
private void OnControlPressed(object? sender, PointerPressedEventArgs e)
{
if (e.Source is Control)
if (e.Source is Control t)
{
/*
var item = t.FindLogicalAncestorOfType<VerificationCodeItem>();
var item = t.FindLogicalAncestorOfType<PinCodeItem>();
if (item != null)
{
item.Focus();
_currentIndex = _itemsControl?.IndexFromContainer(item) ?? 0;
}
*/
_currentIndex = MathHelpers.SafeClamp(_currentIndex, 0, Count - 1);
_itemsControl?.ContainerFromIndex(_currentIndex)?.Focus();
else
{
_currentIndex = MathHelpers.SafeClamp(_currentIndex, 0, Count - 1);
_itemsControl?.ContainerFromIndex(_currentIndex)?.Focus();
}
}
e.Handled = true;
}
@@ -124,7 +128,7 @@ public class VerificationCode: TemplatedControl
base.OnTextInput(e);
if (e.Text?.Length == 1 && _currentIndex < Count)
{
var presenter = _itemsControl?.ContainerFromIndex(_currentIndex) as VerificationCodeItem;
var presenter = _itemsControl?.ContainerFromIndex(_currentIndex) as PinCodeItem;
if (presenter is null) return;
char c = e.Text[0];
if (!Valid(c, this.Mode)) return;
@@ -135,20 +139,20 @@ public class VerificationCode: TemplatedControl
if (_currentIndex == Count)
{
CompleteCommand?.Execute(Digits);
RaiseEvent(new VerificationCodeCompleteEventArgs(Digits, CompleteEvent));
RaiseEvent(new PinCodeCompleteEventArgs(Digits, CompleteEvent));
}
}
}
private bool Valid(char c, VerificationCodeMode mode)
private bool Valid(char c, PinCodeMode mode)
{
bool isDigit = char.IsDigit(c);
bool isLetter = char.IsLetter(c);
return mode switch
{
VerificationCodeMode.Digit => isDigit,
VerificationCodeMode.Letter => isLetter,
VerificationCodeMode.Digit | VerificationCodeMode.Letter => isDigit || isLetter,
PinCodeMode.Digit => isDigit,
PinCodeMode.Letter => isLetter,
PinCodeMode.Digit | PinCodeMode.Letter => isDigit || isLetter,
_ => true
};
}
@@ -159,7 +163,7 @@ public class VerificationCode: TemplatedControl
if (e.Key == Key.Back && _currentIndex >= 0)
{
_currentIndex = MathHelpers.SafeClamp(_currentIndex, 0, Count - 1);
var presenter = _itemsControl?.ContainerFromIndex(_currentIndex) as VerificationCodeItem;
var presenter = _itemsControl?.ContainerFromIndex(_currentIndex) as PinCodeItem;
if (presenter is null) return;
Digits[_currentIndex] = string.Empty;
presenter.Text = string.Empty;

View File

@@ -3,16 +3,16 @@ using Avalonia.Input;
namespace Ursa.Controls;
public class VerificationCodeCollection: ItemsControl
public class PinCodeCollection: ItemsControl
{
protected override bool NeedsContainerOverride(object? item, int index, out object? recycleKey)
{
return NeedsContainer<VerificationCodeItem>(item, out recycleKey);
return NeedsContainer<PinCodeItem>(item, out recycleKey);
}
protected override Control CreateContainerForItemOverride(object? item, int index, object? recycleKey)
{
return new VerificationCodeItem()
return new PinCodeItem()
{
[InputMethod.IsInputMethodEnabledProperty] = false,
};

View File

@@ -0,0 +1,8 @@
using Avalonia.Interactivity;
namespace Ursa.Controls;
public class PinCodeCompleteEventArgs(IList<string> code, RoutedEvent? @event) : RoutedEventArgs(@event)
{
public IList<string> Code { get; } = code;
}

View File

@@ -4,9 +4,9 @@ using Avalonia.Data;
namespace Ursa.Controls;
public class VerificationCodeItem: TemplatedControl
public class PinCodeItem: TemplatedControl
{
public static readonly StyledProperty<string> TextProperty = AvaloniaProperty.Register<VerificationCodeItem, string>(
public static readonly StyledProperty<string> TextProperty = AvaloniaProperty.Register<PinCodeItem, string>(
nameof(Text), defaultBindingMode: BindingMode.TwoWay);
public string Text
@@ -15,7 +15,7 @@ public class VerificationCodeItem: TemplatedControl
set => SetValue(TextProperty, value);
}
public static readonly StyledProperty<char> PasswordCharProperty = AvaloniaProperty.Register<VerificationCodeItem, char>(
public static readonly StyledProperty<char> PasswordCharProperty = AvaloniaProperty.Register<PinCodeItem, char>(
nameof(PasswordChar), defaultBindingMode: BindingMode.TwoWay);
public char PasswordChar

View File

@@ -1,7 +1,7 @@
namespace Ursa.Controls;
[Flags]
public enum VerificationCodeMode
public enum PinCodeMode
{
Letter = 1,
Digit = 2,

View File

@@ -1,8 +0,0 @@
using Avalonia.Interactivity;
namespace Ursa.Controls;
public class VerificationCodeCompleteEventArgs(IList<string> code, RoutedEvent? @event) : RoutedEventArgs(@event)
{
public IList<string> Code { get; } = code;
}