Styling of NumericUpDown

[Aurea Del Moral]

I'm currently working on a UWP project and need to style SFNumericUpDown more than what is shown in the documentation

 (https://help.syncfusion.com/uwp/sfnumericupdown/appearance-and-styling).

I would like to:

• Change the content of the buttons, use up and down arrows instead of + and -.
• Change the color up the buttons, when in normal state and when pressed. (AccentBrush is not working for me at all)
• Change the color of the control when it's not being touched, maybe the watermark?

Please provide instructions as to how to apply the styling in Xaml for UWP. I was not able to using resources and could, not find the necessary properties when inspecting the SfNumericUpDown.

Thanks, 

Aurea Del Moral

[Muneesh Kumar G]

Hi Aurea,  

 

Thanks for your update, please find the response below.  

 

Query: Is there a way to do this with icons and a font instead of images? When I try this with the Segoe MDL2 Assets that I am using in the UWP buttons for my icons, It does not work. The code compiles but I get squares and no icons. Any ideas on how to fix this? 

 

You can achieve this by overriding default style of SfNumericUpDown and setting FontIcon in UpButtonStyle and DownButtonStyle as follows.  

 

Code snippet [XAML]: 

 

.. 

.. 

<Style x:Key="UpButtonStyle" TargetType="RepeatButton"> 

                <Setter Property="MinHeight" Value="64"/> 

                <Setter Property="MinWidth" Value="32"/> 

                <Setter Property="Template"> 

.. 

                                

                <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE74A;"/> 

.. 

</Style> 

 

<Style x:Key="DownButtonStyle" TargetType="RepeatButton"> 

                <Setter Property="MinHeight" Value="64"/> 

                <Setter Property="MinWidth" Value="32"/> 

                <Setter Property="Template"> 

.. 

                <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE74B;"/> 

.. 

</Style> 

 

 

<Grid> 

        <editors:SfNumericUpDown x:Name="numericUpDown" 

                                 HorizontalAlignment="Center" 

                                 VerticalAlignment="Center" 

                                 Width="200"  

                                 Style="{StaticResource sfNumericUpDownStyle}" 

                                 AllowNull="True" 

                                Watermark="Type Here"> 

 

        </editors:SfNumericUpDown> 

    </Grid> 

 

 

 

Query: Also, for Background I get: "The property Background was not found in type UpDownButtonSettings". 

 

We have resolved this problem by overriding default style of SfNumericUpDown and setting Background directly to RepeatButton as follows.  

 

Code snippet [XAML]: 

  <Style x:Key="NumericRepeatButtonStyle" TargetType="controls:SfUpDown"> 

                <Setter Property="Template"> 

                    <Setter.Value> 

                        .. 

                                     

                    <RepeatButton x:Name="PART_DownButton" Tag="{Binding Path=Tag,RelativeSource={RelativeSource Mode=TemplatedParent}}" Background="#FFC0CB" /> 

 

                    <RepeatButton x:Name="PART_UpButton" Tag="{Binding Path=Tag,RelativeSource={RelativeSource Mode=TemplatedParent}}" Background="#FF4500"  

                                                 ></RepeatButton> 

                       .. 

                </Setter> 

            </Style> 

 

 

 

Query: What are the elements inside of the SfNumericUpDown? Is it an SfNumericTextBox? Is there a way to style this using a resource dictionary? I would like to style each button and the box independently. I also need to give a border to each component (the two buttons and the textbox), and be able to style independently.  

 

Please refer the Style defined in MainPage.xaml to know the elements in SfNumericUpDown. Yes, it is same as SfNumericTextBox, with additional features. You can define the SfNumericUpDown style in ResourceDictionary as follows.  

 

Code snippet [XAML]: 

 

<Page.Resources> 

        <ResourceDictionary 

                xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"  

                xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" 

                xmlns:local="using:MSDNSample"> 

                  

                .. 

 

<Style TargetType="editors:SfNumericUpDown" x:Key="sfNumericUpDownStyle"> 

                <Setter Property="UpDownStyle" Value="{StaticResource NumericRepeatButtonStyle}"/> 

                .. 

            </Style> 

 

        </ResourceDictionary> 

</Page.Resources> 

 

<Grid> 

        <editors:SfNumericUpDown x:Name="numericUpDown" 

                                 HorizontalAlignment="Center" 

                                 VerticalAlignment="Center" 

                                 Width="200"  

                                 Style="{StaticResource sfNumericUpDownStyle}" 

                                 AllowNull="True" 

                                Watermark="Type Here"> 

 

        </editors:SfNumericUpDown> 

    </Grid> 

 

We have modified our sample based on this, please find the sample from the following location.  

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/212717/ze/2127171619816678 

 

Please let us know if you have any other queries.  

 

Thanks,
Muneesh Kumar G.