![\"Frame-Element](\"..\/fileadmin\/_temp_\/2021_03\/pic_266_001.png\")
<\/p>\n<\/p>\n
Bild 1: Frame-Element mit Schaltflächen<\/span><\/b><\/p>\n Wenn Sie auf einfache Weise verschiedene Seiten in einer WPF-Benutzeroberfläche anzeigen wollen, bietet sich die Nutzung des Frame-Steuerelements zur Anzeige von Page<\/b>-Elementen an. Das Frame-Steuerelement ist dabei der Rahmen, die Page-Elemente sind im Prinzip Fenster ohne Fensterrahmen. Dieser Artikel zeigt, welche Möglichkeiten das Frame-Element bietet, wie Sie Page-Elemente darin anzeigen und wie die Steuerung der Anzeige verschiedener Page-Elemente funktioniert.<\/b><\/p>\n Wenn Sie eine einfache WPF-Anwendung bauen, die ein Ribbon zur Steuerung der Anwendung enthält und einen Bereich, der die zu bearbeitenden Daten anzeigen soll, ist das Frame<\/b>-Steuerelement in Kombination mit Page<\/b>-Elementen für die einzelnen Seiten eine praktische Lösung. Das Ribbon würden Sie dabei in der oberen Zeile eines Grid<\/b>-Elements darstellen, das Frame<\/b>-Element in der zweiten Zeile. Wir wollen im Beispiel nicht direkt mit einem Ribbon arbeiten, sondern mit einfachen Schaltflächen, also fügen wir diese in der ersten Zeile eines Grids ein und das Frame-Element direkt darunter (siehe Bild 1). <\/p>\n Bild 1: Frame-Element mit Schaltflächen<\/span><\/b><\/p>\n Der Code für die folgenden Beispiele ist wie folgt aufgebaut:<\/p>\n Wir definieren hier also ein Grid <\/b>mit zwei Zeilen, von denen die erste die in einem StackPanel <\/b>angeordneten Schaltflächen enthält und die zweite das Frame<\/b>-Steuerelement. Wie kommen nun die Pages ins Spiel Diese fügen wir zunächst als Page<\/b>-Elemente zum Projekt hinzu – zunächst einmal drei Stück.<\/p>\n Dazu nutzen wir den Befehl Hinzufügen|Seite (WPF)… <\/b>aus dem Kontextmenü des Projekt<\/b>-Elements im Projektmappen-Explorer und geben im nun erscheinenden Dialog Neues Element hinzufügen <\/b>den Namen des hinzuzufügenden Page<\/b>-Elements an – hier Seite1.xaml<\/b> (siehe Bild 2).<\/p>\n Bild 2: Hinzufügen eines Page-Elements<\/span><\/b><\/p>\n Damit wir in der Anwendung erkennen können, welches Page<\/b>-Element wir jeweils anzeigen, fügen wir jedem Page<\/b>-Element ein Label hinzu – beispielsweise mit dem Text Seite 1<\/b>:<\/p>\n Im Gegensatz zur Darstellung eines Fensters (Window<\/b>-Elements) mit dem Fensterrahmen und dem weißen Hintergrund erscheint das Page<\/b>-Element ohne ausgeprägten Rahmen und hat auch keinen Hintergrund, das heißt, es ist transparent (siehe Bild 3). Darüber hinaus enthält es jedoch in der XAML-Definition die gleichen Eigenschaften wie ein Window<\/b>-Element. Wenn Sie beispielsweise Ressourcen definieren wollen, um seitenweit gültige Eigenschaften für Steuerelemente zu definieren, nutzen Sie nicht das Element Window.Resources<\/b>, sondern Page.Resources<\/b>:<\/p>\n Bild 3: Darstellung eines Page-Elements im Entwurf<\/span><\/b><\/p>\n Wie sorgen wir nun für die Anzeige von Page<\/b>-Elementen im Frame<\/b>-Element<\/p>\n Dazu können wir verschiedene Techniken nutzen:<\/p>\n Die erste Möglichkeit der Anzeige eines Page<\/b>-Elements ist die Content<\/b>-Eigenschaft des Frame<\/b>-Elements.<\/p>\n Wir hinterlegen die folgende Methode für die Schaltfläche btnSeite1<\/b>:<\/p>\n Diese erstellt eine neue Instanz des Page<\/b>-Elements Seite1 <\/b>und weist diese der Eigenschaft Content <\/b>des Frame-Elements namens fra <\/b>zu. Das Ergebnis sehen Sie in Bild 4.<\/p>\n Bild 4: Anzeigen eines Page-Elements im Frame-Element<\/span><\/b><\/p>\n Auf die gleiche Weise können wir auch die übrigen Seiten anzeigen. Eigentlich reicht diese Technik schon aus, wenn Sie einfach nur über ein Ribbon die verschiedenen Elemente der Benutzeroberfläche einer Anwendung einblenden möchten.<\/p>\n Vielleicht möchten Sie einen geöffneten Bereich wieder schließen – beispielsweise, indem Sie eine dafür vorgesehene Schaltfläche mit dem Text Schließen <\/b>oder OK <\/b>betätigen.<\/p>\n Eine Möglichkeit ist das Einstellen der Content<\/b>-Eigenschaft des Frame<\/b>-Elements auf den Wert Nothing<\/b>. Damit wird das Frame<\/b>-Element geleert. Fügen wir dem Hauptfenster eine Schaltfläche namens btnLeeren<\/b> hinzu, können wir für ihr Click<\/b>-Ereignis die folgende Methode hinterlegen:<\/p>\n Wenn wir nun eines der Page<\/b>-Elemente geladen haben und diese Schaltfläche betätigen, wird das Frame<\/b>-Element geleert.<\/p>\n Möchten Sie weiterlesen? Dann lösen Sie Ihr Ticket!<\/span><\/p>\n<Grid>\r\n <Grid.RowDefinitions>\r\n <RowDefinition Height=\"Auto\"><\/RowDefinition>\r\n <RowDefinition Height=\"*\"><\/RowDefinition>\r\n <\/Grid.RowDefinitions>\r\n <StackPanel Grid.Row=\"0\" Orientation=\"Horizontal\">\r\n <Button x:Name=\"btnSeite1\" Content=\"Seite 1 anzeigen\" Click=\"btnSeite1_Click\"\/>\r\n <Button x:Name=\"btnSeite2\" Content=\"Seite 2 anzeigen\" Click=\"btnSeite2_Click\"\/>\r\n <Button x:Name=\"btnSeite3\" Content=\"Seite 3 anzeigen\" Click=\"btnSeite3_Click\"\/>\r\n ... weitere Steuerelemente\r\n <\/StackPanel>\r\n <Frame x:Name=\"fra\" Grid.Row=\"1\"><\/Frame>\r\n<\/Grid><\/pre>\n
![\"Hinzufügen](\"..\/fileadmin\/_temp_\/2021_03\/pic_266_002.png\")
<\/p>\n<Page x:Class=\"Seite1\" ... Title=\"Seite1\">\r\n <Grid>\r\n <Label>Seite 1<\/Label>\r\n <\/Grid>\r\n<\/Page><\/pre>\n
![\"Darstellung](\"..\/fileadmin\/_temp_\/2021_03\/pic_266_003.png\")
<\/p>\n<Page x:Class=\"Seite2\"\r\n ...\r\n Title=\"Seite2\">\r\n <Page.Resources>\r\n <Style TargetType=\"Label\">\r\n <Setter Property=\"Margin\" Value=\"5\"><\/Setter>\r\n <\/Style>\r\n <\/Page.Resources>\r\n ...<\/pre>\n
Page-Element im Frame-Element anzeigen<\/h2>\n
\n
Page-Element mit Content anzeigen<\/h2>\n
Private Sub <\/span>btnSeite1_Click(sender As Object<\/span>, e As <\/span>RoutedEventArgs)\r\n Dim <\/span>pgeSeite1 As <\/span>New<\/span> Seite1\r\n fra.Content = pgeSeite1\r\nEnd Sub<\/span><\/pre>\n![\"Anzeigen](\"..\/fileadmin\/_temp_\/2021_03\/pic_266_004.png\")
<\/p>\nSeiten ausblenden beziehungsweise schließen<\/h2>\n
Private Sub <\/span>btnLeeren_Click(sender As Object<\/span>, e As <\/span>RoutedEventArgs)\r\n fra.Content = Nothing\r\nEnd Sub<\/span><\/pre>\n
\nHier geht es zur Bestellung des Jahresabonnements des Magazins Visual Basic Entwickler<\/strong>:<\/span>
\nZur Bestellung ...<\/a><\/span>
\nDanach greifen Sie sofort auf alle rund 200 Artikel<\/strong> unseres Angebots zu - auch auf diesen hier!<\/span>
\nOder haben Sie bereits Zugangsdaten? Dann loggen Sie sich gleich hier ein:<\/span><\/p>\n<\/div>\n\n\t\n\t