How could i create a RangeDatePicker

[MasterBran]

I want to create a control to get both start date and end date once, how could i do it,

[Yopler]

Hi 🖐,

There is many way to do it. The basic way to do it is to create a user control :

RangeDatePicker.xaml

<ContentControl x:Class="Wpf_Test.RangeDatePicker"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                Width="400">
    <StackPanel Orientation="{Binding Position}">
        <DatePicker SelectedDate="{Binding StartDate, Mode=TwoWay}" Height="30" Style="{StaticResource DatePickerExtend}"/>
        <DatePicker SelectedDate="{Binding EndDate, Mode=TwoWay}" Height="30" Style="{StaticResource DatePickerExtend}"/>
    </StackPanel>
</ContentControl>

RangeDatePicker.xaml.cs

public partial class RangeDatePicker : ContentControl
    {
        public Orientation Position { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }

        public static readonly DependencyProperty PositionProperty = DependencyProperty.Register("Position", typeof(Orientation), typeof(RangeDatePicker), new PropertyMetadata(Orientation.Horizontal));
        public static readonly DependencyProperty StartDateProperty = DependencyProperty.Register("StartDate", typeof(DateTime), typeof(RangeDatePicker), new PropertyMetadata(DateTime.Now));
        public static readonly DependencyProperty EndDateProperty = DependencyProperty.Register("EndDate", typeof(DateTime), typeof(RangeDatePicker), new PropertyMetadata(DateTime.Now));

        public RangeDatePicker()
        {
            InitializeComponent();
            (Content as FrameworkElement).DataContext = this;
        }
    }

Then you can call your control anywhere you want in your xaml like so :
MainWindow.xaml

 <Window x:Class="Wpf_Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf_Test" 
        xmlns:hc="https://handyorg.github.io/handycontrol"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    
        <local:RangeDatePicker StartDate="{Binding StartDate}" EndDate="{Binding EndDate}" Position="Horizontal"/>
</Window>

MainWindow.xaml.cs

    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }

        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;

            StartDate = new DateTime(2022, 1, 12);
            EndDate = new DateTime(2022, 02, 13);
        }

        public void NotifyPropertyChanged(string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            HandyControl.Controls.MessageBox.Show("Error", "Title", MessageBoxButton.YesNo, MessageBoxImage.Question, MessageBoxResult.OK);
        }
    }

Result :

You can start from there, and modify it as you want bc it is not perfect 😅

hope it can help 😊