How to use PageFunction to create dialog behavior in WPF?

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

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

Nowwe need to come up with a scenario that the PageFunction would makesense. Let’s say you need to have a search page that the user cannavigate to by clicking on a link, after the user found his/her itemthen it would navigate back to the main page with the search resultdisplayed 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>

Wewill work on the event handler “SelectHyperlink_Click” later. So farnothing new… Now you need to define your search page as a PageFunctionin order to meet your requirement. So this is how you would implementyour search page:

<PageFunction

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

xmlns:x="http://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"

Thefirst line is to specify that you want to use .Net type like stringhere in XMAL file and the TypeArguments is the type of the object thatthe 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);

}

Thatis it for the PageFunction, not that difficult!!! Now you need to addcouple more event handlers to your caller page to accept the result anddisplay 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!!!!

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。