Category / Section
How to customize the dropdown arrow of DropDownButton in UWP DatePicker?
1 min read
An Icon of the DropDownButton can be customized by changing the Path of the ContentPresenter of the RepeatButon in SfDatePicker control. 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_DatePicker}"
IsTabStop="{Binding AllowInlineEditing,
RelativeSource={RelativeSource TemplatedParent}}"
Visibility="{Binding ShowDropDownButton,
Converter={StaticResource BooleanVisibilityConverter},
RelativeSource={RelativeSource Mode=TemplatedParent}}"
Background="{Binding AccentBrush,
RelativeSource={RelativeSource TemplatedParent}}"
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>
<Style x:Key="DropDownButtonStyle_DatePicker" TargetType="RepeatButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Grid x:Name="grid">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<DoubleAnimation Duration="0" To="0.9"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="Border"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource
ButtonPressedForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Fill"
Storyboard.TargetName="path">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{Binding Background,
RelativeSource={RelativeSource
TemplatedParent}}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Background"
Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0"
Value="White"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Fill"
Storyboard.TargetName="path">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource
DropDownArrowDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="0.5"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="path"/>
<DoubleAnimation Duration="0" To="0.7"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="Border"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="FocusVisualWhite"/>
<DoubleAnimation Duration="0" To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="FocusVisualBlack"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="PointerFocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" Background="{TemplateBinding
Background}">
<ContentPresenter x:Name="ContentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalAlignment="{TemplateBinding
HorizontalContentAlignment}" MinWidth="32"
VerticalAlignment="{TemplateBinding
VerticalContentAlignment}">
<!--icon of the dropdown button-->
<Path x:Name="path" Data="M25.46701,18.438999L25.46701,21.328008 22.57901,21.328008 22.57901,22.771002 25.46701,22.771002 25.46701,25.662008 26.910004,25.662008 26.910004,22.771002 29.799988,22.771002 29.799988,21.328008 26.910004,21.328008 26.910004,18.438999z M26.052002,15.877003C29.338013,15.877003 32,18.541004 32,21.825003 32,25.112005 29.338013,27.775001 26.052002,27.775001 22.766998,27.775001 20.102997,25.112005 20.102997,21.825003 20.102997,18.541004 22.766998,15.877003 26.052002,15.877003z M10.833984,10.996997C11.276001,10.996997 11.683014,11.091006 12.056,11.282 12.428986,11.472003 12.714996,11.731006 12.911011,12.059008 13.109985,12.388003 13.208008,12.736011 13.208008,13.104008 13.208008,13.455005 13.114014,13.774006 12.925995,14.063007 12.738007,14.35001 12.458984,14.578007 12.089996,14.748005 12.569,14.856998 12.941986,15.088001 13.208008,15.435001 13.473999,15.785007 13.605988,16.222004 13.605988,16.746006 13.605988,17.453998 13.347992,18.052997 12.830994,18.547001 12.315002,19.039999 11.661987,19.286001 10.872009,19.286001 10.161011,19.286001 9.5700073,19.073004 9.098999,18.649006 8.6289978,18.223011 8.3599854,17.674 8.2929993,16.998005L9.2890015,16.866001C9.4039917,17.429005 9.5979919,17.837009 9.8720093,18.087009 10.147003,18.337009 10.483002,18.46001 10.876007,18.46001 11.345001,18.46001 11.740997,18.298008 12.065002,17.972004 12.386993,17.647007 12.546997,17.246998 12.546997,16.765003 12.546997,16.310001 12.398987,15.931003 12.100006,15.636005 11.799988,15.338001 11.42099,15.190006 10.960999,15.190006 10.772003,15.190006 10.539001,15.227009 10.256989,15.300999L10.368011,14.425999C10.43399,14.436008 10.487,14.438007 10.527985,14.438007 10.951996,14.438007 11.334991,14.326008 11.674011,14.104999 12.014008,13.884998 12.183014,13.545002 12.183014,13.080997 12.183014,12.716006 12.059998,12.416003 11.812988,12.175998 11.565002,11.935 11.246002,11.815997 10.855988,11.815997 10.468994,11.815997 10.144012,11.938998 9.8869934,12.18201 9.6289978,12.423999 9.4620056,12.791004 9.3890076,13.276996L8.394989,13.099003C8.5149841,12.429995 8.7929993,11.914004 9.2229919,11.548007 9.6560059,11.179995 10.191986,10.996997 10.833984,10.996997z M17.699005,10.996005L18.341003,10.996005 18.341003,19.139013 17.345001,19.139013 17.345001,12.791004C17.105011,13.024006 16.790985,13.251011 16.402008,13.479008 16.011993,13.709003 15.662994,13.879001 15.35199,13.993L15.35199,13.03101C15.910004,12.767002 16.397003,12.451999 16.813995,12.080996 17.230988,11.709002 17.526001,11.34801 17.699005,10.996005z M2.4379883,2.2939998L5.1119995,2.2939998 5.1119995,5.3020032 9.9580078,5.3020032 9.9580078,2.2939998 16.755005,2.2939998 16.755005,5.3020032 21.600006,5.3020032 21.600006,2.2939998 24.515991,2.2939998C25.860992,2.2939995,26.951996,3.3860026,26.951996,4.7300046L26.951996,14.297001C26.656006,14.261997 26.356995,14.23801 26.052002,14.23801 25.476013,14.23801 24.916992,14.308002 24.377991,14.429996L24.377991,8.3300036 2.5759888,8.3300036 2.5759888,21.438009 18.484009,21.438009C18.477997,21.567007 18.464996,21.694006 18.464996,21.82601 18.464996,22.683004 18.614014,23.504003 18.877014,24.273001L0,24.273001 0,21.438009 0.0020141602,21.438009 0.0020141602,4.7300046C0.0020141602,3.3860026,1.0929871,2.2939995,2.4379883,2.2939998z M17.677002,0L20.678009,0 20.678009,4.3219999 17.677002,4.3219999z M6.0350037,0L9.0350037,0 9.0350037,4.3219999 6.0350037,4.3219999z"
Stretch="Uniform" Fill="#FFFFFFFF" Width="30" Height="30"
Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5"/>
</ContentPresenter>
</Border>
<Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False"
Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square"
Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
StrokeDashArray="1,1"/>
<Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False"
Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square"
Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
StrokeDashArray="1,1"/>
</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:
Conclusion
I hope you enjoyed learning about how to customize the dropdown arrow of DropDownButton in UWP DatePicker.
You can refer to our UWP DatePicker feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
