چگونه یک WPF DateRangePicker ایجاد کنیم؟

<UserControl x:Class="UserControls.DateRangePicker"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:UserControls"
             mc:Ignorable="d" 
             x:Name="this"
             d:DesignHeight="30" d:DesignWidth="160">

    <StackPanel>
        <Border
            BorderThickness="1"
            BorderBrush="{Binding ElementName=DateRangePicker_TextBox, Path=BorderBrush}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="30" />
                </Grid.ColumnDefinitions>
                <TextBox
                    x:Name="DateRangePicker_TextBox"
                    Grid.Column="0"
                    Margin="0"
                    MinHeight="30"
                    BorderThickness="0"
                    d:Text="14.03.2023 - 20.03.2023"
                    Text="{Binding ElementName=this, Path=DisplayValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Delay=300}"
                    KeyUp="Handle_Escape_Button" />
                <ToggleButton
                    x:Name="DateRangePicker_ArrowButton"
                    Grid.Column="1"
                    Height="{Binding ElementName=DateRangePicker_TextBox, Path=Height}"
                    Focusable="False"
                    ClickMode="Press"
                    IsChecked="{Binding ElementName=this, Path=IsDropDownOpen, Mode=TwoWay}"
                    MinWidth="30"
                    Background="{Binding ElementName=DateRangePicker_TextBox, Path=Background}"
                    BorderBrush="{Binding ElementName=DateRangePicker_TextBox, Path=Background}"
                    BorderThickness="0"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Stretch">
                    <Path
                        x:Name="DateRangePicker_Arrow"
                        Data="M 0 0 L 4 4 L 8 0 Z">
                        <Path.Fill>
                            <SolidColorBrush Color="#FF444444"/>
                        </Path.Fill>
                    </Path>
                </ToggleButton>
            </Grid>
        </Border>
        <Popup
            x:Name="DateRangePicker_Popup"
            Placement="Bottom"
            IsOpen="{Binding ElementName=this, Path=IsDropDownOpen}"
            AllowsTransparency="True"
            Focusable="False"
            PopupAnimation="Slide">

            <Viewbox
                x:Name="DateRangePicker_DropDown"
                SnapsToDevicePixels="True"
                Stretch="Fill">
                <Calendar
                    x:Name="DateRangePicker_Calendar"
                    SelectionMode="SingleRange"
                    SelectedDatesChanged="DateRangePicker_Calendar_SelectedDatesChanged"/>
            </Viewbox>
        </Popup>
    </StackPanel>
</UserControl>

Text="{Binding ElementName=this, Path=DisplayValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Delay=300}"

public static readonly DependencyProperty SelectedDateRangeProperty
    = DependencyProperty.Register(
        nameof(SelectedDateRange),
        typeof(ObservableCollection<DateTime>),
        typeof(DateRangePicker),
        new FrameworkPropertyMetadata(default(ObservableCollection<DateTime>), FrameworkPropertyMetadataOptions.None));

public ObservableCollection<DateTime> SelectedDateRange
{
    get => (ObservableCollection<DateTime>)GetValue(SelectedDateRangeProperty);
    set => SetValue(SelectedDateRangeProperty, value);
}

public event PropertyChangedEventHandler PropertyChanged;

public void RaisePropertyChanged([CallerMemberName] string propertyName = null)
    => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

protected bool SetProperty<T>(ref T backingStore, T value, [CallerMemberName] string propertyName = "", Action onChanged = null)
{
    var output = false;

    if (EqualityComparer<T>.Default.Equals(backingStore, value) == false)
    {
        backingStore = value;
        onChanged?.Invoke();
        RaisePropertyChanged(propertyName);

        output = true;
    }

    return output;
}

public ObservableCollection<DateTime> SelectedDates
{
    get => _selectedDate;
    set => SetProperty(ref _selectedDate, value, onChanged: () =>
    {
        IsDropDownOpen = false;
        if (value.Any())
        {
            if (value.Count == 1)
            {
                DisplayValue = value.First().ToString("dd.MM.yyyy");
                SelectedDateRange = new ObservableCollection<DateTime> { value.First() };
            }
            else
            {
                DisplayValue = $"{value.First():dd.MM.yyyy} - {value.Last():dd.MM.yyyy}";
                SelectedDateRange = new ObservableCollection<DateTime> { value.First(), value.Last() };
            }
        }
        else
        {
            SelectedDateRange = new ObservableCollection<DateTime>();
        }
    });
}
private ObservableCollection<DateTime> _selectedDate = new ObservableCollection<DateTime>();

xmlns:userControls="clr-namespace:UserControls;assembly=DateRangePicker"

<userControls:DateRangePicker 
    SelectedDateRange="{Binding SelectedDates, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />