3. 在之前我们创建了一个叫做UILessPageFunction的功能页面，它本身并没有子元素，它会作为向导UI的调用页面。
下面我们会创建两个有UI的PageFunctions。第一个叫ContactDetailPage1。这个页面上会有一些输入框，可以输入联系人的姓名，email地址，和主页URL。这次我们在标记语言中把类型参数的默认值String改成Object。
<PageFunction
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
x:Class="ContactDetailPage1"
x:TypeArguments="sys:Object"
Title="Contact Details - 1">
<Grid Name ="RootGrid"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<!-- Labels go here -->
<TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="1" >
First Name
</TextBlock>
<TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="2" >
Last Name
</TextBlock>
<TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="3" >
Email
</TextBlock>
<TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="4" >
Home Page
</TextBlock>
<!-- Input fields -->
<TextBox Name="txtFirstName" Width="200" Height="30"
Grid.Column="1" Grid.Row="1"
Text="{Binding Path=FirstName, Mode=TwoWay}"/>
<TextBox Name="txtLastName" Width="200" Height="30"
Grid.Column="1" Grid.Row="2"
Text="{Binding Path=LastName, Mode=TwoWay}"/>
<TextBox Name="txtEmailAddress" Width="200" Height="30"
Grid.Column="1" Grid.Row="3"
Text="{Binding Path=EmailAddress, Mode=TwoWay}"/>
<TextBox Name="txtHomePage" Width="200" Height="30"
Grid.Column="1" Grid.Row="4"
Text="{Binding Path=HomePage, Mode=TwoWay}"/>
<Button Name="btnHomePage" Width="200" Height="30"
Grid.Column="1" Grid.Row="4"
Content="{Binding Path=HomePage, Mode=TwoWay}"
Click="NavigateToHome"/>
<Button Name="btnEmailAddress" Width="200" Height="30"
Grid.Column="1" Grid.Row="3"
Content="{Binding Path=EmailAddress, Mode=TwoWay}"
Click="SendEmail"/>
<!-- Navigation buttons -->
<DockPanel Name="ButtonPanel1" Grid.Column="0" Grid.Row="5" >
<Button Name="btnNext" Width="100" Height="30"
Click="OnNextClick">Next</Button>
<Button Name="btnCancel" Width="100" Height="30"
Click="OnCancelClick">Cancel</Button>
</DockPanel>
<DockPanel Name="ButtonPanel2" Grid.Column="1" Grid.Row="5">
<Button Name="btnFinish" Width="100" Height="30"
Click="OnFinishClick">Finish</Button>
</DockPanel>
</Grid>
</PageFunction>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
x:Class="ContactDetailPage1"
x:TypeArguments="sys:Object"
Title="Contact Details - 1">
<Grid Name ="RootGrid"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<!-- Labels go here -->
<TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="1" >
First Name
</TextBlock>
<TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="2" >
Last Name
</TextBlock>
<TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="3" >
</TextBlock>
<TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="4" >
Home Page
</TextBlock>
<!-- Input fields -->
<TextBox Name="txtFirstName" Width="200" Height="30"
Grid.Column="1" Grid.Row="1"
Text="{Binding Path=FirstName, Mode=TwoWay}"/>
<TextBox Name="txtLastName" Width="200" Height="30"
Grid.Column="1" Grid.Row="2"
Text="{Binding Path=LastName, Mode=TwoWay}"/>
<TextBox Name="txtEmailAddress" Width="200" Height="30"
Grid.Column="1" Grid.Row="3"
Text="{Binding Path=EmailAddress, Mode=TwoWay}"/>
<TextBox Name="txtHomePage" Width="200" Height="30"
Grid.Column="1" Grid.Row="4"
Text="{Binding Path=HomePage, Mode=TwoWay}"/>
<Button Name="btnHomePage" Width="200" Height="30"
Grid.Column="1" Grid.Row="4"
Content="{Binding Path=HomePage, Mode=TwoWay}"
Click="NavigateToHome"/>
<Button Name="btnEmailAddress" Width="200" Height="30"
Grid.Column="1" Grid.Row="3"
Content="{Binding Path=EmailAddress, Mode=TwoWay}"
Click="SendEmail"/>
<!-- Navigation buttons -->
<DockPanel Name="ButtonPanel1" Grid.Column="0" Grid.Row="5" >
<Button Name="btnNext" Width="100" Height="30"
Click="OnNextClick">Next</Button>
<Button Name="btnCancel" Width="100" Height="30"
Click="OnCancelClick">Cancel</Button>
</DockPanel>
<DockPanel Name="ButtonPanel2" Grid.Column="1" Grid.Row="5">
<Button Name="btnFinish" Width="100" Height="30"
Click="OnFinishClick">Finish</Button>
</DockPanel>
</Grid>
</PageFunction>
请注意，每个输入框都绑定到联系人对象的某个属性。另外有三个按钮来处理导航事件：Next，Cancel，和Finish。
4. 打开ContactDetailPage1.xaml.cs，在代码文件中，同样的，将类型参数值改成Object。
Partial Public Class ContactDetailPage1
Inherits System.Windows.Navigation.PageFunction(Of Object)
Public Sub New()
InitializeComponent()
End Sub
End Class
Inherits System.Windows.Navigation.PageFunction(Of Object)
Public Sub New()
InitializeComponent()
End Sub
End Class
我们想以两种模式显示这个页面：Read和Edit。我们可以重用Frame_RightPane，也就是显示联系人详细信息的面板上面的Read模式。我们为ContactDetailPage1定义一个构造函数，接受一个Boolean值来设置是否激活Edit模式，还接受一个int类型的索引，引用到ContactList里面的一个联系人项，也就是当前显示在页面上的这个联系人。
' Create a ContactDetailPage1 specifying edit mode value and index
' of ContactList item to be displayed when in Read mode.
Public Sub New(ByVal editMode As Boolean, ByVal itemNumber As Integer)
InitializeComponent()
Me.KeepAlive = True
' if in read mode...
If (editMode = False) Then
Dim cl As ContactList = _
CType(Application.Current.Properties("ContactList"), _
ContactList)
' if the contact list is populated get an object using index
If Not (cl Is Nothing) AndAlso cl.Count > 0 Then
Dim c As Contact = cl(itemNumber)
Me.RootGrid.DataContext = c
' set the input fields to read only
Me.txtEmailAddress.IsEnabled = False
Me.txtFirstName.IsEnabled = False
Me.txtLastName.IsEnabled = False
Me.ButtonPanel1.Visibility = Windows.Visibility.Hidden
Me.ButtonPanel2.Visibility = Windows.Visibility.Hidden
End If
Else
Me.btnHomePage.Visibility = Windows.Visibility.Hidden
Me.btnEmailAddress.Visibility = Windows.Visibility.Hidden
End If
End Sub
' of ContactList item to be displayed when in Read mode.
Public Sub New(ByVal editMode As Boolean, ByVal itemNumber As Integer)
InitializeComponent()
Me.KeepAlive = True
' if in read mode...
If (editMode = False) Then
Dim cl As ContactList = _
CType(Application.Current.Properties("ContactList"), _
ContactList)
' if the contact list is populated get an object using index
If Not (cl Is Nothing) AndAlso cl.Count > 0 Then
Dim c As Contact = cl(itemNumber)
Me.RootGrid.DataContext = c
' set the input fields to read only
Me.txtEmailAddress.IsEnabled = False
Me.txtFirstName.IsEnabled = False
Me.txtLastName.IsEnabled = False
Me.ButtonPanel1.Visibility = Windows.Visibility.Hidden
Me.ButtonPanel2.Visibility = Windows.Visibility.Hidden
End If
Else
Me.btnHomePage.Visibility = Windows.Visibility.Hidden
Me.btnEmailAddress.Visibility = Windows.Visibility.Hidden
End If
End Sub
