Представление календаря
Представление календаря позволяет пользователю просматривать календарь и взаимодействовать с ним, перемещаясь по месяцам, годам и десятилетиям. Пользователь может выбрать отдельную дату или диапазон дат. Не имеет поверхности выбора, и календарь всегда виден.
Выбор правильного элемента управления
Используйте представление календаря, чтобы пользователь мог выбрать дату или диапазон дат в постоянно отображаемом календаре.
Если необходимо предоставить пользователю возможность выбора нескольких дат одновременно, используйте представление календаря. Если необходимо предоставить пользователю возможность выбора одной даты и не нужно, чтобы календарь был виден всегда, рекомендуется использовать элементы управления Выбор даты календаря или Выбор даты.
Дополнительные сведения о выборе правильного элемента см. в статье Элементы управления датой и временем.
Примеры
Представление календаря состоит из 3 отдельных представлений: представление месяца, представление года и представление десятилетия. По умолчанию он запускается с открытым представлением месяца. Чтобы указать желаемое начальное представление, задайте свойство DisplayMode.
Пользователю необходимо нажать на заголовок в представлении месяца, чтобы открыть представление года, и нажать на заголовок в представлении года, чтобы открыть представление десятилетия. Чтобы вернуться в представление года, необходимо выбрать год в представление десятилетия, и выбрать месяц в представлении года, чтобы вернуться в представление месяца. С помощью двух стрелок возле заголовка можно перемещаться вперед или назад по месяцам, годам и десятилетиям.
UWP и WinUI 2
Важно!
Сведения и примеры в этой статье оптимизированы для приложений, использующих Windows App SDK и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. Сведения и примеры для конкретной платформы см. в справочнике по API UWP.
Этот раздел содержит сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.
API для этого элемента управления существуют в пространстве имен Windows.UI.Xaml.Controls .
- API UWP:класс CalendarView, событие SelectedDatesChanged
- Откройте приложение коллекции WinUI 2 и просмотрите CalendarView в действии. Приложения из коллекции WinUI 2 включают интерактивные примеры большинства элементов управления, возможностей и функций WinUI 2. Получите приложение из Microsoft Store или получите исходный код в GitHub.
Мы рекомендуем использовать последнюю версию WinUI 2 , чтобы получить самые актуальные стили и шаблоны для всех элементов управления. WinUI 2.2 или более поздней версии включает новый шаблон для этого элемента управления, использующий скругленные углы. Дополнительные сведения см. в разделе о радиусе угла.
Создание представления календаря
- Важные API:класс CalendarView, событие SelectedDatesChanged
Приложение коллекции WinUI 3 содержит интерактивные примеры большинства элементов управления, функций и функций WinUI 3. Получение приложения из Microsoft Store или получение исходного кода на GitHub
Этот пример демонстрирует, как создать простое представление календаря.
<CalendarView/>
Созданное представление календаря будет выглядеть следующим образом:
Выбора дат
По умолчанию для свойства SelectionMode задано значение Single. Это позволяет пользователю выбрать дату в календаре. Установите для SelectionMode значение None, чтобы отключить выбор даты.
Установите для SelectionMode значение Multiple, чтобы пользователь мог выбрать несколько дат. Чтобы программным способом выбрать несколько дат, добавьте объекты DateTime/DateTimeOffset в коллекцию SelectedDates, как показано здесь:
calendarView1.SelectedDates.Add(DateTimeOffset.Now);
calendarView1.SelectedDates.Add(new DateTime(1977, 1, 5));
Пользователь может отменить выбор даты, нажав эту дату в сетке календаря.
Можно обработать событие SelectedDatesChanged так, чтобы оно получало оповещение в случае изменения коллекции SelectedDates.
Примечание
Важные сведения о значениях даты см. в разделе Значения DateTime и Calendar статьи "Элементы управления датой и временем".
Настройка вида представления календаря
Представление календаря состоит как из элементов XAML , определенных в ControlTemplate, так и визуальных элементов, обработанных непосредственно элементом управления.
- Элементы XAML, определенные в шаблоне элементов управления, включают границу, которая содержит элемент управления, заголовок, кнопки "Назад" и "Далее", а также элементы DayOfWeek. Можно задать стиль и изменить шаблон этих элементов, как и любого другого элемента управления XAML.
- Сетка календаря состоит из объектов CalendarViewDayItem. Задать стиль и изменить шаблон этих элементов невозможно, но для настройки их внешнего вида предоставляются различные свойства.
На данной диаграмме показаны элементы, которые составляют представление месяца в календаре. См. подробнее в разделе "Примечания" в описании класса CalendarViewDayItem.
В следующей таблице приведен список свойств, которые можно редактировать для изменения внешнего вида элементов календаря.
По умолчанию в представлении месяца отображается одновременно 6 недель. Чтобы изменить количество отображаемых недель, задайте свойство NumberOfWeeksInView. Минимальное количество отображаемых недель — 2; максимальное — 8.
По умолчанию представления года и десятилетия отображаются в сетке 4x4. Чтобы изменить количество строк или столбцов, вызовите SetYearDecadeDisplayDimensions с желаемым количеством строк и столбцов. Это изменит сетку для представлений и года, и десятилетия.
Здесь представления года и десятилетия устанавливаются для отображения в сетке 3x4.
calendarView1.SetYearDecadeDisplayDimensions(3, 4);
По умолчанию минимальная дата, отображаемая в представлении календаря, —100 лет до текущей даты, а максимальная дата — 100 лет после текущей даты. Чтобы изменить минимальную и максимальную даты, отображаемые в календаре, задайте свойства MinDate и MaxDate.
calendarView1.MinDate = new DateTime(2000, 1, 1);
calendarView1.MaxDate = new DateTime(2099, 12, 31);
Обновление элементов дня в календаре
Каждый день в календаре представлен объектом CalendarViewDayItem. Для получения доступа к отдельному элементу дня и использования его свойств и методов, обработайте событие CalendarViewDayItemChanging и используйте свойство Item аргументов события для доступа к CalendarViewDayItem.
Чтобы запретить выбор дня в представлении календаря, установите для свойства CalendarViewDayItem.IsBlackout значение true.
Чтобы отобразить контекстные данные о плотности событий дня, вызовите метод CalendarViewDayItem.SetDensityColors. Можно отобразить от 0 до 10 шкал плотности для каждого дня и установить цвет для каждой шкалы.
Вот некоторые элементы дня в календаре. Дни 1 и 2 затемнены. Для дней 2, 3 и 4 установлены разные шкалы плотности.
Поэтапная отрисовка
Представление календаря может содержать большое количество объектов CalendarViewDayItem. Чтобы обеспечить быстрое реагирование пользовательского интерфейса и плавные переходы в календаре, представление календаря поддерживает поэтапную отрисовку. Позволяет разбить обработку элемента дня на этапы. Если день перемещен из представления до завершения выполнения всех этапов, время на попытку обработки и отрисовки этого элемента больше тратиться не будет.
Этот пример иллюстрирует поэтапную отрисовку представления календаря для планирования встреч.
- На этапе 0 отрисовывается элемент дня по умолчанию.
- На этапе 1 затемняются даты, которые нельзя забронировать. Сюда входят прошлые даты, воскресенья, а также полностью забронированные даты.
- На этапе 2 проверяется каждая встреча, забронированная на этот день. Для каждой подтвержденной встречи отображается зеленая шкала плотности, а для каждойнеподтвержденной встречи — синяя.
Класс Bookings в этом примере взят из несуществующего приложения резервирования встреч и не отображается.
<CalendarView CalendarViewDayItemChanging="CalendarView_CalendarViewDayItemChanging"/>
private void CalendarView_CalendarViewDayItemChanging(CalendarView sender,
CalendarViewDayItemChangingEventArgs args)
{
// Render basic day items.
if (args.Phase == 0)
{
// Register callback for next phase.
args.RegisterUpdateCallback(CalendarView_CalendarViewDayItemChanging);
}
// Set blackout dates.
else if (args.Phase == 1)
{
// Blackout dates in the past, Sundays, and dates that are fully booked.
if (args.Item.Date < DateTimeOffset.Now ||
args.Item.Date.DayOfWeek == DayOfWeek.Sunday ||
Bookings.HasOpenings(args.Item.Date) == false)
{
args.Item.IsBlackout = true;
}
// Register callback for next phase.
args.RegisterUpdateCallback(CalendarView_CalendarViewDayItemChanging);
}
// Set density bars.
else if (args.Phase == 2)
{
// Avoid unnecessary processing.
// You don't need to set bars on past dates or Sundays.
if (args.Item.Date > DateTimeOffset.Now &&
args.Item.Date.DayOfWeek != DayOfWeek.Sunday)
{
// Get bookings for the date being rendered.
var currentBookings = Bookings.GetBookings(args.Item.Date);
List<Color> densityColors = new List<Color>();
// Set a density bar color for each of the days bookings.
// It's assumed that there can't be more than 10 bookings in a day. Otherwise,
// further processing is needed to fit within the max of 10 density bars.
foreach (booking in currentBookings)
{
if (booking.IsConfirmed == true)
{
densityColors.Add(Colors.Green);
}
else
{
densityColors.Add(Colors.Blue);
}
}
args.Item.SetDensityColors(densityColors);
}
}
}
Получение примера кода
- Пример коллекции WinUI — просмотр всех элементов управления XAML в интерактивном формате.
Похожие статьи
Windows developer
Обратная связь
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделе https://aka.ms/ContentUserFeedback.
Отправить и просмотреть отзыв по