Category / Section
How to change the background color of DropDownButton in SfDatePicker control?
1 min read
The Background color of DropDownButton in SfDatePicker can be changed by overriding the DefaultStyle of the SfDatePicker. 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:SfDatePicker" x:Key="SfDatePickerStyle"
BasedOn="{StaticResource DefaultSfDatePickerStyle}">
<Setter Property="AccentBrush" Value="{StaticResource AccentBrush}"/>
<Setter Property="Foreground" Value="Black"/>
<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="d" />
<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 TargetType="syncfusion:SfDatePicker">
<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 Background="Transparent">
<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="{TemplateBinding Watermark}"
WatermarkTemplate="{TemplateBinding
WatermarkTemplate}"/>
<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_DatePickerPage" Height="{Binding
DropDownHeight,
RelativeSource={RelativeSource Mode=TemplatedParent}}">
<syncfusion:SfDateSelector BorderThickness="{TemplateBinding
BorderThickness}"
Style="{Binding SelectorStyle, RelativeSource=
{RelativeSource Mode=TemplatedParent}}"
BorderBrush="#000000" IsEnabled="{Binding IsEnabled,
RelativeSource={RelativeSource Mode=TemplatedParent}}"
IsTabStop="{Binding IsTabStop,
RelativeSource={RelativeSource Mode=TemplatedParent}}"
Height="{Binding DropDownHeight,
RelativeSource={RelativeSource Mode=TemplatedParent}}"
FlowDirection="{TemplateBinding FlowDirection}"
x:Name="PART_DateSelector" AccentBrush="{Binding
AccentBrush, RelativeSource={RelativeSource
Mode=TemplatedParent}}"
SelectedDateTime="{Binding Value, RelativeSource=
{RelativeSource Mode=TemplatedParent}}"/>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<syncfusion:SfDatePicker Grid.Row="0" Width="180" ShowDropDownButton="True"
Style="{StaticResource SfDatePickerStyle}"/>
</Grid>
Output:
