How to change the background color of DropDownButton in SfTimePicker control?

1 min read
The Background color of DropDownButton in SfTimePicker can be changed by overriding the DefaultStyle of the SfTimePicker. This can be achieved by changing the background color of the RepeatButton. The same has been demonstrated in the following code.
    <Page.Resources>
      <Style TargetType="syncfusion:SfTimePicker" x:Key="SfTimePickerStyle" 
                       BasedOn="{StaticResource DefaultSfTimePickerStyle}">
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="AccentBrush" Value="{StaticResource AccentBrush}"/>
            <Setter Property="Background" Value="{StaticResource 
                              TextBoxBackgroundThemeBrush}"/>
            <Setter Property="BorderBrush" Value="{StaticResource 
                              TextBoxBorderThemeBrush}"/>
            <Setter Property="BorderThickness" Value="{StaticResource 
                              TextControlBorderThemeThickness}"/>
            <Setter Property="FontSize" Value="{StaticResource 
                              ControlContentThemeFontSize}"></Setter>
            <Setter Property="FontFamily" Value="{StaticResource 
                              ContentControlThemeFontFamily}"></Setter>
            <Setter Property="Padding" Value="{StaticResource 
                              TextControlThemePadding}"></Setter>
            <Setter Property="DropDownHeight" Value="400"/>
            <Setter Property="FormatString" Value="hh:mm tt"/>
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="IsTabStop" Value="True"/>
            <Setter Property="VerticalAlignment" Value="Center" />
 
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="ErrorStates">
                                    <VisualState x:Name="HasError">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames 
                                              Storyboard.TargetProperty="BorderBrush" 
                                              Storyboard.TargetName="PART_TextBlock">
                                               <DiscreteObjectKeyFrame KeyTime="0" 
                                                  Value="{StaticResource 
                                               SyncfusionTextBoxExtErrorThemeBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                  <VisualState x:Name="NoError"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CommonStates">
                                  <VisualState x:Name="Normal"/>
                                   <VisualState x:Name="Disabled">
                                      <Storyboard>
                                        <ObjectAnimationUsingKeyFrames 
                                          Storyboard.TargetProperty="BorderBrush" 
                                          Storyboard.TargetName="PART_TextBlock">
                                         <DiscreteObjectKeyFrame KeyTime="0" 
                                                Value="{StaticResource 
                                              TextBoxDisabledBorderThemeBrush}"/>
                                          </ObjectAnimationUsingKeyFrames>
                                          <ObjectAnimationUsingKeyFrames 
                                           Storyboard.TargetProperty="Background" 
                                             Storyboard.TargetName="PART_TextBlock">
                                          <DiscreteObjectKeyFrame KeyTime="0" 
                                                          Value="{StaticResource 
                                             TextBoxDisabledBackgroundThemeBrush}"/>
                                          </ObjectAnimationUsingKeyFrames>
                                          <ObjectAnimationUsingKeyFrames 
                                            Storyboard.TargetProperty="Foreground" 
                                            Storyboard.TargetName="PART_TextBlock">
                                          <DiscreteObjectKeyFrame KeyTime="0" 
                                             Value="{StaticResource 
                                             TextBoxDisabledForegroundThemeBrush}"/>
                                           </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border>
                              <Grid >
                                   <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                              <syncfusion:SfTextBoxExt AllowPointerEvents="True"                                                                                                 x:Name="PART_TextBlock" IsReadOnly="True"
                                   FontSize="{TemplateBinding FontSize}"
                                   FontFamily="{TemplateBinding FontFamily}"
                                   FontStretch="{TemplateBinding FontStretch}"
                                   Foreground="{TemplateBinding Foreground}"
                                   FontStyle="{TemplateBinding FontStyle}"
                                   FontWeight="{TemplateBinding FontWeight}"
                                   HorizontalContentAlignment="{TemplateBinding
                                                 HorizontalContentAlignment}"
                                   VerticalContentAlignment="{TemplateBinding 
                                                 VerticalContentAlignment}"
                                   Padding="{TemplateBinding Padding}" 
                                                     Style="{StaticResource PickerTextBoxExtStyle}" 
                                                                       Text="{Binding Value,Mode=OneWay, 
                                   RelativeSource={RelativeSource 
                                                             Mode=TemplatedParent}}"
                                   Background="{TemplateBinding Background}"                                                                                                 BorderBrush="{TemplateBinding BorderBrush}"
                                                                                BorderThickness="{TemplateBinding BorderThickness}"
                                  Visibility="{Binding AllowInlineEditing,
                                  Converter={StaticResource 
                                                InverseBooleanVisibilityConverter},
                                  RelativeSource={RelativeSource
                                                           Mode=TemplatedParent}}"
                                                                      Grid.Column="0" IsTabStop="{Binding IsTabStop, 
                                 RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                                                      Watermark="{Binding Watermark, RelativeSource=
                                  {RelativeSource TemplatedParent}}" 
                                                                                WatermarkTemplate="{Binding WatermarkTemplate,
                                   RelativeSource={RelativeSource  TemplatedParent}}"/>
                             <syncfusion:SfTextBoxExt Grid.Column="0"
                                InputScope="{Binding InputScope, RelativeSource=
                             {RelativeSource Mode=TemplatedParent},
                              Converter={StaticResource NameToScope}}" Text="{Binding 
                              Value, Mode=OneWay, RelativeSource={RelativeSource 
                                                           Mode=TemplatedParent}}"
                                                                   x:Name="PART_TextBoxExt" IsReadOnly="true" 
                              FontSize="{TemplateBinding FontSize}"
                              FontFamily="{TemplateBinding FontFamily}"
                              FontStretch="{TemplateBinding FontStretch}"
                              Foreground="{TemplateBinding Foreground}"
                              FontStyle="{TemplateBinding FontStyle}"
                              FontWeight="{TemplateBinding FontWeight}"
                              HorizontalContentAlignment=
                                     "{TemplateBinding HorizontalContentAlignment}"
                              VerticalContentAlignment=
                                     "{TemplateBinding VerticalContentAlignment}"
                              Padding="{TemplateBinding Padding}"                                                                                                         AllowPointerEvents="True" IsTabStop="{Binding IsTabStop,
                             RelativeSource={RelativeSource Mode=TemplatedParent}}"                                                                  Background="{TemplateBinding Background}"  
                             BorderBrush="{TemplateBinding BorderBrush}" 
                             BorderThickness="{TemplateBinding BorderThickness}"
                                                                  Visibility="{Binding AllowInlineEditing,
                             Converter={StaticResource BooleanVisibilityConverter},
                             RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                                                  Watermark="{Binding Watermark, RelativeSource=
                                         {RelativeSource TemplatedParent}}" 
                                                                  WatermarkTemplate="{Binding WatermarkTemplate,
                              RelativeSource={RelativeSource  TemplatedParent}}"/>
                              <Rectangle Width="2" Visibility="{Binding 
                                ShowDropDownButton,Converter={StaticResource 
                                 BooleanVisibilityConverter},
                                 RelativeSource={RelativeSource Mode=TemplatedParent}}" 
                                 Grid.Column="1" />
                             <RepeatButton x:Name="PART_DropDownButton" 
                                                                   Style="{StaticResource DropDownButtonStyle}"  
                                                                   IsTabStop="{Binding AllowInlineEditing,
                               RelativeSource={RelativeSource TemplatedParent}}"
                                                                    Visibility="{Binding ShowDropDownButton,
                               Converter={StaticResource BooleanVisibilityConverter},
                                RelativeSource={RelativeSource Mode=TemplatedParent}                                                                    Background="#FF888888"
                                                                    HorizontalAlignment="Stretch"  
                                VerticalAlignment="Stretch" Grid.Column="2" />
                             </Grid>
                            </Border>
                            <Popup x:Name="PART_DropDown" FlowDirection="LeftToRight"
                                                              IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, 
                              RelativeSource={RelativeSource Mode=TemplatedParent}}">
                             <Grid x:Name="PART_TimePickerPage" Height="{Binding 
                               DropDownHeight, RelativeSource={RelativeSource 
                                                      Mode=TemplatedParent}}" >
                              <syncfusion:SfTimeSelector 
                                 BorderThickness="{TemplateBinding BorderThickness}"
                                 FlowDirection="{TemplateBinding FlowDirection}"
                                                                     BorderBrush="#000000" IsEnabled="{Binding IsEnabled,
                                 RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                 IsTabStop="{Binding IsTabStop,
                                 RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                                                     Height="{Binding DropDownHeight, 
                              RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                                                  x:Name="PART_TimeSelector" AccentBrush="{Binding 
                              AccentBrush, RelativeSource={RelativeSource 
                              Mode=TemplatedParent}}" 
                                                                  SelectedTime="{Binding Value,
                             RelativeSource={RelativeSource Mode=TemplatedParent}}"
                             Style="{Binding SelectorStyle,
                             RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                            </Grid>
                           </Popup>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <syncfusion:SfTimePicker Grid.Row="1" Width="180" ShowDropDownButton="True" 
                              Style="{StaticResource SfTimePickerStyle}"/>
    </Grid>
Output:
$C:\Users\durga.rajan\Pictures\Saved Pictures\Capture_timepicker.PNG$
Did you find this information helpful?
Yes
Comments (0)
How to change the background color of DropDownButton in SfTimePicker control?

Access denied
