feat: move back to textbox, add caret handling on click and focus.

demo/Ursa.Demo/Pages/IPv4BoxDemo.axaml

@@ -8,8 +8,9 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel>
+    <StackPanel HorizontalAlignment="Left">
         <TextBlock />
-        <u:IPv4Box Width="500" />
+        <u:IPv4Box />
+        <u:IPv4Box ShowPort="True" />
     </StackPanel>
 </UserControl>

demo/Ursa.Demo/Ursa.Demo.csproj

@@ -23,7 +23,7 @@
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
         <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.0.0-preview5" />
         <PackageReference Include="CommunityToolkit.Mvvm" Version="8.1.0" />
-        <PackageReference Include="Semi.Avalonia" Version="0.1.0-preview5.1" />
+        <PackageReference Include="Semi.Avalonia" Version="0.1.0-preview5.2" />
         <PackageReference Include="XamlNameReferenceGenerator" Version="1.5.1" />
     </ItemGroup>
 

src/Ursa.Themes.Semi/Controls/IPv4Box.axaml

@@ -3,55 +3,88 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:u="https://irihi.tech/ursa">
     <!--  Add Resources Here  -->
+    <Design.PreviewWith>
+        <StackPanel Margin="20">
+            <TextBlock Text="Hello World" />
+        </StackPanel>
+    </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type u:IPv4Box}" TargetType="{x:Type u:IPv4Box}">
+        <Setter Property="u:IPv4Box.Focusable" Value="True" />
+        <Setter Property="u:IPv4Box.HorizontalAlignment" Value="Left" />
         <Setter Property="u:IPv4Box.Template">
             <ControlTemplate TargetType="u:IPv4Box">
                 <Border
+                    Name="PART_Border"
+                    MinHeight="30"
+                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                    Background="Transparent"
                     BorderBrush="Black"
                     BorderThickness="1"
                     CornerRadius="3">
-                    <Grid Width="{TemplateBinding Width}" ColumnDefinitions="*, Auto, *, Auto, *, Auto, *, Auto, * ">
-                        <TextBox
-                            Name="{x:Static u:IPv4Box.PART_FirstTextBox}"
+                    <Grid Width="{TemplateBinding Width}" ColumnDefinitions="1*, Auto, 1*, Auto, 1*, Auto, 1*, Auto, * ">
+                        <TextPresenter
+                            Name="{x:Static u:IPv4Box.PART_FirstTextPresenter}"
                             Grid.Column="0"
-                            BorderThickness="0" />
-                        <TextPresenter
+                            MinWidth="48"
+                            VerticalAlignment="Center"
+                            Cursor="IBeam"
+                            Text="123"
+                            TextAlignment="Center" />
+                        <TextBlock
                             Grid.Column="1"
+                            Margin="0,4"
                             VerticalAlignment="Bottom"
+                            Focusable="False"
                             Text="." />
-                        <TextBox
-                            Name="{x:Static u:IPv4Box.PART_SecondTextBox}"
+                        <TextPresenter
+                            Name="{x:Static u:IPv4Box.PART_SecondTextPresenter}"
                             Grid.Column="2"
-                            BorderThickness="0" />
-                        <TextPresenter
+                            MinWidth="48"
+                            VerticalAlignment="Center"
+                            Cursor="IBeam"
+                            Text="123" />
+                        <TextBlock
                             Grid.Column="3"
+                            Margin="0,4"
                             VerticalAlignment="Bottom"
                             Text="." />
-                        <TextBox
-                            Name="{x:Static u:IPv4Box.PART_ThirdTextBox}"
-                            Grid.Column="4"
-                            BorderThickness="0" />
                         <TextPresenter
+                            Name="{x:Static u:IPv4Box.PART_ThirdTextPresenter}"
+                            Grid.Column="4"
+                            MinWidth="48"
+                            VerticalAlignment="Center"
+                            Cursor="IBeam" />
+                        <TextBlock
                             Grid.Column="5"
+                            Margin="0,4"
                             VerticalAlignment="Bottom"
                             Text="." />
-                        <TextBox
-                            Name="{x:Static u:IPv4Box.PART_FourthTextBox}"
+                        <TextPresenter
+                            Name="{x:Static u:IPv4Box.PART_FourthTextPresenter}"
                             Grid.Column="6"
-                            BorderThickness="0" />
+                            MinWidth="48"
+                            VerticalAlignment="Center"
+                            Cursor="IBeam" />
                         <Rectangle
                             Grid.Column="7"
                             Width="1"
-                            Margin="0,2"
+                            Margin="0,4"
                             VerticalAlignment="Stretch"
-                            Fill="Black" />
-                        <TextBox
-                            Name="{x:Static u:IPv4Box.PART_PortTextBox}"
+                            Fill="Black"
+                            IsVisible="{TemplateBinding ShowPort}" />
+                        <TextPresenter
+                            Name="{x:Static u:IPv4Box.PART_PortTextPresenter}"
                             Grid.Column="8"
-                            BorderThickness="0" />
+                            MinWidth="30"
+                            VerticalAlignment="Center"
+                            Cursor="IBeam"
+                            IsVisible="{TemplateBinding ShowPort}" />
                     </Grid>
                 </Border>
             </ControlTemplate>
         </Setter>
+        <Style Selector="^:focus-within /template/ Border#PART_Border">
+            <Setter Property="BorderBrush" Value="Red" />
+        </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Ursa/Controls/IPv4Box.cs

@@ -10,23 +10,30 @@ using Avalonia.Interactivity;
 
 namespace Ursa.Controls;
 
-[TemplatePart(PART_FirstTextBox, typeof(TextBox))]
-[TemplatePart(PART_SecondTextBox, typeof(TextBox))]
-[TemplatePart(PART_ThirdTextBox, typeof(TextBox))]
-[TemplatePart(PART_FourthTextBox, typeof(TextBox))]
-[TemplatePart(PART_PortTextBox, typeof(TextBox))]
+[TemplatePart(PART_FirstTextPresenter, typeof(TextPresenter))]
+[TemplatePart(PART_SecondTextPresenter, typeof(TextPresenter))]
+[TemplatePart(PART_ThirdTextPresenter, typeof(TextPresenter))]
+[TemplatePart(PART_FourthTextPresenter, typeof(TextPresenter))]
+[TemplatePart(PART_PortTextPresenter, typeof(TextPresenter))]
 public class IPv4Box: TemplatedControl
 {
-    public const string PART_FirstTextBox = "PART_FirstTextPresenter";
-    public const string PART_SecondTextBox = "PART_SecondTextPresenter";
-    public const string PART_ThirdTextBox = "PART_ThirdTextPresenter";
-    public const string PART_FourthTextBox = "PART_FourthTextPresenter";
-    public const string PART_PortTextBox = "PART_PortNumericInput";
-    private TextBox? _firstText;
-    private TextBox? _secondText;
-    private TextBox? _thirdText;
-    private TextBox? _fourthText;
-    private TextBox? _portText;
+    public const string PART_FirstTextPresenter = "PART_FirstTextPresenter";
+    public const string PART_SecondTextPresenter = "PART_SecondTextPresenter";
+    public const string PART_ThirdTextPresenter = "PART_ThirdTextPresenter";
+    public const string PART_FourthTextPresenter = "PART_FourthTextPresenter";
+    public const string PART_PortTextPresenter = "PART_PortTextPresenter";
+    private TextPresenter? _firstText;
+    private TextPresenter? _secondText;
+    private TextPresenter? _thirdText;
+    private TextPresenter? _fourthText;
+    private TextPresenter? _portText;
+    private byte _firstByte;
+    private byte _secondByte;
+    private byte _thridByte;
+    private byte _fourthByte;
+    private int _port;
+    private TextPresenter?[] _presenters = new TextPresenter?[5];
+    private TextPresenter? _currentActivePresenter;
 
     public static readonly StyledProperty<bool> ShowPortProperty = AvaloniaProperty.Register<IPv4Box, bool>(
         nameof(ShowPort));
@@ -37,10 +44,10 @@ public class IPv4Box: TemplatedControl
         set => SetValue(ShowPortProperty, value);
     }
     
-    public static readonly StyledProperty<IPAddress> IPAddressProperty = AvaloniaProperty.Register<IPv4Box, IPAddress>(
+    public static readonly StyledProperty<IPAddress?> IPAddressProperty = AvaloniaProperty.Register<IPv4Box, IPAddress?>(
         nameof(IPAddress));
 
-    public IPAddress IPAddress
+    public IPAddress? IPAddress
     {
         get => GetValue(IPAddressProperty);
         set => SetValue(IPAddressProperty, value);
@@ -54,70 +61,79 @@ public class IPv4Box: TemplatedControl
         get => GetValue(PortProperty);
         set => SetValue(PortProperty, value);
     }
-    
-    
 
     protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
     {
         base.OnApplyTemplate(e);
-        _firstText = e.NameScope.Find<TextBox>(PART_FirstTextBox);
-        _secondText = e.NameScope.Find<TextBox>(PART_SecondTextBox);
-        _thirdText = e.NameScope.Find<TextBox>(PART_ThirdTextBox);
-        _fourthText = e.NameScope.Find<TextBox>(PART_FourthTextBox);
-        _portText = e.NameScope.Find<TextBox>(PART_PortTextBox);
-
-        _firstText.LostFocus += OnTextLostFocus;
+        ClearTextPresenterEvents(_firstText);
+        ClearTextPresenterEvents(_secondText);
+        ClearTextPresenterEvents(_thirdText);
+        ClearTextPresenterEvents(_fourthText);
+        ClearTextPresenterEvents(_portText);
+        _firstText = e.NameScope.Find<TextPresenter>(PART_FirstTextPresenter);
+        _secondText = e.NameScope.Find<TextPresenter>(PART_SecondTextPresenter);
+        _thirdText = e.NameScope.Find<TextPresenter>(PART_ThirdTextPresenter);
+        _fourthText = e.NameScope.Find<TextPresenter>(PART_FourthTextPresenter);
+        _portText = e.NameScope.Find<TextPresenter>(PART_PortTextPresenter);
+        _presenters[0] = _portText;
+        _presenters[1] = _firstText;
+        _presenters[2] = _secondText;
+        _presenters[3] = _thirdText;
+        _presenters[4] = _fourthText;
+        RegisterTextPresenterEvents(_firstText);
+        RegisterTextPresenterEvents(_secondText);
+        RegisterTextPresenterEvents(_thirdText);
+        RegisterTextPresenterEvents(_fourthText);
+        RegisterTextPresenterEvents(_portText);
     }
 
-    private void OnTextKeyDown(object sender, KeyEventArgs args)
+    private void ClearTextPresenterEvents(TextPresenter? presenter)
     {
-        if (args.Key == Key.Right)
+        if (presenter is null) return;
+        presenter.LostFocus -= OnTextPresenterLostFocus;
+    }
+
+    private void RegisterTextPresenterEvents(TextPresenter? presenter)
+    {
+        if(presenter  is null) return;
+        presenter.LostFocus += OnTextPresenterLostFocus;
+    }
+
+    private void OnTextPresenterLostFocus(object? sender, RoutedEventArgs args)
+    {
+        if (sender is TextPresenter p)
         {
-            _secondText?.Focus();
+            p.HideCaret();
         }
     }
 
-    private void OnTextLostFocus(object? sender, RoutedEventArgs args)
+    protected override void OnPointerPressed(PointerPressedEventArgs e)
     {
-        if (sender?.Equals(_firstText)??false)
+        var source = e.Source;
+        Point position = e.GetPosition(_firstText);
+        foreach (var presenter in _presenters)
         {
-            Debug.WriteLine("FIRST");
-        }
-    }
-
-    protected override void OnKeyDown(KeyEventArgs e)
-    {
-        if (e.Key == Key.Left)
-        {
-            if ((_firstText?.IsFocused??false) && _firstText.SelectionStart == 0)
+            if (presenter?.Bounds.Contains(position) ?? false)
             {
-                _secondText?.Focus();
+                presenter?.ShowCaret();
+                _currentActivePresenter = presenter;
+            }
+            else
+            {
+                presenter?.HideCaret();
             }
         }
-        else if (e.Key == Key.Right)
-        {
-            if ((_firstText?.IsFocused ?? false) && _firstText?.SelectionEnd == 2) 
-            {
-                _firstText.Focus();
-            }
-        }
-        else if (e.Key == Key.Tab)
-        {
-            
-        }
-        else if (!(e.Key is >= Key.D0 and <= Key.D9 || e.Key is >= Key.NumPad0 and <= Key.NumPad9))
-        {
-            return;
-        }
-        base.OnKeyDown(e);
+        Debug.WriteLine(_currentActivePresenter?.Name);
+        base.OnPointerPressed(e);
     }
 
-    protected override void OnTextInput(TextInputEventArgs e)
+    protected override void OnLostFocus(RoutedEventArgs e)
     {
-        if (_firstText != null)
-        {
-            _firstText.Text = e.Text;
-        }
-        base.OnTextInput(e);
+        _firstText?.HideCaret();
+        _secondText?.HideCaret();
+        _thirdText?.HideCaret();
+        _fourthText?.HideCaret();
+        _portText?.HideCaret();
+        _currentActivePresenter = null;
     }
 }

src/Ursa/Ursa.csproj

@@ -12,4 +12,8 @@
       <PackageReference Include="XamlNameReferenceGenerator" Version="1.5.1" />
     </ItemGroup>
 
+    <ItemGroup>
+      <Folder Include="TypeConverters" />
+    </ItemGroup>
+
 </Project>