Appearance in WPF TimePicker (SfTimePicker)

This section explains different UI customization, styling, theming options available in SfTimePicker control.

Setting the Foreground

We can change a foreground of the SfTimePicker by using the Foreground property and also we can change the SfTimeSelector items and selected time item foreground by using the Foreground and SfTimeSelector.SelectedForeground properties of SfTimeSelector.

  • xaml
  • <syncfusion:SfTimePicker Name="sfTimePicker"
                             Foreground="Red"
                             Width="200">
        <syncfusion:SfTimePicker.SelectorStyle>
            <Style TargetType="syncfusion:SfTimeSelector">
                <Setter Property="Foreground" Value="Blue"/>
                <Setter Property="SelectedForeground" Value="Yellow"/>
            </Style>
        </syncfusion:SfTimePicker.SelectorStyle>
    </syncfusion:SfTimePicker>

    SfTimePicker with various foreground

    Setting the Background

    We can change a background of the SfTimePicker by using the background property and also we can change the SfTimeSelector items and selected time item background by using the Background and SfTimeSelector.AccentBrush properties of SfTimeSelector.

  • xaml
  • <syncfusion:SfTimePicker Name="sfTimePicker"
                             Background="Red"
                             AccentBrush="Green"
                     Width="200">
        <syncfusion:SfTimePicker.SelectorStyle>
            <Style TargetType="syncfusion:SfTimeSelector">
                <Setter Property="Background" Value="Blue"/>
            </Style>
        </syncfusion:SfTimePicker.SelectorStyle>
    </syncfusion:SfTimePicker>

    SfTimePicker with various background

    Change flow direction

    We can change the flow direction of the SfTimePicker control from right to left by setting the FlowDirection property value as RightToLeft. The Default value of FlowDirection property is LeftToRight.

    <syncfusion:SfTimePicker FlowDirection="RightToLeft" Name="sfTimePicker"/>
    SfTimePicker sfTimePicker= new SfTimePicker();
    sfTimePicker.FlowDirection = FlowDirection.RightToLeft;

    SfTimePicker with RightToLeft flow direction

    Click here to download the sample that showcases the different UI customization and styling supports.

    Theme

    You can customize the appearance of the SfTimePicker control by using the SfSkinManager.SetVisualStyle method. The following are the various built-in visual styles for SfTimePicker control.

    • Blend
    • Lime
    • MaterialDark
    • MaterialDarkBlue
    • MaterialLight
    • MaterialLightBlue
    • Metro
    • Office2010Black
    • Office2010Blue
    • Office2010Silver
    • Office2013DarkGray
    • Office2013LightGray
    • Office2013White
    • Office2016Colorful
    • Office2016DarkGray
    • Office2016White
    • Office2019Black
    • Office2019Colorful
    • Office365
    • Saffron
    • VisualStudio2013
    • VisualStudio2015
    <Window>
        <!--Theme Namespace-->
        xmlns:syncfusionskin ="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF">
        <Grid>
            <syncfusion:SfTimePicker syncfusionskin:SfSkinManager.VisualStyle="MaterialDark" 
                                     Name="sfTimePicker" />
        </Grid>
    </Window>
    //Namespace for the SfSkinManager.
    using Syncfusion.SfSkinManager;
    
    SfTimePicker sfTimePicker = new SfTimePicker();
    SfSkinManager.SetVisualStyle(sfTimePicker, VisualStyles.MaterialDark);

    SfTimePicker with MaterialDark visual style

    Here, the MaterialDark style is applied to the SfTimePicker.

    NOTE

    View Sample in GitHub