wpf toolkit datetimepicker how to change color of

Question

How can I change the color of the spinner-arrows for the DateTimePicker from xceed WPF Toolkit? I cant find a Property where the set the color for the arrows.
Do i need to override the whole ButtonSpinner to do so?
If yes how can I do that, I still a beginner at WPF and if I simply try to copy the sourcecode from the ButtonSpinner reference page Visual Studio complains that the term "ResourceKeys does not exist in the namespace" of themes

Answer 1

I have written spinner button style as follows.could you try this once. just replace in replacebutton content template fill property with your background color

<!-- Brushes For Arrow -->
<Geometry x:Key="UpArrowGeometry">M 0,3 C0,3 0,4 0,4 0,4 3,4 3,4 3,4 3,3 3,3 3,3 4,3 4,3 4,3 4,4 4,4 4,4 7,4 7,4 7,4 7,3 7,3 7,3 6,3 6,3 6,3 6,2 6,2 6,2 5,2 5,2 5,2 5,1 5,1 5,1 4,1 4,1 4,1 4,0 4,0 4,0 3,0 3,0 3,0 3,1 3,1 3,1 2,1 2,1 2,1 2,2 2,2 2,2 1,2 1,2 1,2 1,3 1,3 1,3 0,3 0,3 z</Geometry>
   <Geometry x:Key="DownArrowGeometry">M 0,1 C0,1 0,0 0,0 0,0 3,0 3,0 3,0 3,1 3,1 3,1 4,1 4,1 4,1 4,0 4,0 4,0 7,0 7,0 7,0 7,1 7,1 7,1 6,1 6,1 6,1 6,2 6,2 6,2 5,2 5,2 5,2 5,3 5,3 5,3 4,3 4,3 4,3 4,4 4,4 4,4 3,4 3,4 3,4 3,3 3,3 3,3 2,3 2,3 2,3 2,2 2,2 2,2 1,2 1,2 1,2 1,1 1,1 1,1 0,1 0,1 z</Geometry>

<!-- Spinner Button Style -->
  <LinearGradientBrush x:Key="ControlNormalBorderKey"
                        EndPoint="0,20"                        
                        StartPoint="0,0"
                        >
      <GradientStop Color="#ABADB3"
                    Offset="0.05" />
      <GradientStop Color="#E2E3EA"
                    Offset="0.07" />
      <GradientStop Color="#E3E9EF"
                    Offset="1" />
   </LinearGradientBrush>

  <SolidColorBrush x:Key=DisabledBrush Color="#F4F4F4"/>

 <Style TargetType="{x:Type local:ButtonSpinner}">
      <Setter Property="Background" Value="#FFFFFFFF" />
      <Setter Property="BorderBrush" Value="{StaticResource ControlNormalBorderKey}" />
      <Setter Property="BorderThickness" Value="1" />
      <Setter Property="Focusable" Value="False" />
      <Setter Property="HorizontalContentAlignment" Value="Stretch" />
      <Setter Property="IsTabStop" Value="True" />
      <Setter Property="Padding" Value="1" />
      <Setter Property="VerticalContentAlignment" Value="Center" />
      <Setter Property="Template">
         <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:ButtonSpinner}">
               <Border x:Name="Border" SnapsToDevicePixels="True" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
                  <Grid>
                     <Grid.ColumnDefinitions>
                        <ColumnDefinition x:Name="firstContentColumn" Width="*" />
                        <ColumnDefinition x:Name="secondContentColumn" Width="Auto" />
                     </Grid.ColumnDefinitions>
                     <ContentPresenter x:Name="contentPresenter" Focusable="False" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

                     <Grid x:Name="gridContent" Grid.Column="1" Visibility="{TemplateBinding ShowButtonSpinner, Converter={StaticResource BooleanToVisibilityConverter}}" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
                        <Grid.RowDefinitions>
                           <RowDefinition Height="*" />
                           <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <RepeatButton x:Name="PART_IncreaseButton"
                                   Style="{DynamicResource {x:Static themes:ResourceKeys.SpinnerButtonStyleKey}}"
                                   IsTabStop="{TemplateBinding IsTabStop}">
                       <RepeatButton.ContentTemplate> 
                 <DataTemplate>
      <Path Width="7"
            Height="4"
            Data="{StaticResource UpArrowGeometry}"
            Fill="{StaticResource YourBackgroundColor}"
            SnapsToDevicePixels="True"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Focusable="False" />
            </DataTemplate>
                       </RepeatButton.ContentTemplate>

                        <RepeatButton x:Name="PART_DecreaseButton"
                                   Grid.Row="1"
                                   Style="{DynamicResource {x:Static themes:ResourceKeys.SpinnerButtonStyleKey}}"
                                   IsTabStop="{TemplateBinding IsTabStop}"> 
                        <RepeatButton.ContentTemplate>
                        </RepeatButton>
                <DataTemplate>
      <Path Width="7"
            Height="4"
            Data="{StaticResource DownArrowGeometry}"
            Fill="{StaticResource YourBackgroundColor}"
            SnapsToDevicePixels="True"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Focusable="False" />
   </DataTemplate>

                          </RepeatButton.ContentTemplate>
                     </Grid>
                  </Grid>
               </Border>
               <ControlTemplate.Triggers>
                  <Trigger Property="IsEnabled" Value="False">
                     <Setter Property="Background" Value="{StaticResource DisabledBrush}" />
                  </Trigger>
                  <Trigger SourceName="PART_IncreaseButton" Property="IsEnabled" Value="False">
                     <Setter TargetName="PART_IncreaseButton" Property="ContentTemplate" Value="{StaticResource IncreaseGlyphDisabledKey}" />
                  </Trigger>
                  <Trigger SourceName="PART_DecreaseButton" Property="IsEnabled" Value="False">
                     <Setter TargetName="PART_DecreaseButton" Property="ContentTemplate" Value="{StaticResource DecreaseGlyphDisabledKey}" />
                  </Trigger>
                  <Trigger Property="ButtonSpinnerLocation"
                           Value="Left">
                     <Setter TargetName="firstContentColumn"
                             Property="Width"
                             Value="Auto" />
                     <Setter TargetName="secondContentColumn"
                             Property="Width"
                             Value="*" />
                     <Setter TargetName="contentPresenter"
                             Property="Grid.Column"
                             Value="1" />
                     <Setter TargetName="gridContent"
                             Property="Grid.Column"
                             Value="0" />
                  </Trigger>
               </ControlTemplate.Triggers>
            </ControlTemplate>
         </Setter.Value>
      </Setter>
   </Style>