ShrlAlgoToolkit/WPFluent.Gallery/Views/Pages/DateAndTimePage.xaml

<Page
    Foreground="{DynamicResource TextFillColorPrimaryBrush}"
    Title="DateAndTimePage"
    
    d:DataContext="{d:DesignInstance pages:DateAndTimePage,
                                     IsDesignTimeCreatable=False}"
    d:DesignWidth="800"
    mc:Ignorable="d"
    
    
    x:Class="WPFluent.Gallery.Views.Pages.DateAndTimePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:controls="clr-namespace:WPFluent.Gallery.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:pages="clr-namespace:WPFluent.Gallery.Views.Pages"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:ui="https://github.com/ShrlAlgo/WPFluent"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <StackPanel >
        <GroupBox Header="A basic Calendar control">
            <Calendar HorizontalAlignment="Left" />
        </GroupBox>
        <GroupBox Header="DatePicker">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <ui:CalendarDatePicker
                        Content="Pick a date"
                        Date="{x:Static sys:DateTime.Today}"
                        Grid.Column="0"
                        IsTodayHighlighted="True"
                        x:Name="CalendarDatePicker" />
                <ui:TextBlock
                        Grid.Column="1"
                        Margin="8,0,0,0"
                        Text="{Binding Date, ElementName=CalendarDatePicker}"
                        VerticalAlignment="Center" />
                <DatePicker Width="120" Grid.Column="2" HorizontalAlignment="Right"/>
            </Grid>
        </GroupBox>
           
        <GroupBox Header="TimePicker">
            <ui:TimePicker
                    ClockIdentifier="Clock12Hour"
                    HorizontalAlignment="Left"
                    Width="300" />
        </GroupBox>
    </StackPanel>
</Page>