Category / Section
How to customize the dropdown arrow of DropDownButton in SfTimePicker?
1 min read
An Icon of the DropDownButton can be customized by changing the Path of the ContentPresenter of the RepeatButon in SfTimePicker control. 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_TimePicker}" 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_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> <Style x:Key="DropDownButtonStyle_TimePicker" 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}"> <Path x:Name="path" Data="M18.400002,10.799993L19.900002,10.799993 19.600006,12.299993 18.100006,12.299993z M10.800003,10.799993L14.400002,10.799993 15.100006,11.699987 14.600006,12.099981C14.400002,12.299993,14.100006,12.299993,13.900002,12.299993L10.700005,12.299993C10.400002,12.299993,10.200005,12.199987,10,12.099981L9.7000046,11.699987z M2,10.799993L5.9000015,10.799993 6.5,11.500006 5.6000061,12.199987 0.20000458,12.199987z M19.100006,6.8999972L20.600006,6.8999972 20.300003,8.3999977 18.800003,8.3999977z M1.8000031,6.3999972L2.4000015,7.0000033 1.8000031,10.59998 0,12.099981 0.80000305,7.6999855C0.80000305,7.5000038 0.90000153,7.3999977 0.90000153,7.2999911 0.90000153,7.199985 1.1000061,7.0999789 1.3000031,6.8999972z M30.200005,6.1999845L30.800003,6.8999972 30,11.699987 29.100006,12.4 28.5,11.699987 29.300003,6.8999972z M25.100006,6.1999845L25.700005,6.8999972 24.900002,11.699987 24,12.4 23.400002,11.699987 24.200005,6.8999972z M16.300003,6.1999845L16.900002,6.8999972 16.300003,10.09998C16.200005,10.399999 16.200005,10.59998 16.200005,10.699986 16.200005,10.799993 16.100006,10.9 15.900002,11.000006L15.300003,11.4 14.700005,10.699986 15.400002,6.8999972z M10.600006,6.1999845L11.200005,6.8999972 10.5,10.699986 9.5,11.500006 9.2000046,11.199987C9.1000061,11.000006,9,10.9,9,10.699986L9,10.500005 9.6000061,6.8999972z M3.4000015,5.3999967L6.6000061,5.3999967 7.2000046,6.0999784 6.7000046,6.5999789C6.5,6.699985,6.4000015,6.7999911,6.3000031,6.7999911L5.8000031,6.7999911 2.7000046,6.7999911 2,6.1999845 2.6000061,5.6999845C2.7000046,5.5999784 2.8000031,5.5000028 2.9000015,5.5000028 3,5.3999967 3.2000046,5.3999967 3.4000015,5.3999967z M17.400002,0.89999439L17.600006,1.1999821C17.800003,1.3999946,17.800003,1.5999764,17.800003,1.6999826L17.800003,1.8999948 17.200005,5.3999967 16.300003,6.0999784 15.700005,5.3999967 16.300003,1.6999826z M11.5,0.89999439L12.100006,1.6999826 11.5,5.3999967 10.600006,6.1999845 10,5.3999967 10.600006,2.1999826C10.600006,1.8999948 10.700005,1.6999826 10.700005,1.5999765 10.700005,1.5000008 10.800003,1.3999946 11,1.2999882z M8.5,0.89999439L8.8000031,1.2999882C8.9000015,1.2999885,9,1.5000008,9,1.6999826L9,2.0999765 8.4000015,4.7999901C8.4000015,5.0000023 8.3000031,5.0999779 8.3000031,5.199984 8.3000031,5.199984 8.2000046,5.2999901 8,5.5000028L7.5,5.8999967 6.9000015,5.199984 7.5,1.6999826z M32,0.29998778L31.100006,5.3999967 30.200005,6.1999845 29.600006,5.3999967 30.200005,1.6999826z M26.900002,0.29998778L26,5.3999967 25.100006,6.1999845 24.5,5.3999967 25.100006,1.6999826z M29.100006,0L31.800003,0 30,1.5000009 28.800003,1.5000009 28.200005,0.79998828z M24.100006,0L26.800003,0 25,1.5000009 23.800003,1.5000009 23.200005,0.79998828z M12.900002,0L16.300003,0C16.600006,4.4587068E-08,16.800003,0.099975675,16.900002,0.29998778L17.200005,0.69998218 16.200005,1.5000009 12.5,1.5000009 11.800003,0.69998218 12.200005,0.29998778C12.400002,0.099975675,12.600006,4.4587068E-08,12.900002,0z M3.6000061,0L7.4250011,0C7.4250011,4.4587068E-08 7.4265637,4.4587068E-08 7.4296885,0 7.4328136,4.4587068E-08 7.437501,4.4587068E-08 7.4437509,0 7.4500008,4.4587068E-08 7.4578133,4.4587068E-08 7.4671879,0 7.476563,4.4587068E-08 7.4875002,4.4587068E-08 7.5,0 7.8000031,4.4587068E-08 8,0.099975675 8.2000046,0.29998778L8.4000015,0.59997608 7.4000015,1.3999943 3.4000015,1.3999943 2.8000031,0.79998828z" 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:SfTimePicker Grid.Row="1" Width="180" ShowDropDownButton="True" Style="{StaticResource SfTimePickerStyle}"/> </Grid>
Output: