Articles in this section
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:

C:\Users\durga.rajan\Pictures\Screenshots\Screenshot (269).png

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied