Notitie
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen u aan te melden of de directory te wijzigen.
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen de mappen te wijzigen.
Met een agendaweergave kan een gebruiker een agenda bekijken en ermee werken die ze per maand, jaar of decennium kunnen navigeren. Een gebruiker kan één datum of een datumbereik selecteren. Het heeft geen kiezeroppervlak en de agenda is altijd zichtbaar.
Is dit de juiste controle?
Gebruik een agendaweergave om een gebruiker één datum of een bereik met datums te laten kiezen uit een altijd zichtbare agenda.
Als u een gebruiker meerdere datums tegelijk wilt laten selecteren, moet u een agendaweergave gebruiken. Als u een gebruiker slechts één datum wilt laten kiezen en een agenda niet altijd zichtbaar hoeft te zijn, kunt u overwegen een besturingselement voor datumkiezer of datumkiezer te gebruiken.
Zie het artikel Datum- en tijdbesturingselementen voor meer informatie over het kiezen van het juiste besturingselement.
Voorbeelden
De kalenderweergave bestaat uit drie afzonderlijke weergaven: de maandweergave, de jaarweergave en de decenniumweergave. Standaard wordt de maandweergave geopend. U kunt een opstartweergave opgeven door de eigenschap DisplayMode in te stellen.
Gebruikers klikken op de koptekst in de maandweergave om de jaarweergave te openen en klik op de kop in de jaarweergave om de tienjarige weergave te openen. Gebruikers kiezen een jaar in de tienjarige weergave om terug te keren naar de jaarweergave en kiezen een maand in de jaarweergave om terug te keren naar de maandweergave. De twee pijlen aan de zijkant van de koptekst navigeren vooruit of achteruit per maand, per jaar of met tien jaar.
Een agendaweergave maken
- Belangrijke API's:CalendarView-klasse, selectedDatesChanged-gebeurtenis
De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op
In dit voorbeeld ziet u hoe u een eenvoudige agendaweergave maakt.
<CalendarView/>
De resulterende agendaweergave ziet er als volgt uit:
Datums selecteren
De eigenschap SelectionMode is standaard ingesteld op Single. Hiermee kan een gebruiker één datum in de agenda kiezen. Stel SelectionMode in op Geen om de datumselectie uit te schakelen.
Stel SelectionMode in op Multiple om een gebruiker meerdere datums te laten selecteren. U kunt meerdere datums programmatisch selecteren door DateTime/DateTimeOffset-objecten toe te voegen aan de verzameling SelectedDates , zoals hier wordt weergegeven:
calendarView1.SelectedDates.Add(DateTimeOffset.Now);
calendarView1.SelectedDates.Add(new DateTime(1977, 1, 5));
Een gebruiker kan de selectie van een geselecteerde datum opheffen door erop te klikken of tikken in het agendaraster.
U kunt de gebeurtenis SelectedDatesChanged afhandelen om op de hoogte te worden gesteld wanneer de verzameling SelectedDates is gewijzigd.
Opmerking
Zie datum/tijd- en kalenderwaarden in het artikel Over datum- en tijdbesturingselementen voor belangrijke informatie over datumwaarden.
Het uiterlijk van de agendaweergave aanpassen
De agendaweergave bestaat uit zowel XAML-elementen die zijn gedefinieerd in controltemplate als visuele elementen die rechtstreeks door het besturingselement worden weergegeven.
- De XAML-elementen die in de besturingssjabloon zijn gedefinieerd, bevatten de rand die het besturingselement, de koptekst, vorige en volgende knoppen en DayOfWeek-elementen omsluit. U kunt deze elementen stylen en opnieuw sjabloneren, net als elk XAML-besturingselement.
- Het agendaraster bestaat uit CalendarViewDayItem-objecten . U kunt deze elementen niet opmaken of herstellen, maar er zijn verschillende eigenschappen beschikbaar waarmee u het uiterlijk kunt aanpassen.
In dit diagram ziet u de elementen waaruit de maandweergave van de agenda bestaat. Zie de opmerkingen in de klasse CalendarViewDayItem voor meer informatie.
Deze tabel bevat de eigenschappen die u kunt wijzigen om het uiterlijk van agenda-elementen te wijzigen.
Standaard wordt in de maandweergave 6 weken tegelijk weergegeven. U kunt het aantal weken wijzigen dat wordt weergegeven door de eigenschap NumberOfWeeksInView in te stellen. Het minimum aantal weken dat moet worden weergegeven, is 2; het maximum is 8.
Standaard worden de jaar- en decenniumweergaven getoond in een 4x4-raster. Als u het aantal rijen of kolommen wilt wijzigen, roept u SetYearDecadeDisplayDimensions aan met het gewenste aantal rijen en kolommen. Hierdoor verandert de weergave voor zowel de jaarweergave als de decenniumweergave.
Hier zijn het jaar- en decenniumweergaven ingesteld op een 3x4-rasterweergave.
calendarView1.SetYearDecadeDisplayDimensions(3, 4);
Standaard is de minimumdatum die wordt weergegeven in de kalenderweergave 100 jaar vóór de huidige datum en is de maximumdatum die wordt weergegeven 100 jaar voorbij de huidige datum. U kunt de minimum- en maximumdatums wijzigen die in de agenda worden weergegeven door de eigenschappen MinDate en MaxDate in te stellen.
calendarView1.MinDate = new DateTime(2000, 1, 1);
calendarView1.MaxDate = new DateTime(2099, 12, 31);
Agendadagitems bijwerken
Elke dag in de agenda wordt vertegenwoordigd door een CalendarViewDayItem-object . Als u toegang wilt krijgen tot een afzonderlijk dagitem en de eigenschappen en methoden ervan wilt gebruiken, verwerkt u de gebeurtenis CalendarViewDayItemChanging en gebruikt u de eigenschap Item van de gebeurtenis args voor toegang tot de CalendarViewDayItem.
U kunt een dag niet selecteerbaar maken in de agendaweergave door de eigenschap CalendarViewDayItem.IsBlackout in te stellen op true.
U kunt contextuele informatie over de dichtheid van gebeurtenissen per dag weergeven door de methode CalendarViewDayItem.SetDensityColors aan te roepen. U kunt 0 tot 10 dichtheidsbalken voor elke dag weergeven en de kleur van elke staaf instellen.
Hier volgen enkele dagitems in een agenda. Dagen 1 en 2 zijn zwart. Dagen 2, 3 en 4 hebben verschillende dichtheidsbalken ingesteld.
Gefaseerde rendering
Een agendaweergave kan een groot aantal CalendarViewDayItem-objecten bevatten. Om de gebruikersinterface responsief te houden en vloeiende navigatie door de agenda mogelijk te maken, ondersteunt de agendaweergave gefaseerde rendering. Hiermee kunt u de verwerking van een dagitem in fasen opsplitsen. Als een dag uit zicht wordt verplaatst voordat alle fasen zijn voltooid, wordt er geen extra tijd meer besteed aan het verwerken en weergeven van dat item.
In dit voorbeeld ziet u een gefaseerde weergave van een agendaweergave voor het plannen van afspraken.
- In fase 0 wordt het standaard dagitem weergegeven.
- In fase 1 blokkeer je datums die niet kunnen worden geboekt. Dit omvat eerdere datums, zondagen en datums die al vol zijn geboekt.
- In fase 2 controleert u elke afspraak die voor de dag is geboekt. U ziet een groene dichtheidsbalk voor elke bevestigde afspraak en een blauwe dichtheidsbalk voor elke voorlopige afspraak.
De Bookings-klasse in dit voorbeeld is afkomstig van een fictieve afspraakboekings-app en wordt niet weergegeven.
<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);
}
}
}
UWP en WinUI 2
Belangrijk
De informatie en voorbeelden in dit artikel zijn geoptimaliseerd voor apps die gebruikmaken van de Windows App SDK en WinUI 3, maar zijn algemeen van toepassing op UWP-apps die Gebruikmaken van WinUI 2. Zie de UWP API-referentie voor platformspecifieke informatie en voorbeelden.
Deze sectie bevat informatie die u nodig hebt om het besturingselement te gebruiken in een UWP- of WinUI 2-app.
API's voor deze controle bevinden zich in de naamruimte Windows.UI.Xaml.Controls.
- UWP-API's:CalendarView-klasse, SelectedDatesChanged-gebeurtenis
- Open de App WinUI 2 Gallery en bekijk de AgendaWeergave in actie. De WinUI 2 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 2. Download de app uit de Microsoft Store of bezoek GitHubvoor de broncode.
U wordt aangeraden de nieuwste WinUI 2 te gebruiken om de meest recente stijlen en sjablonen voor alle besturingselementen te verkrijgen. WinUI 2.2 of hoger bevat een nieuwe sjabloon voor dit besturingselement dat gebruikmaakt van afgeronde hoeken. Zie Hoekstraal voor meer informatie.
Verwante artikelen
Met ons samenwerken op GitHub
De bron voor deze inhoud vindt u op GitHub, waar u ook problemen en pull-aanvragen kunt maken en controleren. Bekijk onze gids voor inzenders voor meer informatie.
Windows developer