feat(NumericUpDown): Add InnerLeftContent and InnerRightContent (#14575)

* feat(NumericUpDown): Add InnerContent. It is positioned on the opposite side to ButtonSpinnerLocation

* fix: TextBox Nullability

* fix: Adress review

* fix: nits

* fix: missing update ControlCatalog

samples/ControlCatalog/Pages/NumericUpDownPage.xaml

@@ -114,5 +114,21 @@
       </StackPanel>
     </WrapPanel>
 
+    <StackPanel Margin="10">
+      <Label FontSize="14" FontWeight="Bold" Target="InnerContent"
+             Content="Inner Contents"/>
+      <NumericUpDown ButtonSpinnerLocation="Left"
+                     TextAlignment="Right"
+                     x:Name="InnerContent">
+        <NumericUpDown.InnerLeftContent>
+          <TextBlock Text="m"
+            TextAlignment="Center"
+            VerticalAlignment="Center"/>
+        </NumericUpDown.InnerLeftContent>
+        <NumericUpDown.InnerRightContent>
+          <Button Content="X"/>
+        </NumericUpDown.InnerRightContent>
+      </NumericUpDown>
+    </StackPanel>
   </StackPanel>
 </UserControl>

src/Avalonia.Controls/NumericUpDown/NumericUpDown.cs

@@ -132,6 +132,18 @@ namespace Avalonia.Controls
         public static readonly StyledProperty<Media.TextAlignment> TextAlignmentProperty =
             TextBox.TextAlignmentProperty.AddOwner<NumericUpDown>();
 
+        /// <summary>
+        /// Defines the <see cref="InnerLeftContent"/> property
+        /// </summary>
+        public static readonly StyledProperty<object?> InnerLeftContentProperty =
+            TextBox.InnerLeftContentProperty.AddOwner<NumericUpDown>();
+
+        /// <summary>
+        /// Defines the <see cref="InnerRightContent"/> property
+        /// </summary>
+        public static readonly StyledProperty<object?> InnerRightContentProperty =
+            TextBox.InnerRightContentProperty.AddOwner<NumericUpDown>();
+
         private IDisposable? _textBoxTextChangedSubscription;
 
         private bool _internalValueSet;
@@ -331,6 +343,25 @@ namespace Avalonia.Controls
             };
         }
 
+        /// <summary>
+        /// Gets or sets custom content that is positioned on the left side of the text layout box
+        /// </summary>
+        public object? InnerLeftContent
+        {
+            get => GetValue(InnerLeftContentProperty);
+            set => SetValue(InnerLeftContentProperty, value);
+        }
+
+
+        /// <summary>
+        /// Gets or sets custom content that is positioned on the right side of the text layout box
+        /// </summary>
+        public object? InnerRightContent
+        {
+            get => GetValue(InnerRightContentProperty);
+            set => SetValue(InnerRightContentProperty, value);
+        }
+
         /// <summary>
         /// Initializes static members of the <see cref="NumericUpDown"/> class.
         /// </summary>

src/Avalonia.Controls/TextBox.cs

@@ -194,14 +194,14 @@ namespace Avalonia.Controls
         /// <summary>
         /// Defines the <see cref="InnerLeftContent"/> property
         /// </summary>
-        public static readonly StyledProperty<object> InnerLeftContentProperty =
-            AvaloniaProperty.Register<TextBox, object>(nameof(InnerLeftContent));
+        public static readonly StyledProperty<object?> InnerLeftContentProperty =
+            AvaloniaProperty.Register<TextBox, object?>(nameof(InnerLeftContent));
 
         /// <summary>
         /// Defines the <see cref="InnerRightContent"/> property
         /// </summary>
-        public static readonly StyledProperty<object> InnerRightContentProperty =
-            AvaloniaProperty.Register<TextBox, object>(nameof(InnerRightContent));
+        public static readonly StyledProperty<object?> InnerRightContentProperty =
+            AvaloniaProperty.Register<TextBox, object?>(nameof(InnerRightContent));
 
         /// <summary>
         /// Defines the <see cref="RevealPassword"/> property
@@ -653,7 +653,7 @@ namespace Avalonia.Controls
         /// <summary>
         /// Gets or sets custom content that is positioned on the left side of the text layout box
         /// </summary>
-        public object InnerLeftContent
+        public object? InnerLeftContent
         {
             get => GetValue(InnerLeftContentProperty);
             set => SetValue(InnerLeftContentProperty, value);
@@ -662,7 +662,7 @@ namespace Avalonia.Controls
         /// <summary>
         /// Gets or sets custom content that is positioned on the right side of the text layout box
         /// </summary>
-        public object InnerRightContent
+        public object? InnerRightContent
         {
             get => GetValue(InnerRightContentProperty);
             set => SetValue(InnerRightContentProperty, value);

src/Avalonia.Themes.Fluent/Controls/NumericUpDown.xaml

@@ -15,6 +15,26 @@
                        HorizontalContentAlignment="Center"
                        ButtonSpinnerLocation="Left"
                        Watermark="Enter text" />
+        <NumericUpDown ButtonSpinnerLocation="Left">
+          <NumericUpDown.InnerLeftContent>
+            <TextBlock Text="m"
+              TextAlignment="Center"
+              VerticalAlignment="Center"/>
+          </NumericUpDown.InnerLeftContent>
+          <NumericUpDown.InnerRightContent>
+            <Button Content="X"/>
+          </NumericUpDown.InnerRightContent>
+        </NumericUpDown>
+        <NumericUpDown ButtonSpinnerLocation="Right">
+          <NumericUpDown.InnerLeftContent>
+            <Button Content="X"/>
+          </NumericUpDown.InnerLeftContent>
+          <NumericUpDown.InnerRightContent>
+            <TextBlock Text="m"
+              TextAlignment="Center"
+              VerticalAlignment="Center"/>
+          </NumericUpDown.InnerRightContent>
+        </NumericUpDown>
       </StackPanel>
     </Border>
   </Design.PreviewWith>
@@ -58,7 +78,10 @@
                    Text="{TemplateBinding Text}"
                    TextAlignment="{TemplateBinding TextAlignment}"
                    AcceptsReturn="False"
-                   TextWrapping="NoWrap" />
+                   TextWrapping="NoWrap"
+                   InnerLeftContent="{Binding InnerLeftContent, RelativeSource={RelativeSource TemplatedParent}}"
+                   InnerRightContent="{Binding InnerRightContent, RelativeSource={RelativeSource TemplatedParent}}"
+                   />
         </ButtonSpinner>
       </ControlTemplate>
     </Setter>

src/Avalonia.Themes.Simple/Controls/NumericUpDown.xaml

@@ -34,7 +34,10 @@
                    Text="{TemplateBinding Text}"
                    TextAlignment="{TemplateBinding TextAlignment}"
                    TextWrapping="NoWrap"
-                   Watermark="{TemplateBinding Watermark}" />
+                   Watermark="{TemplateBinding Watermark}"
+                   InnerLeftContent="{Binding InnerLeftContent, RelativeSource={RelativeSource TemplatedParent}}"
+                   InnerRightContent="{Binding InnerRightContent, RelativeSource={RelativeSource TemplatedParent}}"
+                   />
         </ButtonSpinner>
       </ControlTemplate>
     </Setter>