How to use PageFunction to create dialog behavior in WPF?

Article
10/02/2007

PageFunction is a new term defined in WPF. It enables the user to navigate to a specific page and perform a task, then navigate back to the caller page with the result. It behaves just like Modal Dialogbox with the difference that PageFunction won’t be displayed as s pop-up, instead it is displayed in the same page as the caller.

The other nice feature of PageFunction is that it won’t be included in the navigation history, making navigation process much simpler for both the user and the developer.

Now we need to come up with a scenario that the PageFunction would make sense. Let’s say you need to have a search page that the user can navigate to by clicking on a link, after the user found his/her item then it would navigate back to the main page with the search result displayed in a textbox. This is very common scenario.

This is what you need first, a textbox and a link in the main page that navigates to the search page:

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<TextBlock Grid.Row="0" Grid.Column="0">Selected Name:</TextBlock>

<Hyperlink Click="SelectHyperlink_Click">Search</Hyperlink>

</TextBlock>

</Grid>

We will work on the event handler “SelectHyperlink_Click” later. So far nothing new… Now you need to define your search page as a PageFunction in order to meet your requirement. So this is how you would implement your search page:

<PageFunction

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

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

x:Class="MSLWPFPrototype.SearchPageFunction"

xmlns:sys="clr-namespace:System;assembly=mscorlib"

x:TypeArguments="sys:String"

Title="OrganizationSearchPageFunction">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Hyperlink Click="okButton_Click" Tag=”Value1”>Value1</Hyperlink>

</TextBlock>

<TextBlock Grid.Column="1" Grid.Row="0">Value2</TextBlock>

<TextBlock Grid.Column="2" Grid.Row="0">Value3</TextBlock>

<TextBlock Grid.Column="3" Grid.Row="0">Value3</TextBlock>

</Grid>

The only thing interesting here in this code is:

xmlns:sys="clr-namespace:System;assembly=mscorlib"

x:TypeArguments="sys:String"

The first line is to specify that you want to use .Net type like string here in XMAL file and the TypeArguments is the type of the object that the PageFunction returns back to the caller page.

You also need to implement these two event handler as part of your PageFunction:

void okButton_Click(object sender, RoutedEventArgs e)

{

// Accept task when Ok button is clicked

Hyperlink cmd = (Hyperlink)sender;

OnReturn(new ReturnEventArgs<string>((string)cmd.Tag));

}

void cancelButton_Click(object sender, RoutedEventArgs e)

{

// Cancel task

OnReturn(null);

}

That is it for the PageFunction, not that difficult!!! Now you need to add couple more event handlers to your caller page to accept the result and display it in the textbox:

void taskPageFunction_Return(object sender, ReturnEventArgs<string> e)

{

if (e == null) return;

// If a task happened, display task data

this.txtResult.Text = e.Result;

}

And the event handler for the link to navigate to the Search page:

void SelectHyperlink_Click(object sender, RoutedEventArgs e)

{

// Instantiate and navigate to task page function

SearchPageFunction taskPageFunction = new SearchPageFunction("Initial Data Item Value");

taskPageFunction.Return += taskPageFunction_Return;

this.NavigationService.Navigate(taskPageFunction);

}

Done, enjoy your Search PageFunction!!!!

Comments

Anonymous
October 15, 2007
Is it possible to create a PageFunction without a code behind file? It appears that the only way to get it to return is to handle an event and call On Return.
Anonymous
October 15, 2007
Griffin, I think the answer is no based on what I read form Rob Relyea's blog: You must navigate programmatically to page functions because you need to wire an event handler so you can get the return value. http://www.windows-now.com/blogs/rrelyea/archive/tags/XAML/default.aspx?p=2 However I believe it might be possible to write a custom Pagefunction that wraps this functionality so it is seamless when you use it.
Anonymous
February 27, 2009
Do you have the source code for this? I tried getting it to work with the code snippets you have here but it's missing some things and I am new to WPF. Thanks! Sam

Share via

How to use PageFunction to create dialog behavior in WPF?

Comments

Additional resources