{"id":55000266,"date":"2021-06-01T00:00:00","date_gmt":"2021-11-10T09:12:10","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=266"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"Navigieren_im_FrameSteuerelement","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/Navigieren_im_FrameSteuerelement\/","title":{"rendered":"Navigieren im Frame-Steuerelement"},"content":{"rendered":"

\"Frame-Element<\/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

\"Frame-Element<\/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

<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
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
\"Hinzufügen<\/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
<Page x:Class=\"Seite1\" ... Title=\"Seite1\">\r\n     <Grid>\r\n         <Label>Seite 1<\/Label>\r\n     <\/Grid>\r\n<\/Page><\/pre>\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
\"Darstellung<\/p>\n
Bild 3: Darstellung eines Page-Elements im Entwurf<\/span><\/b><\/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
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