Question

I have the following XAML:

<toolkit:NumericUpDown Background="White"/>

However, this doesn’t change the background-color of the control. I already tried to assign a background over the SpinnerTemplate, but this doesn’t work either. Is there any way I can make this control have a background without having to make a new template?

Answer 1

Without having to make a new template? I don’t think so.

Does this do what you need to accomplish?

<toolkit1:NumericUpDown Background="Red" HorizontalAlignment="Left" VerticalAlignment="Top">
    <toolkit1:NumericUpDown.Resources>
        <Style x:Key="NumericUpDownStyle1" TargetType="toolkit1:NumericUpDown">
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Height" Value="22"/>
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFA3AEB9" Offset="0"/>
                        <GradientStop Color="#FF8399A9" Offset="0.375"/>
                        <GradientStop Color="#FF718597" Offset="0.375"/>
                        <GradientStop Color="#FF617584" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="toolkit1:NumericUpDown">
                        <Grid Background="{TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DisabledVisualElement"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement">
                                                <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <toolkit1:ButtonSpinner x:Name="Spinner" HorizontalContentAlignment="Stretch" MinWidth="35" VerticalContentAlignment="Stretch">
                                <TextBox x:Name="Text" AcceptsReturn="False" BorderThickness="0" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" MinWidth="20" TextAlignment="Right" TextWrapping="NoWrap" Text="{TemplateBinding Value}">
                                    <TextBox.Style>
                                        <Style TargetType="TextBox">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="TextBox">
                                                        <ScrollViewer x:Name="ContentElement" BorderThickness="0" Padding="0"/>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </TextBox.Style>
                                </TextBox>
                            </toolkit1:ButtonSpinner>
                            <Border x:Name="DisabledVisualElement" Background="#A5FFFFFF" CornerRadius="2.5,2.5,2.5,2.5" IsHitTestVisible="false" Opacity="0"/>
                            <Border x:Name="FocusVisualElement" BorderBrush="#FF45D6FA" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1,1,1,1" IsHitTestVisible="False" Opacity="0"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </toolkit1:NumericUpDown.Resources>
    <toolkit1:NumericUpDown.Style>
        <StaticResource ResourceKey="NumericUpDownStyle1"/>
    </toolkit1:NumericUpDown.Style>
</toolkit1:NumericUpDown>

The key line is:

<Grid Background="{TemplateBinding Background}">

You can nestle this style away in a resource dictionary if you’re going to be doing this often.