Share via


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 DockPanel.Dock="Top">

          <Grid.ColumnDefinitions>

                   <ColumnDefinition Width="0.3*" />

                   <ColumnDefinition Width="0.4*" />

                   <ColumnDefinition Width="0.3*" />

          </Grid.ColumnDefinitions>

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

          <TextBox Grid.Row="0" Grid.Column="1" Name="txtResult" ></TextBox>

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

                   <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 DockPanel.Dock="Top" Name="grid2" >

          <Grid.ColumnDefinitions>

                   <ColumnDefinition Width="0.1*" SharedSizeGroup="Number"/>

                   <ColumnDefinition Width="0.1*" SharedSizeGroup="Name"/>

                   <ColumnDefinition Width="0.1*" SharedSizeGroup="StartDate"/>

                   <ColumnDefinition Width="0.13*" SharedSizeGroup="EndDate"/>

          </Grid.ColumnDefinitions>

          <Grid.RowDefinitions>

                   <RowDefinition Height="0.2*" />

                   <RowDefinition Height="0.2*" />

                   <RowDefinition Height="0.2*" />

                   <RowDefinition Height="0.2*" />

                   <RowDefinition Height="0.2*" />

                   <RowDefinition Height="0.2*" />

          </Grid.RowDefinitions>

          <TextBlock Grid.Column="0" Grid.Row="0">

          <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