{"id":55000245,"date":"2020-12-01T00:00:00","date_gmt":"2020-12-23T17:27:31","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=245"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"Symbolleisten_mit_dem_ToolBarSteuerelement","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/Symbolleisten_mit_dem_ToolBarSteuerelement\/","title":{"rendered":"Symbolleisten mit dem ToolBar-Steuerelement"},"content":{"rendered":"

Bei Anwendungen, die eine Menüleiste statt des Ribbons verwenden, finden Sie meist auch noch Symbolleisten vor. Davon gibt es im Gegensatz zur Menüleiste manchmal nicht nur eine, sondern mehrere. Symbolleisten zeichnen sich außerdem dadurch aus, dass Sie diese verschieben können und dass sie keine Untermenüs enthalten. Außerdem finden Sie die Befehle meist in Form einfacher Schaltflächen mit entsprechenden Symbolen vor, damit diese wenig Platz wegnehmen. Auch für eine WPF-Anwendung können Sie Symbolleisten hinzufügen. Wie das geht, zeigt der vorliegende Artikel.<\/b><\/p>\n

Im Artikel Das Menu-Steuerelement <\/b>(www.datenbankentwickler.net\/244<\/b>) haben wir bereits gezeigt, wie Sie eine Menüleiste zum Fenster einer Anwendung hinzufügen. Es gibt immer nur eine Menüleiste je Fenster, dem Sie ein oder mehrere Elemente in der obersten Ebene hinzufügen können. Diese stellen normalerweise per Mausklick eine aufklappbare Liste von Befehlen oder weiteren Untermenüs zur Verfügung. Bei den Symbolleisten ist es etwas anders: Sie können auch mehr als eine Symbolleiste hinzufügen, die nach dem Wunsch des Benutzers angeordnet werden kann. In den Beispielen zu diesem Artikel verwenden wir wieder ein übergeordnetes DockPanel<\/b>-Element, dem wir eine Menüleiste und eine Symbolleiste hinzufügen.<\/p>\n

Aufbau einer Symbolleiste<\/b><\/p>\n

Bei der Menüleiste ist der Aufbau eindeutig: Es gibt ein Menu<\/b>-Element, das im DockPanel<\/b>-Element oben angedockt wird und das die benötigten Menüelemente enthält. Bei der Symbolleiste verwenden wir noch ein zusätzliches Element, nämlich das ToolBarTray <\/b>in der obersten Ebene. Dieses ordnen Sie wie das Menu<\/b>-Element dem DockPanel<\/b>-Element unter (siehe Beispielprojekt, MainWindow.xaml<\/b>, Beispiel 1<\/b>):<\/p>\n

<Window x:Class=\"MainWindow\" ... Title=\"MainWindow\" Height=\"350\" Width=\"600\">\r\n     <DockPanel>\r\n         <Menu DockPanel.Dock=\"Top\">...<\/Menu>\r\n         <ToolBarTray DockPanel.Dock=\"Top\"><\/pre>\n
Das ToolBarTray<\/b>-Element kann dann ein oder mehrerere ToolBar<\/b>-Elemente enthalten, die wiederum Button<\/b>-Elemente mit dem Befehlen bereithalten:<\/p>\n
             <ToolBar>\r\n                 <Button Command=\"Cut\" Content=\"Ausschneiden\"><\/Button>\r\n                 <Button Command=\"Copy\" Content=\"Kopieren\"><\/Button>\r\n                 <Button Command=\"Paste\" Content=\"Einfügen\"><\/Button><\/pre>\n
Zum Abschluss werden die geöffneten Elemente ToolBar <\/b>und ToolBarTray <\/b>wieder geschlossen und es folgt beispielsweise ein Grid-Element, das die übrigen Steuerelemente des Fensters enthält:<\/p>\n
             <\/ToolBar>\r\n         <\/ToolBarTray>\r\n         <Grid>...<\/Grid>\r\n     <\/DockPanel>\r\n<\/Window><\/pre>\n
In Bild 1 sehen Sie die resultierende Symbolleiste. In diesem Fall haben wir einige eingebaute Befehle über das Command<\/b>-Attribut verfügbar gemacht – Cut<\/b>, Copy <\/b>und Paste<\/b>. Leider erkennt die Anwendung nicht, dass diese hier in einer Symbolleiste abgebildet werden sollen und zeigt keine Icons, sondern nur den Text an. Das können wir ändern!<\/p>\n
\"Fenster<\/p>\n
Bild 1: Fenster mit Symbolleiste<\/span><\/b><\/p>\n
Symbolleiste mit Icons<\/b><\/p>\n
Wenn wir statt der Beschriftungen für die eingebauten Befehle Cut<\/b>, Copy <\/b>und Paste <\/b>nur Icons anzeigen wollen, müssen wir diese zunächst zum Projekt hinzufügen. Dazu legen wir im Projektmappen-Explorer ein neues Verzeichnis namens Icons <\/b>an und fügen diesem die benötigten Icons hinzu (siehe Bild 2).<\/p>\n
\"Hinzufügen<\/p>\n
Bild 2: Hinzufügen von Icons zum Projekt<\/span><\/b><\/p>\n
Danach bearbeiten wir die Steuerelemente der Symbolleiste in der XAML-Definition so, dass sie statt Text die Icons anzeigen. Dazu entfernen wir die Content<\/b>-Attribute und fügen jeweils ein Image<\/b>-Element hinzu. Dieses erhält für das Attribut Source <\/b>den Pfad zu der Bilddatei im Projektverzeichnis (siehe Beispielprojekt, MainWindow.xaml<\/b>, Beispiel 2<\/b>):<\/p>\n
<ToolBarTray DockPanel.Dock=\"Top\">\r\n     <ToolBar>\r\n         <Button Command=\"Cut\">\r\n             <Image Source=\"Icons\/cut.png\"><\/Image>\r\n         <\/Button>\r\n         <Button Command=\"Copy\">\r\n             <Image Source=\"Icons\/copy.png\"><\/Image>\r\n         <\/Button>\r\n         <Button Command=\"Paste\">\r\n             <Image Source=\"Icons\/clipboard_paste.png\"><\/Image>\r\n         <\/Button>\r\n     <\/ToolBar>\r\n<\/ToolBarTray><\/pre>\n
Das Ergebnis sehen Sie in Bild 3. Interessanterweise werden die Schaltflächen mit den Icons im Gegensatz zu den reinen Text-Schaltflächen nicht in Abhängigkeit vom Kontext als aktiviert oder deaktiviert gekennzeichnet. So sollte zum Beispiel die Ausschneiden<\/b>-Schaltfläche nur als aktiv dargestellt werden, wenn im Textfeld darunter ein Text markiert ist. Das wollen wir später nachholen – erst einmal schauen wir uns an, wie wir eine weitere Symbolleiste hinzufügen und wie wir Icons und Texte auf einer Schaltfläche kombinieren können.<\/p>\n
\"Symbolleiste<\/p>\n
Bild 3: Symbolleiste mit Icons<\/span><\/b><\/p>\n
Eine zweite Symbolleiste hinzufügen<\/b><\/p>\n
Zum Hinzufügen einer zweiten Symbolleiste legen Sie einfach ein weiteres ToolBar<\/b>-Element im ToolBarTray<\/b>-Element an. Je nachdem, ob die zweite Symbolleiste vor oder hinter der ersten erscheinen soll, fügen Sie das neue ToolBar<\/b>-Element vor oder hinter einem bereits bestehenden ToolBar<\/b>-Element ein (siehe Beispielprojekt, MainWindow.xaml<\/b>, Beispiel 3<\/b>):<\/p>\n
<ToolBarTray DockPanel.Dock=\"Top\">\r\n     <ToolBar>\r\n         ... Steuerelemente\r\n     <\/ToolBar>\r\n     <ToolBar>\r\n         ... Steuerelemente\r\n     <\/ToolBar>\r\n<\/ToolBarTray><\/pre>\n
In diesem Fall werden die beiden Symbolleisten direkt nebeneinander angezeigt (siehe Bild 4). Es gibt jedoch die Möglichkeit, diese auch untereinander auszugeben.<\/p>\n
\"Zwei<\/p>\n
Bild 4: Zwei Symbolleisten nebeneinander<\/span><\/b><\/p>\n
Der einfachste Weg ist, dass der Benutzer die Symbolleisten einfach per Drag and Drop so positioniert, wie er sich diese wünscht (siehe Bild 5). Beim nächsten Start der Anwendung werden die Symbolleisten allerdings wieder so wie im XAML-Code definiert ausgegeben. Wie also können wir die Symbolleisten direkt beim Starten untereinander anzeigen<\/p>\n
\"Zwei<\/p>\n
Bild 5: Zwei Symbolleisten untereinander<\/span><\/b><\/p>\n
Symbolleistenposition relativ zu anderen Symbolleisten<\/b><\/p>\n
Wenn Sie mehr als eine Symbolleiste verwenden, also mehr als ein ToolBar<\/b>-Element innerhalb des ToolBarTray<\/b>-Elements einfügen, werden diese wie oben beschrieben einfach in der gleichen Reihenfolge nebeneinander angeordnet. Wenn Sie die Reihenfolge ändern möchten, ohne die Reihenfolge im Code zu ändern, können Sie das mit der Eigenschaft BandIndex <\/b>erledigen. BandIndex <\/b>ist ein 0<\/b>-basierter Index (siehe Beispielprojekt, MainWindow.xaml<\/b>, Beispiel 4<\/b>). Wenn Sie also für das erste ToolBar<\/b>-Element innerhalb des ToolBarTray<\/b>-Elements den Wert 0 <\/b>angeben, dann verbleibt es an der Position, die es vorher innehatte. Im folgenden Beispiel erhalten wir die Anordnung aus Bild 6:<\/p>\n
\"Standardreihenfolge\"<\/p>\n
Bild 6: Standardreihenfolge<\/span><\/b><\/p>\n
<ToolBarTray DockPanel.Dock=\"Top\">\r\n     <ToolBar>\r\n         <Button>Button in Toolbar 1<\/Button>\r\n     <\/ToolBar>\r\n     <ToolBar>\r\n         <Button>Button in Toolbar 2<\/Button>\r\n     <\/ToolBar>\r\n     <ToolBar>\r\n         <Button>Button in Toolbar 3<\/Button>\r\n     <\/ToolBar>\r\n<\/ToolBarTray><\/pre>\n
Möchten Sie weiterlesen? Dann lösen Sie Ihr Ticket!<\/span>
\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
\n\n\t\t\n\t\t