WPF Thoughts: Using the NavigationService

This entry targets Framework 4.0

My purchasing application has a main page that contains a frame. Users can navigate pages in that frame. I provide a back button that allows them to navigate back. I want to put a tooltip on that button that lets them know what they are going to navigate back to. This is more difficult than I had expected.

I solved the problem by populating and reading the Name property of the Navigation.JournalEntry. The Name property is automatically populated by the Framework as you navigate according to the following rules.

The attached Name attribute.
Title.
WindowTitle and the uniform resource identifier (URI) for the current page
The uniform resource identifier (URI) for the current page

You can populate the Name or Title attribute in XAML like this...

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    JournalEntry.Name="JournalEntry Name"
    Title="Title"

    >
  <!--Page Content-->
</Page>

But if you want to make the tooltip dynamic it is easiest to bind to a property. Lets walk through the process of doing this. We will create a project in Visual Studio 2015 that has a main page, an "EnterName" page where the user enters their name and navigates to a second page called "Hello". The second page will show a back button with a tool tip that shows the title from the prior page.

I will use a modified version of MVVM to build the project.

Start a new WPF application in Visual Basic (File -> New -> Project) and call it BackButtonToolTip.

We will have a MainWindow.xaml and xaml.vb. Replace MainWindow.xaml with this XAML which defines a Title textblock for the application, a back button, and a frame.

Now we need to put a couple of dummy event handlers in our code behind to make it look like this...
Class MainWindow
Private Sub PreviousPage_CanExecute(sender As System.Object, e As System.Windows.Input.CanExecuteRoutedEventArgs)
End Sub

Private Sub PreviousPage_Executed(sender As System.Object, e As System.Windows.Input.ExecutedRoutedEventArgs)
End Sub
End Class

When we run the application we see nothing, which is what we expect at this point. Let's add our first child page. Right-click on the project name in the solution explorer and select "Add Page". Then call the new page "EnterName".

Now we have an EnterName we can reference it in the Frame tag of the MainWindow. Change it to look like this...

<Frame Name="PageFrame" Grid.Row="1" NavigationUIVisibility="Hidden" Source="EnterName.xaml"></Frame>

The EnterName page will have a prompt, a textbox, and a navigation button. I altered the background so you can see the navigation more clearly. Note the use of "KeepAlive". You need this to persist your page's properties when you navigate back to it. When the project is complete, check out the effect of setting this false. Note the line Title="{Binding PageTitle}". By modifying the PageTitle property we can control the Name property of the NavigationJournalEntry object that defines this page in the Frame's BackStack, because it will be populated from the Title property of this page. Don't worry, it all becomes clearer later.

Here is your XAML for EnterName.xaml...

<Page x:Class="EnterName"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:local="clr-Namespace:BackButtonToolTip"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="300"

DataContext="{Binding RelativeSource={RelativeSource self}}"

Background="AliceBlue"

KeepAlive="true"
Title="{Binding PageTitle}">

<Page.CommandBindings>

</Page.CommandBindings>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

</Page>

We need to create two more dummy event handlers in EnterName.xaml.vb.

Class EnterName

Private Sub NextPage_CanExecute(sender As Object, e As CanExecuteRoutedEventArgs)

End Sub

Private Sub NextPage_Executed(sender As Object, e As ExecutedRoutedEventArgs)

End Sub

End Class

Now when we run the application we can see something. Not much, but something.

Now we can build the backing store for the textbox, add the INotifyPropertyChanged code, and wire up the [Navigate] button. Change the EnterName.xaml.vb to look like this...

Imports System.ComponentModel

Class EnterName

Implements INotifyPropertyChanged

Private _UsersName As String = ""

Public Property UsersName As String

Get

Return _UsersName

End Get

Set(value As String)

If _UsersName <> value Then

_UsersName = value

NotifyPropertyChanged("UsersName")
PageTitle = "Back to 'Enter Users Name (" & _UsersName & ")'"

End If

End Set

End Property

Private _PageTitle As String = ""

Public Property PageTitle As String
Get
Return _PageTitle
End Get
Set(value As String)
If _PageTitle <> value Then
_PageTitle = value
NotifyPropertyChanged("PageTitle")
End If
End Set
End Property

Private Sub NextPage_CanExecute(sender As Object, e As CanExecuteRoutedEventArgs)

e.CanExecute = (UsersName.Length > 0)

End Sub

Private Sub NextPage_Executed(sender As Object, e As ExecutedRoutedEventArgs)

Dim Frame As Frame = DirectCast(Application.Current.MainWindow.FindName("PageFrame"), Frame)

Frame.Navigate(New Hello(UsersName))

End Sub

Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged

Private Sub NotifyPropertyChanged(PropertyName As String)

RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(PropertyName))

End Sub

Private Sub EnterName_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded

DirectCast(Application.Current.MainWindow, MainWindow).MyTitle = "Get Name"

End Sub

End Class

The NextPage_CanExecute event handler has been modified to only allow navigation if the user has entered something in the UsersName textbox.

The NextPage_Executed event handler has been modified to navigate to a different page. The act of navigation puts the current page on the Frame's BackStack where it can be interrogated later.

We add the standard get/set handlers for our two properties but we also modify the PageTitle property whenever the user modifies the UsersName property.

At this point we have some errors because we have not yet defined our Hello page or the MyTitle property on the MainWindow. Don't panic.

The EnterName_Loaded event handler has been added. It simply reaches to the application's main window and updates a property. We need to enhance MainPage to define and use that property. Modify MainWindow.xaml.vb to look like this...

Imports System.ComponentModel

Class MainWindow

Implements INotifyPropertyChanged

Private _MyTitle As String = ""

Public Property MyTitle As String

Get

Return _MyTitle

End Get

Set(value As String)

If _MyTitle <> value Then

_MyTitle = value

NotifyPropertyChanged("MyTitle")

End If

End Set

End Property

Private _PreviousButtonToolTip As String = ""

Public Property PreviousButtonToolTip As String

Get

Return _PreviousButtonToolTip

End Get

Set(value As String)

If _PreviousButtonToolTip <> value Then

_PreviousButtonToolTip = value

NotifyPropertyChanged("PreviousButtonToolTip")

End If

End Set

End Property

Private Sub PreviousPage_CanExecute(sender As System.Object, e As System.Windows.Input.CanExecuteRoutedEventArgs)

End Sub

Private Sub PreviousPage_Executed(sender As System.Object, e As System.Windows.Input.ExecutedRoutedEventArgs)

End Sub

Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged

Private Sub NotifyPropertyChanged(PropertyName As String)

RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(PropertyName))

End Sub

End Class

Before we can continue we need to write the Hello page that we will navigate to (you need at least two pages to demonstrate navigation).

Add another page and call it "Hello". It will display the user name entered in the EnterName page. The XAML looks like this...

<Page x:Class="Hello"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:local="clr-namespace:BackButtonToolTip"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="300"

DataContext="{Binding RelativeSource={RelativeSource self}}"

Background="AntiqueWhite">

</StackPanel>

</Page>

The code behind is fairly trivial too...

Imports System.ComponentModel

Class Hello

Implements INotifyPropertyChanged

Private _UsersName As String = ""

Public Property UsersName As String

Get

Return _UsersName

End Get

Set(value As String)

If _UsersName <> value Then

_UsersName = value

NotifyPropertyChanged("UsersName")

End If

End Set

End Property

Public Sub New(UsersName As String)

InitializeComponent()

Me.UsersName = UsersName

End Sub

Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged

Private Sub NotifyPropertyChanged(PropertyName As String)

RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(PropertyName))

End Sub

Private Sub Hello_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded

DirectCast(Application.Current.MainWindow, MainWindow).MyTitle = "Hello"

End Sub

End Class

Note the Hello_Loaded event handler reaches through to the parent page and updates the title property to "Hello". As this is something every page in our application would do, I would refactor it into a function, but I'll let you do that. The Hello page also has a different background color.

If we run the application now we will be able to enter a name and navigate to the "Hello" page.

The back button is still not visible because it's visibility is bound to its enabled state and we haven't told it when can be executed. Let's do that now. Modify the PreviousPage event handlers in MainWindow to look like this...

Private Sub PreviousPage_CanExecute(sender As System.Object, e As System.Windows.Input.CanExecuteRoutedEventArgs)

If PageFrame IsNot Nothing AndAlso PageFrame.NavigationService.CanGoBack() Then

e.CanExecute = True

PreviousButtonToolTip = PageFrame.BackStack.Cast(Of Navigation.JournalEntry).FirstOrDefault.Name

End If

End Sub

Private Sub PreviousPage_Executed(sender As System.Object, e As System.Windows.Input.ExecutedRoutedEventArgs)

If PageFrame.NavigationService.CanGoBack Then

PageFrame.NavigationService.GoBack()

End If

End Sub

What we did here is to enable the back button (and consequently make it visible) whenever the frame has a page to go back to. We also find the first element of the BackStack and pull the name from it to assign to the tooltip. When the back button is clicked we execute GoBack.

Now we can see the entire functionality of the solution.

WPF Thoughts

Tuesday, February 14, 2017

Using the NavigationService

No comments:

Post a Comment

About Me