WPF의 DatePicker에서 선택 가능한 날짜 설정

12114 단어 WPFC#

이루고 싶은 일.


WPF 표준DatePicker은 달력에서 날짜를 선택할 수 있는 잉크 컨트롤러로 직접 사용하면 모든 날짜를 선택할 수 있다.
이에 따라BlackoutDates 속성이 선택할 수 없는 날짜를 설정해 제어할 수도 있지만, 빙딩 등으로 실제 선택 가능한 날짜를 설정하려 할 때도 이번에 이뤄졌다.

어떻게


첨부 등록 정보를 사용합니다.이상.
또한 제 손에 도입MaterialDesignInXAML했기 때문에 표준적인 제어 외관과는 다르지만 본질적으로 하는 일은 같습니다.마음에 드는 사람은 여기.부터 가져오세요.

첨부 속성 작성


프로젝트Views 폴더 아래에 Behaviors 폴더를 만들고 그 중에서 DatePickerAssist 이름의 분류를 만듭니다.여기에 추가 속성DatePicker을 정의합니다.그나저나 자꾸 다 쓰는 게 귀찮아서 비주얼스튜디오SelectableDates의 스니 펫을 사용합니다.
DatePickerAssist.cs
namespace DatePickerSample.Views.Behaviors
{
    public class DatePickerAssist
    {
        // Getter
        public static IEnumerable GetSelectableDates(DependencyObject obj)
        {
            return (IEnumerable)obj.GetValue(SelectableDatesProperty);
        }

        // Setter
        public static void SetSelectableDates(DependencyObject obj, IEnumerable value)
        {
            obj.SetValue(SelectableDatesProperty, value);
        }

        // 添付プロパティを登録
        public static readonly DependencyProperty SelectableDatesProperty = DependencyProperty.RegisterAttached(
            "SelectableDates",
            typeof(IEnumerable),
            typeof(DatePickerAssist),
            new PropertyMetadata(null, OnSelectableDatesChanged));

        // コールバック関数の定義
        private static void OnSelectableDatesChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (d is DatePicker datePicker && e.NewValue is IEnumerable<DateTime> dates)
            {
                var minDate = dates.Min();
                var maxDate = dates.Max();

                // 区間の最初と最後を設定
                datePicker.DisplayDateStart = minDate;
                datePicker.DisplayDateEnd = maxDate;

                // 選択できる日付の区間内は、1日ずつ判定して、含まれていなければ BlackoutDates に追加
                for (int i = 1; i < (maxDate - minDate).Days; i++)
                {
                    if (!dates.Contains(minDate.AddDays(i)))
                    {
                        datePicker.BlackoutDates.Add(new CalendarDateRange(minDate.AddDays(i)));
                    }
                }
            }
        }
    }
}

첨부 속성 설정


이번에는 ViewModel로 propa 유형의 속성을 선택할 수 있는 날짜를 정의한 다음, 그것을 ↑로 만든 첨부파일 속성으로 정의했다.
MainWindowViewModel.cs
namespace DatePickerSample.ViewModels
{
    public class MainWindowViewModel
    {
        public ObservableCollection<DateTime> Dates { get; }

        public MainWindowViewModel()
        {
            Dates = new ObservableCollection<DateTime>()
            {
                new DateTime(2021, 2, 2),
                new DateTime(2021, 2, 3),
                new DateTime(2021, 2, 4),
                new DateTime(2021, 2, 10),
                new DateTime(2021, 2, 16),
            };
        }
    }
}
내가 먼저 너에게 5일의 양을 정의해 주었다.내가 이거 빙딩할게.다음은 Behaviors 네임스페이스ObservableCollection<DateTime>입니다.
MainWindow.xaml
<Window x:Class="DatePickerSample.Views.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:md="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:b="clr-namespace:DatePickerSample.Views.Behaviors"
        xmlns:vm="clr-namespace:DatePickerSample.ViewModels"
        mc:Ignorable="d"
        Title="MainWindow" Height="400" Width="300">
    <Window.DataContext>
        <vm:MainWindowViewModel/>
    </Window.DataContext>
    <Grid>
        <DatePicker Width="100" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0"
                    md:CalendarAssist.IsHeaderVisible="False"  b:DatePickerAssist.SelectableDates="{Binding Dates}"/>
    </Grid>
</Window>
실행하면 이런 느낌이야.b 속성에 설정된 날짜만 잘 선택할 수 있습니다.이 시행방식이라면 2020년 2월 1일 이전과 2020년 2월 17일 이후에는 표시되지 않고, 그 사이 선택할 수 없는 날은 회색으로 아웃된다.
※ 기본Dates 컨트롤 중 선택할 수 없는 날짜×표식

총결산

  • 액세서리 속성은 착용하기 편합니다
  • 결과 Material Design InXAML이 너무 예뻐요
  • 좋은 웹페이지 즐겨찾기