NumericUpDown Button Style

2 posts, 0 answers
  1. Chahine
    Chahine avatar
    4 posts
    Member since:
    Apr 2013

    Posted 20 Jul 2013 Link to this post

    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
  2. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 22 Jul 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINDOWS PHONE 7.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. DevCraft banner
Back to Top