| Produkt: | Elvis 3 |
| Version: | Elvis 3.x |
| Erstellt am: | 2016-10-11 |
Änderungen im XAML Code nötig
Beschreibung
In dieser Anleitung möchten wir zeigen, wie eine automatische Navigation für die Windows Bedienstation (Terminal) überarbeitet und den individuellen Bedürfnissen des Projektierers bzw. Endkunden angepasst werden kann.
Bei der Erstellung eines Projekts fragt der Projektwizard ab, mit welcher Navigationsart das Projekt erstellt werden soll. Dabei ist zwischen Minimales Projekt und Automatische Navigation zu wählen. Für den Artikel hier muss Automatische Navigation ausgewählt sein.
Die Idee
Die Navigation soll nicht wie üblich vertikal angelegt sein, sondern horizontal.
Umsetzung
Der Aufbau einer Bedienseite wird durch den PageMaster bestimmt. Dieser PageMaster ist als eigene Datei unter dem Clientprojekt .Terminal und dem Ordner Master im Projektmappen-Explorer zu finden. Im gleichen Verzeichnis finden sich auch die Dateien TitleBar.xaml und NavigationBar.xaml.
Im PageMaster wird per default angegeben, dass die Navigationsleiste (NavigationBar) sich auf der linken Bedienseite befindet und die Titelleiste (TitelBar) oberhalb der Gesamtseite angelegt ist.
Horizontale Ausrichtung
Damit die Navigation oben angezeigt wird, muss die Einstellung DockPanel.Dock in der Datei PageMaster.xaml von Left auf Top gesetzt werden:
<!– Custom Navigation Menu on the top –>
<m:NavigationBar x:Name=“NavigationBar“ DockPanel.Dock=“Top“ />
Nun verschiebt sich die Navigationsleiste von dem linken Rand noch oben unterhalb des Titels.
Damit ist es noch nicht getan, denn die Anordnung der Seitenwechsel-Button ist nach wie vor vertikal angeordnet und das Aussehen ist auch noch das ursprüngliche. Weitere Änderungen werden in der Datei NavigationBar.xaml nötig.
Der Navigationsbalken stellt sich noch Hochkant dar und muss von uns nun also auf die passende Breite und Höhe eingestellt werden. Im Beispiel haben wir das auf MinHeight=“60″ d:DesignWidth=“800″ gesetzt.
Zuletzt muss noch die Ausrichtung der Navigationsbutton so eingestellt werden, dass diese nebeneinander erscheinen. Dazu muss das <DataTemplate x:Key=“List“> angepasst werden. Dazu wird ein UniformGrid eingefügt, das mit nur einer Zeile (Row) daher kommt. Fügen Sie also hinter der Zeile
<ItemsControl ItemsSource=“{Binding Navigation.AllNavigatablePages, Mode=OneWay}“ Background=“Transparent“>
Folgendes hinzu
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows=“1″ />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
Damit wird erreicht, dass der zur Verfügung stehende Platz der Navigation gleichmäßig ausgenutzt wird. Da es vorkommen kann, dass die Navigationspunkte den zur Verfügung stehenden Platz ausreizen, wird über einen Scroll-Balken Abhilfe geschaffen. Der ebenfalls im DataTemplate enhaltene ScrollViewer muss somit horizontal ausgerichtet sein und der Vertikale ausgeblendet werden. Das geschieht durch die folgende Zeile:
<ScrollViewer HorizontalScrollBarVisibility=“Auto“ VerticalScrollBarVisibility=“Disabled“>
