NumericUpDown Button Style

[Chahine]

Hi,

How can I change the color of the IncreaseButton and DecreaseButton ?
I've changed the Foreground and BorderBrush properties and set them to Black but I didn't find a way to do the same thing for the buttons.

<telerikInput:RadNumericUpDown
    Value="28" MinValue="8" MaxValue="100"
    Header="Fontsize : "
    HorizontalContentAlignment="Left" Width="425"
    x:Name="fontsize" Foreground="#1F1F1F" BorderBrush="#1F1F1F"
    Background="Transparent" Margin="0, 10, 0, 0"/>

Regards,
Chahine

[Deyan]

Hi Chahine,

The RadNumericUpDown control exposes the IncreaseButtonStyle and DecreaseButtonStyle properties which allow you to set styles to both buttons. Here are the default styles for the buttons:

<Style x:Key="IncreaseButtonStyle" TargetType="Button" BasedOn="{StaticResource NumericUpDownRepeatButtonStyle}">
       <Setter Property="BorderThickness" Value="3, 0, 0, 0"/>
       <Setter Property="BorderBrush" Value="{StaticResource PhoneSubtleBrush}"/>
       <Setter Property="Padding" Value="25, 25, 25, 25"/>
       <Setter Property="VerticalAlignment" Value="Stretch"/>
       <Setter Property="Template">
           <Setter.Value>
               <ControlTemplate TargetType="ButtonBase">
                   <Grid Background="Transparent">
                       <VisualStateManager.VisualStateGroups>
                           <VisualStateGroup x:Name="CommonStates">
                               <VisualState x:Name="Normal"/>
                               <VisualState x:Name="MouseOver"/>
                               <VisualState x:Name="Pressed">
                                   <Storyboard>
                                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Background">
                                           <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}" />
                                       </ObjectAnimationUsingKeyFrames>
                                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground">
                                           <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}" />
                                       </ObjectAnimationUsingKeyFrames>
                                   </Storyboard>
                               </VisualState>
                               <VisualState x:Name="Disabled">
                                   <Storyboard>
                                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground">
                                           <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}" />
                                       </ObjectAnimationUsingKeyFrames>
                                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush">
                                           <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}" />
                                       </ObjectAnimationUsingKeyFrames>
                                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Background">
                                           <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                       </ObjectAnimationUsingKeyFrames>
                                   </Storyboard>
                               </VisualState>
                           </VisualStateGroup>
                       </VisualStateManager.VisualStateGroups>
                       <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Background="{TemplateBinding Background}" Margin="{TemplateBinding Margin}" >
                           <ContentControl x:Name="ContentContainer" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}">
                               <Grid>
                                   <Rectangle Width="17" Height="5"  Fill="{Binding ElementName=ContentContainer, Path=Foreground}"/>
                                   <Rectangle Width="5" Height="17" Fill="{Binding ElementName=ContentContainer, Path=Foreground}" />
                               </Grid>
                           </ContentControl>
                       </Border>
                   </Grid>
               </ControlTemplate>
           </Setter.Value>
       </Setter>
   </Style>

   <Style x:Key="DecreaseButtonStyle" TargetType="Button" BasedOn="{StaticResource NumericUpDownRepeatButtonStyle}">
       <Setter Property="BorderThickness" Value="3, 0, 0, 0"/>
       <Setter Property="Padding" Value="25, 25, 25, 25"/>
       <Setter Property="BorderBrush" Value="{StaticResource PhoneSubtleBrush}"/>
       <Setter Property="VerticalAlignment" Value="Stretch"/>
       <Setter Property="Template">
           <Setter.Value>
               <ControlTemplate TargetType="ButtonBase">
                   <Grid Background="Transparent">
                       <VisualStateManager.VisualStateGroups>
                           <VisualStateGroup x:Name="CommonStates">
                               <VisualState x:Name="Normal"/>
                               <VisualState x:Name="MouseOver"/>
                               <VisualState x:Name="Pressed">
                                   <Storyboard>
                                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Background">
                                           <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}" />
                                       </ObjectAnimationUsingKeyFrames>
                                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground">
                                           <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}" />
                                       </ObjectAnimationUsingKeyFrames>
                                   </Storyboard>
                               </VisualState>
                               <VisualState x:Name="Disabled">
                                   <Storyboard>
                                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground">
                                           <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}" />
                                       </ObjectAnimationUsingKeyFrames>
                                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush">
                                           <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}" />
                                       </ObjectAnimationUsingKeyFrames>
                                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Background">
                                           <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                       </ObjectAnimationUsingKeyFrames>
                                   </Storyboard>
                               </VisualState>
                           </VisualStateGroup>
                       </VisualStateManager.VisualStateGroups>
                       <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Background="{TemplateBinding Background}" Margin="{TemplateBinding Margin}" >
                           <ContentControl x:Name="ContentContainer" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}">
                               <Grid>
                                   <Rectangle Width="17" Height="5"  Fill="{Binding ElementName=ContentContainer, Path=Foreground}"/>
                               </Grid>
                           </ContentControl>
                       </Border>
                   </Grid>
               </ControlTemplate>
           </Setter.Value>
       </Setter>
   </Style>

You can reused them in your application and modify them according to your requirements.

Let me know if you have additional questions.

Regards,
Deyan
Telerik