Seiten

Dienstag, 16. November 2010

How To: Erstellen eines nicht rechteckigen ChildWindow - Teil 2

Dies ist der zweite Teil über das Erstellen eines nicht rechteckigen ChildWindow. In Teil 1 habe ich die grundsätzliche Vorgehensweise beschrieben, also welche Veränderungen an der Vorlage des ChildWindow vorgenommen werden müssen.

In diesem Teil 2 beschreibe ich, wie man in einem kreisförmigen ChildWindow mit Hilfe eines PathListBox-Steuerelements Inhalt platzieren kann, der zu der runden Form paßt.

Anmerkung

Ich habe das Design der Beispielanwendung in der Zwischenzeit etwas verändert. Die räumliche Anordnung und die Farbgestaltung des CloseButton sind anders. Außerdem habe ich einige DropShadow-Effekte hinzugefügt. Schaut Euch dafür bitte den Quellcode an. So sieht unser Ausgangsbeispiel mittlerweile aus:



Und jetzt weiter mit dem Tutorial.

Schritt 3 - Gestaltung des Inhalts

Glücklicherweise steht seit Silverlight 4 das PathListBox-Steuerelement zur Verfügung. Mit diesem Steuerelement ist die Anordnung beliebigen Inhalts in freier Form ein Kinderspiel.

Als erstes müssen wir noch einmal kurz in die Vorlage des ChildWindow. Dort wird das Border-Steuerelement selektiert, in dem sich der ContentPresenter befindet. Für dieses Border-Steuerelement wird der Wert für "Row" auf 0 und der Wert für "RowSpan" auf 2 gesetzt.



Dadurch ist sichergestellt, dass der Inhalt nun auf der gesamten Oberfläche des ChildWindow dargestellt wird.

Jetzt wechseln wir aus der Vorlagen-Ansicht zurück zum ChildWindow selbst.

Wir wollen ein PathListBox-Steuerelement verwenden und fügen dazu in einem ersten Schritt zu dem LayoutRoot des ChildWindow ein Ellipse-Steuerelement hinzu. Die Werte für die Eigenschaften Breite und Höhe werden beide auf "Auto" gesetzt. Die Werte für die Eigenschaften Fill und Stroke werden jeweils zurückgesetzt. HorizontalAlignment und VerticalAlignment werden beide auf "Stretch" gesetzt. Der Wert für "Margin" wird einheitlich angepaßt, so dass der äußere Rand des Kreises in der Mitte des "Donut" liegt. Das Ganze sieht dann so aus:



Dann wird das Ellipse-Steuerelement selektiert -> Rechtklick -> Pfad -> In Pfad konvertieren. Dann das LayoutRoot selektieren und ein PathListBox-Steuerelement hinzufügen. Die Werte für "Height" und "Width" des PathListBox-Steuerelements werden auf "Auto" gesetzt. HorizontalAlignment und VerticalAlignment werden beide auf "Stretch" gesetzt.

Dann wird dem Layoutroot noch ein TextBlock-Steuerelement hinzugefügt. Der Text dieses TextBlocks soll später auf dem Pfad dargestellt werden. Der Wert für die Foreground-Eigenschaft des TextBlocks wird zurückgesetzt.

In der Registerkarte "Eigenschaften" des PathListBox-Steuerelements wird in der Rubrik "Layoutpfade" mit dem Mauszeiger der kleine runde Pinökel oben rechts per Klick selektiert.



Der Mauszeiger verändert sich und mit dem veränderten Mauszeiger wird auf das Path-Steuerelement geklickt.

Jetzt in den Eigenschaften des PathListBox-Steuerelements die erweiterten Optionen für die Eigenschaft "ItemsSource" öffnen und "Elementeigenschaftsbindung ..." auswählen:



Der Mauszeiger verändert sich und mit dem veränderten Mauszeiger klicken wir auf das TextBlock-Steuerelement. Es erscheint der folgende Dialog:



... der mit "Ok" bestätigt wird. Damit haben wir den Text des TextBlock als ItemsSource an die PathListBox gebunden. Wenn diese Elementeigenschaftsbindung funktioniert hat, sollte der auf dem Pfad jetzt der Schriftzug "TextBlock" erscheinen:



Jetzt brauchen wir nur die Darstellung des Textes anzupassen. Das erfolgt über die PathListBox. Der Wert für "Orientation" wird aus "Orient To Path" gesetzt. Die Schriftart und Größe werden wie üblich verändert. Über die Foreground-Eigenschaft erhält der Text eine etwas hellere Schriftfarbe. Und die "Start"-Eigenschaft der PathListBox verändern wir so, dass der Text oben links anfängt. Im Ergebnis sollte der Text, hier "I like round shaped ChildWindows", im ChildWindow folgendermaßen dargestellt sein:



F5 drücken, das ChildWindow aufrufen und fertig ist das vollständige ChildWindow.







Das war's. Viel Spass damit.

Download: Vollständiger Quellcode für das hier entwickelte Beispielprojekt.

Keine Kommentare:

Kommentar veröffentlichen