WinUI 3日付ピッカー制御日付選択のための最適なツール


The WinUI Date Picker コントロールは、ドロップダウンスピナーから必要な日付を選択するための直感的な、タッチフレンドリーなインターフェイスを提供します.自由形式の編集を使用して、ドロップダウンに示す入力値とフィールドの書式をカスタマイズするときに、入力値を検証できます.また、選択するか、日付を入力し、必要に応じて選択した日付をオフにします.
このブログ記事では、WinUIの日付ピッカーコントロールを含める方法を学び、アプリケーションでその機能を使用します.

アプリケーションにWinUI日付ピッカーコントロールを追加する
手動でアプリケーションのXAMLファイルにWinUIの日付ピッカーコントロールを追加する手順に従います
  • まず、WinUI 3 desktop app for C# and .NET 5 ドキュメント.
  • そして、Syncfusion.Editors.WinUI プロジェクトのnugetパッケージ.
  • 次に、syncfusionをインポートします.UIXAMLXAMLページのエディタコントロールの名前空間.
  • 最後に、WinUIの日付ピッカーコントロールを初期化します.次のコード例を参照してください.
  • <Window
    x:Class="WinUI_ DatePicker.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI_ DatePicker "
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:editors="using:Syncfusion.UI.Xaml.Editors"
    mc:Ignorable="d">
    
    <Grid>
    <editors:SfDatePicker x:Name="datePicker"
    HorizontalAlignment="Center"
    VerticalAlignment="Top"
    />
    </Grid>
    </Window>
    

    アプリケーションにWinUI日付ピッカーコントロールを追加する
    したがって、我々のアプリケーションでSyncfusion WinUI 3日付ピッカーコントロール含まれている.今、その見事な機能を使用する方法を見てみましょう.

    利用可能期限の制限
    あなたは最小値と最大範囲内の日付の値を選択するには、ユーザーを制限することができますmindateとmaxdateプロパティを使用します.
    デフォルトでは、mindateの値は1/1/1921であり、maxdateは12/31/2121です.任意の旅行予約アプリケーションで使用すると、この関数は、現在の日付にmin dateを制限するのに便利です.
    次のコード例を参照してください.
    public sealed partial class MainWindow : Window
    {
    public MainWindow()
    {
    this.InitializeComponent();
    SfDatePicker datePicker = new SfDatePicker();
    datePicker.HorizontalAlignment = HorizontalAlignment.Center;
    datePicker.VerticalAlignment = VerticalAlignment.Center;
    datePicker.MinDate = new DateTimeOffset(new DateTime(2021, 07, 07));
    datePicker.MaxDate = new DateTimeOffset(new DateTime(2021, 09, 07));
    
    this.Content = datePicker;
    }
    }
    
    | |
    WinUI日付ピッカーの最小値と最大値の日付の設定

    特定の日付を制限する
    BlackOutDateコレクションプロパティを使用してドロップダウンの特定の日付を選択するユーザーを制限できます.
    既定では、BlackOutDateプロパティの値はnullです.我々はこのような機能を使用することができますが、交通予約のアプリケーションでブラックアウトの日付に利用可能な交通機関がないことを示すために.
    次のコード例を参照してください.
    public sealed partial class MainWindow : Window
    {
    public DateTimeOffsetCollection BlackOutDates { get; set; }
    public MainWindow()
    {
    this.InitializeComponent();
    SfDatePicker datePicker = new SfDatePicker();
    datePicker.HorizontalAlignment = HorizontalAlignment.Center;
    datePicker.VerticalAlignment = VerticalAlignment.Center;
    datePicker.BlackoutDates = GetBlackOutDates();
    
    this.Content = datePicker;
    }
    
    private DateTimeOffsetCollection GetBlackOutDates()
    {
    BlackOutDates = new DateTimeOffsetCollection();
    BlackOutDates.Add(new DateTimeOffset(new DateTime(2021, 09, 03)));
    BlackOutDates.Add(new DateTimeOffset(new DateTime(2021, 09, 07)));
    BlackOutDates.Add(new DateTimeOffset(new DateTime(2021, 09, 24)));
    BlackOutDates.Add(new DateTimeOffset(new DateTime(2021, 10, 07)));
    BlackOutDates.Add(new DateTimeOffset(new DateTime(2021, 10, 13)));
    
    return BlackOutDates;
    }
    }
    

    WinUI日付ピッカーの停電日付の割り当て
    既定では、日付ピッカーを使用すると、SelectedDateプロパティを使用してエディタに空の値を設定できます.また、AllowNullプロパティの値をfalseに設定することで空の値の割り当てを制限できます.SelectedDateプロパティの既定値はnull、AllowNullプロパティはtrueです.

    変更された選択した日付をキャンセルする
    ドロップダウンの日付を選択するか、SelectedDateイベントに新しい日付値をSelectedDateプロパティに割り当てるたびに通知されます.
    注意:SelectedDateChanging イベントは、日付が選択されるとすぐに起動されますが、DeleteDatePropertyの前に更新されます.
    ユーザーは、ドロップダウンから停電日を選択することから制限されますしかし、ユーザーはエディタを通してテキスト入力を与えることができます.現在選択されている日付が無効な場合(停電日)、SelectedDateプロパティの値をSelectedDateChangedイベントを使用して簡単に更新することをキャンセルできます.
    SelectedDataChangedイベントには、次のプロパティがあります.
  • olddate :以前に選択した日付を取得します.
  • Newdate :現在選択されている日付を取得する
  • キャンセル:選択した日付値更新をキャンセルするかどうかを取得または設定します.
  • 次のコード例を参照してください.
    private void SfDatePicker_SelectedDateChanging(object sender, DateChangingEventArgs e)
    {
    var oldDate = e.OldDate;
    var newDate = e.NewDate;
    
    //Cancels the selected date update.
    if (newDate > new DateTimeOffset(new DateTime(2022, 01, 01)))
    {
    e.Cancel = true;
    }
    }
    

    透かしを示す
    日付が選択されていない場合、またはSelectedDateプロパティの値がnullの場合、PlaceHolderTextプロパティを使用してヒントや情報を表示できます.
    <editors:SfDatePicker x:Name="datePicker"
    HorizontalAlignment="Center"
    VerticalAlignment="Top"
    PlaceholderText="Enter input here..."
    />
    

    WinUI日付ピッカー透かしを示す

    カレンダータイプを変える
    CalendarIdentifierプロパティを使用してドロップダウンでカレンダーの種類を簡単に変更できます.CalendarIdentifierプロパティの既定値はGregoriancalendarです.
    次のコード例を参照してください.我々は、Hijriカレンダータイプに日付ピッカーを設定している.
    <Grid>
    <editors:SfDatePicker x:Name="datePicker"
    HorizontalAlignment="Center"
    CalendarIdentifier="HijriCalendar"
    VerticalAlignment="Center"
    />
    </Grid>
    

    WinUIの日付のピッカーHijriカレンダータイプ
    注意:詳細についてはtypes of calendars 日付ピッカーコントロールでサポートされています.

    言語を変える
    また、言語のプロパティを使用して別の言語を話すグローバルユーザーを支援する日付ピッカーコントロールをローカライズすることができます.Languageプロパティの既定値はen - usです.
    次のコード例を参照してください.ここで、「ar sa」はアラビアのサウジアラビアのアラビアを指します.
    <Grid>
    <editors:SfDatePicker x:Name="datePicker"
    HorizontalAlignment="Center"
    Language="ar-SA"
    VerticalAlignment="Top"
    />
    </Grid>
    

    WinUIの日付ピッカーの言語アラビア語に設定
    注意:詳細はdistinct types of languages 日付ピッカーコントロールでサポートされています.
    日付ピッカーコントロールは、適用言語とカレンダーの種類に基づいて視覚的に流れ方向を更新します.既定では、FlowDirectionプロパティの値はleftTightです.
    次のコード例を参照してください.
    <Grid>
    <editors:SfDatePicker x:Name="datePicker"
    HorizontalAlignment="Center"
    Language="ar-SA"
    FlowDirection="LeftToRight"
    VerticalAlignment="Center"
    />
    </Grid>
    

    WinUIの日付ピッカーの左から右への流れ方向のレンダリング

    カスタマイズの日付ピッカー
    ドロップダウンボタンをカスタマイズし、WinUIの日付ピッカーコントロールのドロップダウンをカスタマイズしてアプリケーションを設計する方法を見てみましょう.

    ドロップダウンボタンをカスタマイズ
    DropDownButtonTemplateプロパティを使用して、日付ピッカーコントロールでドロップダウンボタンをカスタマイズできます.ドロップダウンボタンの既定値はnullです.
    次のコード例を参照してください.
    <Grid>
    <editors:SfDatePicker x:Name="datePicker"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    >
    <editors:SfDatePicker.DropDownButtonTemplate>
    <DataTemplate>
    <Path Data="M4.600031,27.799988L2.6000334,29.799988 17.999978,29.799988 15.999981,27.799988z M6.499992,25.899994L5.4999934,26.899994 15.199994,26.899994 14.199995,25.899994z M16.49998,18C15.400006,18 14.400007,18.899994 14.400007,20.099976 14.400007,21.199982 15.300031,22.199982 16.49998,22.199982 17.600015,22.199982 18.600015,21.299988 18.600015,20.099976 18.600015,18.899994 17.600015,18 16.49998,18z M3.9999953,18C2.9000209,18 1.9000221,18.899994 1.900022,20.099976 1.9000221,21.199982 2.8000453,22.199982 3.9999953,22.199982 5.1000305,22.199982 6.1000291,21.299988 6.1000291,20.099976 6.1000291,18.899994 5.1000305,18 3.9999953,18z M10.999987,8.3999939L10.999987,14.799988 18.499978,14.799988 18.499978,8.3999939z M2.1000343,8.3999939L2.1000343,14.799988 9.6000253,14.799988 9.6000253,8.3999939z M0.90002347,3.7999878L3.4999958,3.7999878 16.99998,3.7999878 19.600013,3.7999878 19.600013,6.3999939 19.600013,23.299988 19.600013,25.899994 16.99998,25.899994 15.499981,25.899994 20.899999,31.299988 20.300025,32 18.900003,30.599976 18.900003,30.699982 1.900022,30.699982 1.900022,30.599976 0.70001127,31.799988 0,31.199982 4.200007,27 4.200007,26.899994 4.3000437,26.899994 5.3000422,25.899994 3.4999958,25.899994 0.90002347,25.899994 0.90002347,23.299988 0.90002347,6.3999939z M12.199998,0C13.10002,0 13.900007,0.79998779 13.900007,1.6999817 13.900007,2.5999756 13.10002,3.3999939 12.199998,3.3999939 11.300036,3.3999939 10.499988,2.5999756 10.499988,1.6999817 10.499988,0.79998779 11.199999,0 12.199998,0z M8.6000262,0C9.4999886,0 10.300037,0.79998779 10.300037,1.6999817 10.300037,2.5999756 9.4999886,3.3999939 8.6000262,3.3999939 7.7000027,3.3999939 6.9000159,2.5999756 6.9000159,1.6999817 6.9000159,0.79998779 7.6000276,0 8.6000262,0z" Stretch="Uniform" Fill="Black" Width="20" Height="20" />
    </DataTemplate>
    </editors:SfDatePicker.DropDownButtonTemplate>
    </editors:SfDatePicker>
    </Grid>
    

    WinUIの日付ピッカードロップダウンボタンのカスタマイズ
    IsOpenプロパティの値をtrueに設定することで、ドロップダウンボタンをプログラムで開くことができます.既定では、IsOpenプロパティの値はfalseです.

    ドロップダウンの位置と高さを変更する
    DropDownPlacementプロパティを使用してエディタからドロップダウンの位置を簡単に変更します.既定では、DropDownPlacementプロパティの値は自動的です.ドロップダウンはスマートに、そのアプリケーションで利用可能なスペースに基づいてその配置をシフトします.
    ドロップダウンの高さを変更してDropDownHeightプロパティを使用して示す日付値の数を制限できます.DropDownHeightプロパティの既定値はNaNです.
    次のコード例を参照してください.
    <editors:SfDatePicker x:Name="datePicker"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    DropDownPlacement="Right"
    DropDownHeight="200"
    />
    

    WinUIの日付ピッカーのドロップダウンの高さとアライメントのカスタマイズ

    ドロップダウンヘッダーをカスタマイズ
    ShowDropDownHeaderプロパティの値をtrueに設定することにより、DropDownHeaderプロパティを使用してドロップダウンヘッダーにヒントを追加します.また、DropDowHeaderTemplateプロパティを使用してドロップダウンのヘッダーテンプレートをカスタマイズできます.
    既定では、DropDownHeaderプロパティの値はStringです.空、showDropDownHeaderがfalseで、DropDownHeaderTemplateがnullです.
    次のコード例を参照してください.
    <editors:SfDatePicker x:Name="datePicker"
    HorizontalAlignment="Center"
    VerticalAlignment="Top"
    ShowDropDownHeader="True"
    DropDownHeader="Select your birthday"
    ShowColumnHeaders="True"
    >
    <editors:SfDatePicker.DropDownHeaderTemplate>
    <DataTemplate>
    <StackPanel Orientation="Horizontal">
    <TextBlock HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Foreground="DeepSkyBlue"
    Text="{Binding }"
    />
    <Path
    Width="25"
    Height="25"
    Margin="5,5,5,10"
    HorizontalAlignment="Center"
    VerticalAlignment="Bottom"
    Fill="DeepSkyBlue"
    Data="M13.599971,11.699997L13.599971,16.199997 4.400023,16.199997 4.400023,18 13.599971,18 13.599971,29.699997 17.700006,29.699997 17.700006,18 27.099966,18 27.099966,16.199997 17.700006,16.199997 17.700006,11.699997z M24.49999,1.5999985C23.400017,1.5999985 21.599968,2.2999954 19.999992,3.4000015 17.799982,5 16.499994,7.0999985 17.299982,7.9000015 17.400019,8 17.59997,8.0999985 17.900019,8.1999969L18.900017,8.1999969C19.999992,8 21.400017,7.4000015 22.700005,6.4000015 24.99999,4.7999954 26.200003,2.7999954 25.49999,2 25.299978,1.6999969 24.900015,1.5999985 24.49999,1.5999985z M6.400022,1.5999985C5.9999981,1.5999985 5.7000103,1.6999969 5.4000225,2 4.7000108,2.7999954 5.9999981,4.7999954 8.2000093,6.4000015 9.4999962,7.4000015 10.900021,8 11.999996,8.1999969L12.999995,8.1999969C13.200007,8.1999969 13.40002,8.0999985 13.599971,7.9000015 14.299983,7.0999985 13.099971,5.0999985 10.900021,3.4000015 9.2999849,2.2999954 7.5999727,1.5999985 6.400022,1.5999985z M5.4000225,0C7.0999732,0 9.4999962,0.90000153 11.700008,2.5 13.499995,3.7999954 14.799982,5.4000015 15.400019,6.6999969 15.999994,5.4000015 17.299982,3.7999954 19.099968,2.5 21.400017,0.90000153 23.900017,0 25.49999,0 26.299978,0 26.900015,0.19999695 27.299978,0.59999847 28.49999,2 26.900015,5 23.599968,7.4000015 23.200005,7.6999969 22.700005,8 22.29998,8.1999969L31.700001,8.1999969 31.700001,18 28.599966,18 28.599966,32 28.299978,32 3.0999741,32 3.0999741,18 0,18 0,8.1999969 8.5999727,8.1999969C8.2000093,7.9000015 7.7999849,7.6999969 7.2999854,7.4000015 4.0999741,5 2.4000234,2 3.5999741,0.59999847 3.9999986,0.19999695 4.5999741,0 5.4000225,0z"
    Stretch="Uniform" />
    </StackPanel>
    </DataTemplate>
    </editors:SfDatePicker.DropDownHeaderTemplate>
    </editors:SfDatePicker>
    

    WinUIの日付ピッカーのドロップダウンヘッダーのカスタマイズ

    ドロップダウン列のヘッダーを隠す
    既定では、日付ピッカーコントロールのドロップダウンを開くと、各フィールド列のヘッダーがそれぞれのフィールド名を表すように表示されます.ShowColumnHeadersプロパティの値をfalseに設定することで、これらの列のヘッダーを非表示にできます.ShowColumnHeadersプロパティの既定値はtrueです.
    次のコード例を参照してください.
    <editors:SfDatePicker x:Name="datePicker"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    ShowColumnHeaders="False"
    />
    

    WinUI日付ピッカーのドロップダウン列のヘッダーを隠す

    ドロップダウンでアイテムセルの外観をカスタマイズする
    ItemContainerStyleプロパティとItemtemplateSelectorプロパティを使用して、ドロップダウンで項目セルの外観をカスタマイズできます.プロパティの既定値はnullです.

    WinUIドロップダウンアイテムセルのカスタマイズ
    注意:詳細はCustomize the cell’s style in dropdown spinner ドキュメント.
    DateFiredPreparedイベントを使用してドロップダウン内のすべてのフィールド列および項目セルをカスタマイズすることもできます.
    次のコード例を参照してください.
    private void datePicker_DateFieldPrepared(object sender, DateTimeFieldPreparedEventArgs e)
    {
    if (e.Column != null)
    {
    if (e.Column.Field == DateTimeField.Day)
    {
    e.Column.Format = "ddd dd";
    e.Column.ShowHeader = true;
    e.Column.Header = "Day";
    e.Column.ItemHeight = 60;
    e.Column.ItemWidth = 100;
    e.Column.ShouldLoop = true;
    }
    else if (e.Column.Field == DateTimeField.MonthName)
    {
    e.Column.ShowHeader = true;
    e.Column.Header = "Month";
    e.Column.ItemHeight = 40;
    e.Column.ItemWidth = 75;
    e.Column.ShouldLoop = true;
    }
    else if (e.Column.Field == DateTimeField.Year)
    {
    e.Column.Format = "yy";
    e.Column.ShowHeader = true;
    e.Column.Header = "Year";
    e.Column.ItemHeight = 80;
    e.Column.ItemWidth = 75;
    e.Column.ShouldLoop = true;
    }
    }
    }
    

    WinUI日付ピッカーのドロップダウンフィールド列とアイテムセルのカスタマイズ

    Githubリファレンス
    詳しくはWinUI 3 Date Picker demos on GitHub and documentation .

    結論
    読書ありがとう!その素晴らしい機能では、我々はWinUI Date Picker コントロールは完全に日付の値を選択するためのあなたの期待と要件に合う.応答日付の選択のための私たちのWinUIの日付ピッカーコントロールをお試しください.
    WinUIコントロールの他の例をダウンロードできますGitHub リポジトリ.
    既存の顧客については、最新バージョン エッセンシャルスタジオからダウンロードできますlicense and downloads page . あなたがまだ顧客でないならば、あなたは我々の30日を試すことができますfree trial これらの新機能をチェックアウトします.
    また、私たちに連絡することができますsupport forums , the feedback portal , またはDirect-Trac support system . 我々は常にあなたを支援して満足している!

    関連ブログ