What are PageFunctions in WPF
Definition: Page functions are very much similar to Page class. We can design PageFunction in the designer and can add controls to a PageFunctions as well. Also we can navigate to a PageFunction through hyperlinks or by using NavigationService .
The principal difference between Page and PageFunction object is that PageFunction can return a value. This allows us to design a page which is similar to dialog boxes, which is they can collect user information and then return that information to the main page.
- How to Add in WPF Project
- From project menu, click add new item and open the Add New Item Dialog box.
- In the Add New Item dialog box, select PageFunction and click Add.
Once a PageFunction is added in the WPF project, visual studio automatically adds the default return type as String. This is common usage, but we can change this to any return type of our choice, such as integer or object.
How to change the return type of PageFunction.
- Go to XAML of PageFunction and locate in xaml that reads,
- Change it to , sys:Object
- In code view, we then need to change too
public partial class PageFunction1 : PageFunction<Object>
- How to return value from PageFunction:
- We talked about that PageFunction return the value, so how does PageFunction do that. PageFunction call OnReturn method. OnReturn takes a parameter of the type specified for the PageFunction. Then the page which called PageFunction should handle the Returned event for that PageFunction, which is instance of ReturnEventArgs returned by that event contain the returned value.
So say the Page which called PageFunction is Page1, in this page define a event handler which will handle the value returned by OnReturn function from PageFucntion.
public void ReturnHandler(object sender,ReturnEventArgs<object> e)
myString = e.Result;
Notice that instance of ReturnEventArgs returned by that event contact returned value of object type
- In a page that navigates to PageFunction, instantiate the PageFunction programmatically and add code to hook up the PageFunction.Returned event to the new event handler
PageFunction1 myPage = new PageFunction1();
- In the PageFunction , after the task has been completed ,we have to call OnReturn method and pass the return value in the new instance of ReturnEventArgs;
OnReturn(new ReturnEventArgs<object>(“Hi from PageFunction”);
- How to remove PageFunction calls from Journal entry:
Because PageFunction objects are used frequently to collect user input, there can be a situation where user return to a PageFunction via journal after the task has been completed. The PageFunction class exposes a property called RemoveFromJournal . When this property is set to true, PageFunction entries are deleted automatically from journal once the user has finished the task.
- Practical scenario of using PageFunction.
Simple navigation is required when it comes to build a simple page based application like configuration wizard. There is generally little or no branching and after a page has been visited it is generally not returned to unless the user wants to back up.
But in a scenario like shopping cart, where user might want to add items to a shopping cart for more items , add them to the cart and repeat this few more times and then check out.
PageFunction objects allow building more structure into the application. With PageFunction objects, we can allow user to leave main line of execution models to perform task and return back. Using PageFunction we can create execution models with complex flow structure.
Let try to build a pizza ordering system where we implement PageFunction that allows user to choose toppings and implement simple journal to back up in their selections. Then we return this selection to the main window.
Step 1: Create a WPF browser application project.
Step 2: The project will have a page called Page1.aspx. Now we will add a page function to the application. So right click to add new item.
Step 3: We need to design our main page which is Page1.xaml.
We need to add two radio buttons for small and large pizza and then a listBox to show the toppings details.
See the xaml code below;
<RadioButton Height=”16″ HorizontalAlignment=”Left” Margin=”28,37,0,0″ Name=”radioButton1″ VerticalAlignment=”Top” Width=”120″>Large Pizza $15.00</RadioButton>
<RadioButton Height=”16″ Margin=”28,65,150,0″ Name=”radioButton2″ VerticalAlignment=”Top”>Small Pizza $12.00</RadioButton>
<Button Height=”23″ HorizontalAlignment=”Left” Margin=”28,98,0,0″ Name=”button1″ VerticalAlignment=”Top” Width=”97″ Click=”button1_Click”>Select Toppings</Button>
<Button HorizontalAlignment=”Left” Margin=”28,134,0,143″ Name=”button2″ Width=”97″ VerticalAlignment=”Top”>Checkout</Button>
<ListBox HorizontalAlignment=”Right” Margin=”0,37,24,134″ Name=”listBox1″ Width=”133″ />
<Label Height=”28″ HorizontalAlignment=”Right” Margin=”0,9,2,0″ Name=”label1″ VerticalAlignment=”Top” Width=”155″>Selected Toppings $2 each</Label>
Run the application and you will see below screen.
Now the idea is to have a another page where user can select their toppings for the pizza and come back to the mail ordering page. So we will implement the return from PageFunction.
Step 4: Open PageFunction1.xaml and here we need to design a Listbox showing topping details and another ListBox where we will add the toppings. A button to navigate back to Main Page.
Below is the simple xaml for PageFunction
<ListBox Margin=”30,29,48,0″ Name=”listBox1″ Height=”73″ VerticalAlignment=”Top”>
<Button HorizontalAlignment=”Left” Margin=”30,127,0,0″ Name=”button1″ Width=”91″ Click=”button1_Click” Height=”23″ VerticalAlignment=”Top”>Add Toppings</Button>
<Button Margin=”0,127,48,0″ Name=”button2″ Height=”23″ VerticalAlignment=”Top” HorizontalAlignment=”Right” Width=”103″ Click=”button2_Click”>Remove Toppings</Button>
<ListBox Margin=”30,181,48,0″ Name=”listBox2″ Height=”68″ VerticalAlignment=”Top” />
<Label Height=”28″ Margin=”30,0,150,0″ Name=”label1″ VerticalAlignment=”Top”>Available Toppings</Label>
<Label Height=”27″ Margin=”30,154,132,0″ Name=”label2″ VerticalAlignment=”Top”>Added Toppings</Label>
<Button Margin=”30,0,48,16″ Name=”Button3″ Height=”23″ VerticalAlignment=”Bottom” Click=”Button3_Click”>Finished with toppings</Button>
Step 5: Now we need to do some real action, writing code to return value from PageFunction.
First lets us change the value of x:TypeArguments=”sys:String” to x:TypeArguments=”sys:Object”
Now in code behind too, public partial class PageFunction1 : PageFunction<Object>
Step 5: In Page1, Under Button1 click method, we hook up the handler.
- Create PageFunction object
- Hook up PageFunction.Returned method event to the new handler defined in Page1.
- Define apage_Return method to handle the apage.Return event.
void apage_Return(object sender, ReturnEventArgs<object> e)
List<string> alist = (List<string>)e.Result;
foreach (string s in alist)
Notice that inside this method, the result which is returned by PageFunction is being cased to List type to show in ListBox
Step 6: Now in PageFunction we need to write code for Button Click which on Click should return the value back to Page
Methods to add toppings and removing them from ListBox is straightforward.
ReturnEventArgs<object> ee = new ReturnEventArgs<object>((object)alist);
Here we are calling call the OnReturn method and passing the return value in a new instance of ReturnEventArgs
Step 7: Press F5 to build and run your application. In the opening page, click Select Toppings to open the PageFunction. Select toppings in the top list box and click Add Topping to add a topping to the lower list box. When completed, click finished with Toppings. The PageFunction returns and the list of toppings appears in the list box on Page1