How to change the background color of DropDownButton in SfTimePicker control?
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:
