You can create pretty layouts of multipage applications in PoshGUI.

There are two methods you can utilize for this purpose, including custom navigation and setting up navigation programmatically.

Let’s take a look at them one by one.

(Feel free to jump to the section of your choice, directly by clicking on it)

Custom Navigation #

Custom navigation allows you to make navigation between multiple pages or tabs of the application using data context.

It is much more flexible in terms of data and layout.

Setting up layout #

The steps of setting up the layout are as follows:

Create a column on the WPF form.

Add a ListView from the TOOLBOX into the created column. Right-click on it and select Fill Parent from the dropdown.

Go to the DATCONTEXT tab and create an array of ‘listItems’ with three values.

{
    "listItems": ["Content", "Loading", "Result"]
}

Select the ListView and by navigating to the ItemSource under Common, bind it with ‘listItems’.

Your data items in the array will be visible in the ListView as shown:

Drag a TabControl into the remaining section of the WPF form. Right-click on it and select Fill Parent from the dropdown.

Assign names to the tabs by changing their Headers in the XAML section. We have named these tabs as the name of ‘listItems’ which are ‘Content’, ‘Loading’, and ‘Result’.

Add controls to each tab item. We are adding TextBlock(s) to specify the name of a particular tab.

You can change the tab by incrementing the SelectedIndex under the Common in PROPERTIES tab of TabControl to add the relevant TextBlock(s).

We want to make the headers of TabControl invisible, for that add Visibility = “Collapsed” in the XAML of each TabItem as shown below.

The headers will still be visible in the design mode. However, when you can execute the code, you can see that they are not visible.

Setting up custom navigation #

Now that you have the complete layout of your application, time to set up custom navigation.

What we essentially want to do is shift tabs based on the selection of respective ‘listItem’.

For that, follow these steps:

Select ListView. Navigate to the Name property under the PROPERTIES tab and assign a name to it. In this case, we have assigned it the name of ‘listNav’.

Now, we have to bind the TabControl to the values in DataContext. For that, edit the SelectedIndex value in XAML section of it as: SelectedIndex= “{Binding ElementName=listNav, Path=SelectedIndex}”.

What it’s essentially doing is binding the TabControl with ‘listNav’ which is the name of ListView and setting up the SelectedIndex of TabControl on the basis of the value of ListView.

After executing the code, you can see that by simply clicking on the ‘listItems’, tab is switched. In this case, the selection of ‘Content’ opens the ‘Content’ tab of TabControl.

If you select ‘Result’ from ListView, it will open the ‘Result’ tab.

Code for Custom Navigation:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Width="800" Height="400">
<Grid>
<Grid.ColumnDefinitions><ColumnDefinition Width="118*"/><ColumnDefinition Width="682*"/></Grid.ColumnDefinitions>
 <ListView BorderBrush="Black" BorderThickness="1" Grid.Row="0" Grid.Column="0" Background="#b599bb" ItemsSource="{Binding listItems}" Name="listNav"/>
<TabControl Grid.Row="0" Grid.Column="1" SelectedIndex="{Binding ElementName=listNav, Path=SelectedIndex}">
    <TabItem Header="Content" Visibility="Collapsed">
        <Grid Background="#FFE5E5E5" Margin="0,3,0,-3"><TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="Wrap" Text="I am a Content Tab" Margin="176,113,0,160" FontSize="30" FontStyle="Oblique" FontWeight="Bold" Foreground="#d25ade"/>
</Grid>
</TabItem>
    <TabItem Header="Loading" Visibility="Collapsed">
        <Grid Background="#FFE5E5E5"><TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="Wrap" Text="I am a Loading Tab" Margin="163,112,0,161" FontSize="30" FontStyle="Oblique" FontWeight="Bold" Foreground="#d25ade"/>
</Grid>
    </TabItem>
    <TabItem Header="Result" Visibility="Collapsed">
        <Grid Background="#FFE5E5E5"><TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="Wrap" Text="I am a Result Tab" Margin="173,118,0,155" FontSize="30" FontStyle="Oblique" FontWeight="Bold" Foreground="#d25ade"/>
</Grid>
    </TabItem>
</TabControl>
</Grid></Window>

Setting up Navigationprogrammatically #

You can also set up navigation programmatically which means creating functions for navigation.

The steps are as follows:

Setting up layout #

Create a column on the WPF form.

Follow Steps 6-10 of Custom Navigation to set up the layout of TabControl.

In the DataContext, create a variable ‘index’ with a value 0 by writing { "index": 0 }

Select TabControl. Navigate to the SelectedIndex under the Common in Properties Tab. Bind it with the ‘index’ created in the DataContext.

Add two Button(s) in the left column created on the WPF form. Change their text and background color for better understanding.

Setting up the logic #

Now that the layout is set, to add the navigation programmatically, follow these steps.

Select the first button and under the EVENTS tab, write a function name for it for the event of Click. We have named it ‘goToLoading’.

Similarly, create a function name for the second button, which we have named ‘goToResult’.

Navigate to the Logic tab to write the function definition of both onClick events. We are using $State.index to get the current value of that index to update it to the desired one.

function goToLoading()
{
    $State.index = 1
}
function goToResult()
{
    $State.index = 2
}

Simple as that. Upon executing, you can see that by the selection of the respective button, the tab is switched. In this case, ‘Content’ tab is selected which was the default SelectedIndex.

By clicking on ‘Go to Result’ button, the application switches to the ‘Result’ tab.

XAML Code for setting up Navigation programmatically:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Width="800" Height="400">
<Grid>
<Grid.ColumnDefinitions><ColumnDefinition Width="138.8235294117647*"/><ColumnDefinition Width="660.9691629955947*"/></Grid.ColumnDefinitions>
<TabControl Grid.Row="0" Grid.Column="1" SelectedIndex="{Binding index}">
    <TabItem Header="Content" Visibility="Collapsed">
        <Grid Background="#FFE5E5E5" Margin="0,3,0,-3"><TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="Wrap" Text="I am a Content Tab" Margin="176,113,0,160" FontSize="30" FontStyle="Oblique" FontWeight="Bold" Foreground="#d25ade"/>
</Grid></TabItem>
    <TabItem Header="Loading" Visibility="Collapsed">
        <Grid Background="#FFE5E5E5"><TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="Wrap" Text="I am a Loading Tab" Margin="163,112,0,161" FontSize="30" FontStyle="Oblique" FontWeight="Bold" Foreground="#d25ade"/>
</Grid>
    </TabItem>
    <TabItem Header="Result" Visibility="Collapsed">
        <Grid Background="#FFE5E5E5"><TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="Wrap" Text="I am a Result Tab" Margin="173,118,0,155" FontSize="30" FontStyle="Oblique" FontWeight="Bold" Foreground="#d25ade"/></Grid> </TabItem></TabControl>
<Button Content="Go to Loading" HorizontalAlignment="Left" VerticalAlignment="Top" Width="117" Margin="10.270843505859375,53.97917175292969,0,0" Grid.Row="0" Grid.Column="0" Background="#d185e1" Foreground="#ffffff" FontSize="15" Height="30" Click="goToLoading"/>
<Button Content="Go to Result" HorizontalAlignment="Left" VerticalAlignment="Top" Width="117" Margin="12,107,0,0" Grid.Row="0" Grid.Column="0" Background="#d185e1" Foreground="#ffffff" FontSize="15" Height="30" Click="goToResult"/>
</Grid></Window>