WinUI 3 Date Picker Control — идеальный инструмент для выбора даты
Элемент управления Выбор даты WinUI предоставляет интуитивно понятный сенсорный интерфейс для выбора нужной даты из раскрывающегося списка. Вы можете проверять входные значения при использовании редактирования в свободной форме и настраивать формат входного значения и полей, отображаемых в раскрывающемся списке. Вы также можете выбрать или ввести дату и очистить выбранную дату по требованию.
В этом сообщении блога мы узнаем, как включить элемент управления WinUI Date Picker и использовать его функции в вашем приложении.
Добавление элемента управления WinUI Date Picker в приложение
Выполните следующие действия, чтобы вручную добавить элемент управления WinUI Date Picker в XAML-файл вашего приложения.
- Сначала создайте проект, следуя инструкциям, приведенным в документации Настольное приложение WinUI 3 для C# и .NET 5.
- Затем установите в проект пакет NuGet Syncfusion.Editors.WinUI.
- Затем импортируйте пространство имен элемента управления Syncfusion.UI.Xaml.Editors на страницу XAML.
- Наконец, инициализируйте элемент управления WinUI Date Picker. См. следующий пример кода.
<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>
Таким образом, мы включили в наше приложение элемент управления Syncfusion WinUI 3 Date Picker. Теперь давайте посмотрим, как использовать его потрясающие функции.
Ограничьте доступные даты
Вы можете ограничить пользователей выбором значений даты в минимальном и максимальном диапазоне, используя свойства MinDate и MaxDate.
По умолчанию значение MinDate равно 01.01.1921, а MaxDate — 31.12.2121. При использовании в любом приложении бронирования путешествий эта функция полезна для ограничения минимальной даты текущей датой.
См. следующий пример кода.
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;
}
}
Ограничить определенные даты
Вы можете запретить пользователям выбирать определенные даты в раскрывающемся списке с помощью свойства коллекции BlackoutDates.
По умолчанию значение свойства BlackoutDates равно 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;
}
}
По умолчанию средство выбора даты позволяет установить пустое значение в редакторе с помощью свойства SelectedDate. Кроме того, вы можете ограничить присвоение пустых значений, установив для свойства AllowNull значение false. Значение по умолчанию свойства SelectedDate равно null, а свойство AllowNull равно true.
Отменить изменение выбранной даты
Вы будете получать уведомления всякий раз, когда вы выбираете дату в раскрывающемся списке или назначаете новое значение даты свойству SelectedDate с помощью события SelectedDateChanging.
Примечание. Событие SelectedDateChanging будет инициировано, как только будет выбрана дата, но до обновления SelectedDateproperty.
Пользователям запрещено выбирать дату отключения из раскрывающегося списка; однако пользователи могут вводить текст через редактор. Если текущая выбранная дата недействительна (дата отключения), вы можете легко отменить обновление значения свойства SelectedDate с помощью события SelectedDateChanging.
Событие SelectedDateChanging содержит следующие свойства:
- 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;
}
}
Показать водяной знак
Вы можете отображать подсказки или информацию с помощью свойства PlaceHolderText, если дата не выбрана или значение свойства SelectedDate равно null.
<editors:SfDatePicker x:Name="datePicker" HorizontalAlignment="Center" VerticalAlignment="Top" PlaceholderText="Enter input here..." />
Изменить тип календаря
Вы можете легко изменить тип календаря в раскрывающемся списке, используя свойство CalendarIdentifier. Значением по умолчанию свойства CalendarIdentifier является GregorianCalendar.
См. следующий пример кода. Мы установили средство выбора даты на тип календаря Хиджра.
<Grid> <editors:SfDatePicker x:Name="datePicker" HorizontalAlignment="Center" CalendarIdentifier="HijriCalendar" VerticalAlignment="Center" /> </Grid>
Примечание. Дополнительные сведения см. в описании различных типов календарей, поддерживаемых элементом управления Выбор даты.
Изменить язык
Вы также можете локализовать элемент управления "Выбор даты", чтобы помочь пользователям со всего мира, говорящим на разных языках, с помощью свойства Language. Значение свойства Language по умолчанию — en-US.
См. следующий пример кода. Здесь «ar-SA» относится к арабско-саудовской Аравии.
<Grid> <editors:SfDatePicker x:Name="datePicker" HorizontalAlignment="Center" Language="ar-SA" VerticalAlignment="Top" /> </Grid>
Примечание. Дополнительные сведения см. в разделе Различные типы языков, поддерживаемые элементом управления Выбор даты.
Элемент управления «Выбор даты» визуально обновляет направление потока в зависимости от применяемого языка и типа календаря. По умолчанию значением свойства FlowDirection является LeftToRight.
См. следующий пример кода.
<Grid> <editors:SfDatePicker x:Name="datePicker" HorizontalAlignment="Center" Language="ar-SA" FlowDirection="LeftToRight" VerticalAlignment="Center" /> </Grid>
Настройте средство выбора даты
Давайте посмотрим, как настроить кнопку раскрывающегося списка и раскрывающийся список в элементе управления WinUI Date Picker для элегантного оформления вашего приложения.
Настроить раскрывающуюся кнопку
Вы можете настроить кнопку раскрывающегося списка в элементе управления "Выбор даты" с помощью свойства DropDownButtonTemplate. Значение по умолчанию для 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>
Вы можете открыть кнопку раскрывающегося списка программно, задав для свойства IsOpen значение true. По умолчанию значение свойства IsOpen равно false.
Изменить выравнивание и высоту раскрывающегося списка
Легко изменить положение раскрывающегося списка в редакторе с помощью свойства DropDownPlacement. По умолчанию значением свойства DropDownPlacement является Auto. Раскрывающийся список разумно меняет свое выравнивание в зависимости от свободного места в приложении.
Вы также можете изменить высоту раскрывающегося списка, чтобы ограничить количество отображаемых значений даты, используя свойство DropDownHeight. Значением по умолчанию свойства DropDownHeight является NaN.
См. следующий пример кода.
<editors:SfDatePicker x:Name="datePicker" HorizontalAlignment="Center" VerticalAlignment="Center" DropDownPlacement="Right" DropDownHeight="200" />
Настройте заголовок раскрывающегося списка
Добавьте подсказки в раскрывающийся заголовок с помощью свойства DropDownHeader, установив для свойства ShowDropDownHeader значение true. Кроме того, вы можете настроить шаблон заголовка раскрывающегося списка с помощью свойства DropDownHeaderTemplate.
По умолчанию значением свойства DropDownHeader является string.Empty, 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>
Скрыть заголовок раскрывающегося списка
По умолчанию, когда вы открываете раскрывающийся список элемента управления «Выбор даты», заголовки для каждого столбца поля будут отображаться для представления соответствующих имен полей. Вы можете скрыть заголовки этих столбцов, установив для свойства ShowColumnHeaders значение false. Значение свойства ShowColumnHeaders по умолчанию — true.
См. следующий пример кода.
<editors:SfDatePicker x:Name="datePicker" HorizontalAlignment="Center" VerticalAlignment="Center" ShowColumnHeaders="False" />
Настройте внешний вид ячеек элементов в раскрывающемся списке.
Вы можете настроить внешний вид ячеек элемента в раскрывающемся списке с помощью свойств ItemContainerStyle и ItemTemplateSelector. Значение по умолчанию для обоих свойств равно null.
Примечание. Дополнительные сведения см. в документации Настройка стиля ячейки в раскрывающемся списке.
Вы также можете настроить все столбцы полей и ячейки элементов в раскрывающемся списке с помощью события DateFieldPrepared.
См. следующий пример кода.
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;
}
}
}
Ссылка на GitHub
Дополнительные сведения см. в Демонстрациях WinUI 3 Date Picker на GitHub и в документации.
Заключение
Спасибо за прочтение! Мы считаем, что благодаря своим великолепным функциям элемент управления Выбор даты WinUI идеально соответствует вашим ожиданиям и требованиям к выбору значения даты. Попробуйте наш элемент управления WinUI Date Picker для гибкого выбора даты.
Вы можете загрузить другие примеры для элементов управления WinUI из этого репозитория GitHub.
Для существующих клиентов новейшая версия Essential Studio доступна для загрузки на странице лицензий и загрузок. Если вы еще не являетесь клиентом, вы можете попробовать нашу 30-дневную бесплатную пробную версию, чтобы проверить эти новые функции.
Вы также можете связаться с нами через форумы поддержки, портал обратной связи или систему поддержки Direct-Trac. Мы всегда рады Вам помочь!
Связанные блоги
- Изучение типов столбцов в WinUI 3 DataGrid
- Выбирайте цвета как босс, используя элементы управления цветом Syncfusion в WinUI
- Планировщик WinUI: умный инструмент для записи на прием в больнице
- Представляем ленту Syncfusion для WinUI
Первоначально опубликовано на https://www.syncfusion.com 24 ноября 2021 г.
