From abc4bc7c4c94df4342e8d1c32bbdaade8e601256 Mon Sep 17 00:00:00 2001
From: SekarSivalingam <sekar.sivalingam@syncfusion.com>
Date: Mon, 5 May 2025 11:45:02 +0530
Subject: [PATCH] Updated the SfDomainUpDown documentation

---
 wpf/Domain-UpDown/Appearance-and-Styling.md   | 110 ++++++++++++++++++
 .../UpDown_Button.png                         | Bin 0 -> 1658 bytes
 wpf/Domain-UpDown/Getting-Started.md          |  10 --
 3 files changed, 110 insertions(+), 10 deletions(-)
 create mode 100644 wpf/Domain-UpDown/Appearance-and-Styling_images/UpDown_Button.png

diff --git a/wpf/Domain-UpDown/Appearance-and-Styling.md b/wpf/Domain-UpDown/Appearance-and-Styling.md
index 7f7b57e27..3cfe5872e 100644
--- a/wpf/Domain-UpDown/Appearance-and-Styling.md
+++ b/wpf/Domain-UpDown/Appearance-and-Styling.md
@@ -45,3 +45,113 @@ The AccentBrush property is used to decorate the hot spots of a control with a s
 
 {%endhighlight%}
 {% endtabs %}
+
+## Customize Up,Down button Style
+
+We can customize the appearance of the up/down buttons in the [SfDomainUpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfDomainUpDown.html) control by using the [UpDownStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfDomainUpDown.html#Syncfusion_Windows_Controls_Input_SfDomainUpDown_UpDownStyle) property. 
+
+This property allows you to apply a custom style and template to the internal SfUpDown control, which hosts the up/down buttons.
+
+{% tabs %}
+{%highlight xaml%}
+
+<Window xmlns:editors="clr-namespace:Syncfusion.Windows.Controls;assembly=Syncfusion.SfInput.WPF">
+<Window.Resources>
+
+    <!-- Style for Up/Down Buttons-->
+    <Style x:Key="CustomUpDownButtonStyle" TargetType="editors:SfUpDown">
+        <Setter Property="BorderBrush" Value="Black"/>
+        <Setter Property="FontWeight" Value="Bold"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="editors:SfUpDown">
+                    <Border 
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="1"
+                            CornerRadius="2">
+                        <Grid x:Name="PART_OuterGrid">
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition Width="Auto" />
+                            </Grid.ColumnDefinitions>
+                            <ContentControl x:Name="PART_Content" IsTabStop="False" Focusable="False" Content="{TemplateBinding UpDownContent}" 
+                                        />
+                            <Button
+                            x:Name="PART_DownButton"
+                            Grid.Column="1"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            Background="{TemplateBinding AccentBrush}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            Foreground="{TemplateBinding Foreground}"
+                            BorderThickness="1"
+                            Padding="5"
+                            FontSize="20"
+                            Command="{TemplateBinding DownCommand}"
+                            IsTabStop="False"
+                            Content="-"
+                            />
+                            <Button
+                            x:Name="PART_UpButton"
+                            Grid.Column="2"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            Background="{TemplateBinding AccentBrush}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            Foreground="{TemplateBinding Foreground}"
+                            BorderThickness="1"
+                            Padding="5"
+                            FontSize="20"
+                            Command="{TemplateBinding UpCommand}"
+                            Content="+"
+                            IsTabStop="False"
+                            />
+                        </Grid>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <!-- Customized SfDomainUpDown Style -->
+    <Style  TargetType="syncfusion:SfDomainUpDown">
+        <Setter Property="AccentBrush" Value="LightBlue" />
+        <Setter Property="Foreground" Value="Black" />
+        <Setter Property="Background" Value="Lavender" />
+        <Setter Property="BorderBrush" Value="Black" />
+        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="FontSize" Value="15" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="HorizontalAlignment" Value="Center" />
+        <Setter Property="Padding" Value="3" />
+        <Setter Property="UpDownStyle" Value="{StaticResource CustomUpDownButtonStyle}"/>
+    </Style>
+</Window.Resources>
+<Grid>
+<syncfusion:SfDomainUpDown x:Name="DomainUpDown" Height="44" Width="231" ItemsSource="{Binding Employees}">
+    <syncfusion:SfDomainUpDown.ContentTemplate>
+        <DataTemplate>
+            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
+                <TextBlock Text="{Binding Name}" VerticalAlignment="Center" Margin="5"/>
+            </StackPanel>
+        </DataTemplate>
+    </syncfusion:SfDomainUpDown.ContentTemplate>
+</syncfusion:SfDomainUpDown>
+</Grid>
+</Window>
+
+{%endhighlight%}
+{% endtabs %}
+
+![UpDown_Button Customization](Appearance-and-Styling_images/UpDown_Button.png)
+
+## Theme
+
+SfDomainUpDown supports various built-in themes. Refer to the below links to apply themes for the SfDomainUpDown,
+
+  * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager)
+
+  * [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme)
+
+![Setting theme to WPF SfDomainUpDown](Getting-Started_images/SfDomainUpDown_theme_support.png)
diff --git a/wpf/Domain-UpDown/Appearance-and-Styling_images/UpDown_Button.png b/wpf/Domain-UpDown/Appearance-and-Styling_images/UpDown_Button.png
new file mode 100644
index 0000000000000000000000000000000000000000..e81aa5aa4183e48e9d4cf707453c5c61422cbbd7
GIT binary patch
literal 1658
zcmb_dX*8P&6#Y<B)j=Jn)|84;J<`#NwxmI8Em~U<v_Vd5>7fat9ilyI38EZJEh#ON
z8H!VabdpR&F|8#cVri|Bm{y|p6jMPglb)HM^Q)&n?tAb4x$nID<356yhl`4`t}*}s
zDy~-?eE>iXCYwW*evsAN<86tuCWrNLu?NUp(7cQsh`4<1G5|E^9o|7H%J`v}D}h)5
zP<{Iqay^*Z+W_!`nycew--O_0esW~dJy6GL-dTh@-eLKtPu-A+V;Se8Oh=n;cYz#D
zf|`lVrb;(WcL5b6Lp|M$)cdJkRu=0KSyXMK>X-g!&eB0S!+k-|TL|m`ngOgSX{Bvo
z1x*+6$NBwvVlDVmV%zlc%HC?fL<+y&b5rdI;I(vq{V4Dr91pxV`VP?B*w^{6zSX(-
zC3{+Y!3f9)SzBBC`1+ne(|I{3!UIS=I;K5(>JL{6h0-}6U*-+W5A%4&Ha7fOH-jkD
z$mpoa;#gzpxu{X%(55k{<*}AIyESoL#L=nLk$d!>#bV{p&d#PI?jOn|zj)#7-+;5x
zZpp}aS6E&i5e`(P@s^9YT-7@AI=k}}BRpPs({`WkTLjmKdyXbeW$o&icve7e(4q_0
z*5aTVmFWh~0cNnww<t1@qp49NWKlWw>UQ;GRO3Y(bo_WFYG-qGcx+4y?s>oyDOc+<
z2Yd&hEtaX~Y|hfvURBUxTe!)7SuEi2pZA4i$(&o@0=J}Eu}{Q&6@CV<^xWP7jp3=e
zi#US`8>tdu=c9)h;lPB;=BEMoyCS|fc4!@Sy5iu+ZQJ91O2_0qvTIDQ&$hNAU>w$^
zW$H^&ze8!i9}$BsC{oS(py5}OhUkdAJa;4@rPy^u2kT97FB?D>V@HP)F1d*<XXLtg
z0~y_EJ+XmFn8+#mmcrJo&tFv{XdUI&rd^{#l`e@nqDXtCpBI=SYBxG(U}OHo9swqI
zt!-p8EV!`KyS_9VEFuyfNrOPjQCv?#<Ckpf3kw^4YW_PAb(w&IOaKWpZXcJ9%uCz_
z`RA1HVvNMhu4wOwk}FRGMT7^&X5q2PXiG*@vg=&RCC+NogPrS3cL}IP@{<My!3>_A
zMq*U_Mxk2a$V($>afX)Vmg%aoO<;t!K%jbu<~vGfpL91VTRgI8E66F`AiVBS@W~zI
zyMYlHnyaKYO%=N*#SFv7hhJ8EY!F$+j#D)kDWifG=Q4101#M6Qsw>=63>NxpwuBY4
z*dYVGTIxNYD#A#Ni`ikKp*e=l#S#Ma>rxLxgaFb!=DVw=EFaX?P(pNi8byXv2OrSI
z4-*%tS;Yt`YNBbExHB{fIjdLBN=l-YT=UUqT+5wggZa+}j%6!f-P{ZePCS7-N>(8;
z35xV|bqQx%oT(Dq82vd!s#M=0;2XLx`62mnPs7>;&myX6W}goVN!64=&R7F+((dQT
z{As5x=mHc^XKrEYOHN8F<A6G+IbX_3F+O?Mh=u!gdnP4j5X{hgTw}Z;C=0{w*;sJP
z?6jLzRGMf_X&B_Kz-j634fs8$?Hq=FD0jvOi9F4tB?>zUGsA;1L2=l1&X14cW0=o}
zCngL-D*o=JatikGUCjulaDHOz&-D*&nO_hcsh+_NN%0}#!k!mp1gnWk)a37XC}=*c
zuD13JbQR@v@c2C1T%g-xFkX}(be1P6{G$I22!2DtT7lw3Y`a<Ij>y=p){yStW&PE+
zIOGkAV8%IfR|ki~rG{t}f3|C#mq^3*c3c!f_AO*F1k26M_3`owC4YPpGY8Q-A6>*}
zO0xSzg@-gui2sJr(SYUna<hjp7_6$U?$oCFVeu5>T~0S9fb=Tib#Pr{V`*EPEmR)p
zEhs23#N+Xl$RRMakci4u1<;!Cdy3z5(f_&djFlX4HGS=Z8}*IsUjVL79*$)D(A0kb
DgW)TZ

literal 0
HcmV?d00001

diff --git a/wpf/Domain-UpDown/Getting-Started.md b/wpf/Domain-UpDown/Getting-Started.md
index 583925f56..45821211d 100644
--- a/wpf/Domain-UpDown/Getting-Started.md
+++ b/wpf/Domain-UpDown/Getting-Started.md
@@ -237,13 +237,3 @@ domainUpDown1.SpinButtonsAlignment = Syncfusion.Windows.Controls.SpinButtonsAlig
 3.Both
 
 ![SpinButton aligned both](Getting-Started_images/Spin-Button-Alignment_img5.png)
-
-## Theme
-
-SfDomainUpDown supports various built-in themes. Refer to the below links to apply themes for the SfDomainUpDown,
-
-  * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager)
-	
-  * [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme)
-
-![Setting theme to WPF SfDomainUpDown](Getting-Started_images/SfDomainUpDown_theme_support.png)
\ No newline at end of file