Appearance in WPF DatePicker (SfDatePicker)

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

Setting the Foreground

We can change a foreground of the SfDatePicker by using the Foreground property and also we can change the SfDateSelector items and selected date item foreground by using the Foreground and SfDateSelector.SelectedForeground properties of SfDateSelector.

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

    SfDatePicker with various foreground

    NOTE

    View Sample in GitHub

    Setting the Background

    We can change a background of the SfDatePicker by using the background property and also we can change the SfDateSelector items and selected date item background by using the Background and SfDateSelector.AccentBrush properties of SfDateSelector.

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

    SfDatePicker with various background

    NOTE

    View Sample in GitHub

    Change flow direction

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

    <syncfusion:SfDatePicker FlowDirection="RightToLeft" Name="sfDatePicker"/>
    SfDatePicker sfDatePicker= new SfDatePicker();
    sfDatePicker.FlowDirection = FlowDirection.RightToLeft;

    SfDatePicker with RightToLeft flow direction

    NOTE

    View Sample in GitHub

    Theme

    You can customize the appearance of the SfDatePicker control by using the SfSkinManager.SetVisualStyle method. The following are the various built-in visual styles for SfDatePicker 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:SfDatePicker syncfusionskin:SfSkinManager.VisualStyle="MaterialDark" 
                                     Name="sfDatePicker" />
        </Grid>
    </Window>
    //Namespace for the SfSkinManager.
    using Syncfusion.SfSkinManager;
    
    SfDatePicker sfDatePicker = new SfDatePicker();
    SfSkinManager.SetVisualStyle(sfDatePicker, VisualStyles.MaterialDark);

    SfDatePicker with MaterialDark visual style

    Here, the MaterialDark style is applied to the SfDatePicker.

    NOTE

    View Sample in GitHub