| Product: | Elvis 3 |
| Version: | Elvis 3.x |
| Created on: | 2016-10-11 |
Changes needed in the XAML code
Description
In this guide, we would like to show how an automatic navigation system for the Windows operating station (terminal) can be revised and adapted to the individual needs of the project planner or end customer.
When creating a project, the project wizard asks which type of navigation is to be used to create the project. You can choose between Minimal Project and Automatic Navigation . The article here must have Automatic Navigation selected.
The idea
The navigation should not be vertical as usual, but horizontal.
Implementation
The structure of an operating page is determined by the PageMaster. This PageMaster is available as a separate file under the client project . Terminal and the Master folder in Solution Explorer. In the same directory you will also find the files TitleBar.xaml and NavigationBar.xaml.
In PageMaster , it is specified by default that the navigation bar (NavigationBar) is located on the left side and the title bar (TitelBar) is created above the overall page.
Horizontal alignment
In order for the navigation to appear at the top, the DockPanel.Dock setting in the PageMaster.xaml file must be set from Left to Top :
<– Custom Navigation Menu on the top –>
<m:NavigationBar x:Name=”NavigationBar” DockPanel.Dock=”Top” />
Now the navigation bar moves from the left edge to the top below the title.
But that’s not all, because the arrangement of the page change buttons is still arranged vertically and the appearance is still the original. Further changes are required in the NavigationBar.xaml file.
The navigation bar is still upright and must now be adjusted by us to the appropriate width and height. In the example, we set that to MinHeight=”60″ d:DesignWidth=”800″.
Finally, the alignment of the navigation buttons must be set so that they appear next to each other. To do this, the <DataTemplate x:Key=”List”> must be adapted. For this purpose, a UniformGrid is inserted, which comes with only one row (Row). So add after the line
<ItemsControl ItemsSource=”{Binding Navigation.AllNavigatablePages, Mode=OneWay}” Background=”Transparent”>
Add the following:
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows=”1″ />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
This ensures that the available space for navigation is used evenly. Since it can happen that the navigation points exhaust the available space, a scroll bar is used to remedy the situation. The ScrollViewer, which is also included in the DataTemplate, must therefore be horizontally aligned and the vertical must be hidden. This is done by the following line:
<ScrollViewer HorizontalScrollBarVisibility=”Auto” VerticalScrollBarVisibility=”Disabled”>
