{"id":55000239,"date":"2020-12-01T00:00:00","date_gmt":"2020-12-23T15:50:45","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=239"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"Das_Kalendersteuerelement","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/Das_Kalendersteuerelement\/","title":{"rendered":"Das Kalendersteuerelement"},"content":{"rendered":"

.NET bietet schon in der Grundausstattung sehr viele Steuerelemente für WPF-Anwendungen – hinzu kommen noch solche von Drittanbietern. Wir wollen nach und nach die WPF-Steuerelemente von .NET vorstellen, die wir noch nicht in den vorherigen Ausgaben beleuchtet haben. Und dort haben wir uns bisher ja nur um Standard-Steuerelemente wie TextBox, Button, ComboBox oder die diversen Steuerelemente zum Strukturieren anderer Steuerelemente gekümmert. Im vorliegenden Artikel schauen wir uns die Grundlagen zum Kalendersteuerelement an<\/b><\/p>\n

Wenn Sie die Entwurfsansicht einer XAML-Datei anzeigen und die Toolbox aktivieren, sehen Sie im oberen Bereich namens Häufig verwendete WPF-Steuerelemente <\/b>die oft verwendeten Steuerelemente wie Button<\/b>, CheckBox<\/b>, ComboBox <\/b>oder TextBox<\/b>. Der Bereich Alle WPF-Steuerelemente <\/b>ist oft ausgeblendet, liefert aber noch viele weitere Steuerelemente, die Sie ohne weitere Handgriffe in Ihre Anwendungen integrieren können. Diesen Bereich sehen Sie in Bild 1.<\/p>\n

\".WPF-Steuerelemente\"<\/p>\n

Bild 1: .WPF-Steuerelemente<\/span><\/b><\/p>\n

Im vorliegenden Artikel wollen wir mit dem Calendar<\/b>-Steuerelement beginnen. Dieses ziehen Sie im einfachsten Fall per Drag and Drop aus der Toolbox auf den aktuell geöffneten XAML-Entwurf (siehe Bild 2).<\/p>\n

\"Das<\/p>\n

Bild 2: Das Calendar-Steuerelement<\/span><\/b><\/p>\n

Im WPF-Code erscheint dann folgende Zeile:<\/p>\n

<Calendar HorizontalAlignment=\"Left\" Margin=\"33,27,0,0\" VerticalAlignment=\"Top\"\/><\/pre>\n
In der laufenden Anwendung zeigt das Calendar<\/b>-Steuerelement standardmäßig das aktuelle Datum an. Sie können andere Tage markieren, das aktuelle Datum bleibt jedoch farbig hinterlegt. Das Calendar<\/b>-Steuerelement zeigt immer sechs Zeilen mit den Tagen jeweils einer Woche an. Da kein Monat 42 Tage enthält, werden die Tage des vorherigen und des folgenden Monats eingeblendet. Klicken Sie einen Tag an, der nicht zum aktuellen Monat gehört, wechselt die Ansicht zum Monat dieses Tages und markiert diesen Tag. Eine andere Art, zum vorherigen oder zum nachfolgenden Monat zu wechseln, ist ein Mausklick auf einen der Pfeile links und rechts vom Monatsnamen.<\/p>\n
Größe anpassen<\/b><\/p>\n
Im Gegensatz zu vielen anderen Steuerelementen passt sich die Größe des Calendar<\/b>-Steuerelements nicht automatisch an das umliegende Element an. Wenn Sie beispielsweise einem Grid ein Button<\/b>-Element hinzufügen, nimmt dieses direkt den vollständigen Platz im Grid ein, solange Sie dies nicht mit entsprechenden Eigenschaften einschränken. Das Calendar-Steuerelement wird schlicht an der Stelle, an der es eingefügt wird, in der Standardgröße angezeigt.<\/p>\n
Startdatum einstellen<\/b><\/p>\n
Wenn Sie wollen, dass das Calendar<\/b>-Steuerelement ein anderes Datum als das des heutigen Tages anzeigt, können Sie dies mit der Eigenschaft DisplayDate <\/b>erreichen. Diese stellen Sie beispielsweise auf ein fixes Datum ein:<\/p>\n
<Calendar DisplayDate=\"1.1.2021\"><\/Calendar><\/pre>\n
Bereits in der Entwurfsansicht zeigt das Calendar<\/b>-Steuerelement dann den Monat Januar 2021 <\/b>an. Starten wir die Anwendung dann, bleibt es auch dabei – das Calendar<\/b>-Steuerelement zeigt den Januar 2021 <\/b>an, aber markiert nicht den 1.1.2021<\/b>. Liest man in der Dokumentation nach, erfährt man schnell, dass mit DisplayDate <\/b>tatsächlich nur der Monat des mit DisplayDate <\/b>angegebenen Datums eingestellt werden kann.<\/p>\n
Wie aber können wir tatsächlich das Datum festlegen, das beim Öffnen markiert werden soll Das erledigen Sie mit der Eigenschaft SelectedDate<\/b>:<\/p>\n
<Calendar SelectedDate=\"1.1.2021\"><\/Calendar><\/pre>\n
Damit wird das aktuelle Datum aber nach wie vor grau hinterlegt, während das mit SelectedDate <\/b>angegebene Datum einen hellblauen Hintergrund erhält (siehe Bild 3).<\/p>\n
\"Datum<\/p>\n
Bild 3: Datum einstellen mit SelectedDate<\/span><\/b><\/p>\n
Aktuelles Datum nicht markieren<\/b><\/p>\n
Wenn Sie nicht möchten, dass das aktuelle Datum durch einen farbigen Hintergrund markiert wird, stellen Sie die Eigenschaft IsTodayHighlighted <\/b>auf False <\/b>ein:<\/p>\n
<Calendar IsTodayHighlighted=\"False\"><\/Calendar><\/pre>\n
Anderen Wochentag als ersten Tag anzeigen<\/b><\/p>\n
Normalerweise zeigt das Calendar<\/b>-Steuerelement den Montag in der ersten Spalte an. Wenn Sie einen anderen Tag anzeigen wollen, beispielsweise den Samstag, legen Sie dies mit dem Attribut FirstDayOfWeek <\/b>fest, das die englische Wochentagsbezeichnung erwartet – hier beispielsweise Saturday<\/b>:<\/p>\n
<Calendar FirstDayOfWeek=\"Saturday\"><\/Calendar><\/pre>\n
Einzelnes Datum auswählen<\/b><\/p>\n
Das Attribut SelectionMode <\/b>legt fest, ob einzelne Datums-angaben oder Datumsbereiche ausgewählt werden können. Dazu stellt diese Eigenschaft die folgenden Werte zur Verfügung:<\/p>\n