How to use PageFunction to create dialog behavior in WPF?

louisasea 2007-10-11

展开全文

How to use PageFunction to create dialog behavior in WPF?

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="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"

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;