(7)我们所有的界面和UI元素都会放在DocumentRoot这个Grid里面。下面,我们创建一个DockPanel_Menu放菜单栏。顶层MenuItems有两个:File和Edit,每个菜单项都会包含若干子MenuItems:
<!—Menu Bar-->
<DockPanel
Name="DockPanel_Menu"
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="0">
<Menu Background="White">
<MenuItem Header="File">
<MenuItem Header="New Contact" Click="LaunchNewContactWizard"/>
<MenuItem Header="New Group" Click="NotImplementedMsg"/>
<Separator />
<MenuItem Header="Properties" Click="NotImplementedMsg"/>
<MenuItem Header="Delete" Click="NotImplementedMsg"/>
<MenuItem Header="Import">
<MenuItem Header="Address book (WAB)..."
Click="NotImplementedMsg"/>
<MenuItem Header="Business card vCard)..."
Click="NotImplementedMsg"/>
</MenuItem>
<Separator />
<MenuItem Header="Exit" InputGestureText="Alt-F4"
Click="ExitApplication">
<MenuItem.ToolTip>
<ToolTip>
Click here to exit
</ToolTip>
</MenuItem.ToolTip>
</MenuItem>
</MenuItem>
</Menu>
<Menu Background="White">
<MenuItem Header="Edit">
<MenuItem Command="ApplicationCommands.Copy"/>
<MenuItem Command="ApplicationCommands.Paste"/>
</MenuItem>
</Menu>
</DockPanel>
<DockPanel
Name="DockPanel_Menu"
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="0">
<Menu Background="White">
<MenuItem Header="File">
<MenuItem Header="New Contact" Click="LaunchNewContactWizard"/>
<MenuItem Header="New Group" Click="NotImplementedMsg"/>
<Separator />
<MenuItem Header="Properties" Click="NotImplementedMsg"/>
<MenuItem Header="Delete" Click="NotImplementedMsg"/>
<MenuItem Header="Import">
<MenuItem Header="Address book (WAB)..."
Click="NotImplementedMsg"/>
<MenuItem Header="Business card vCard)..."
Click="NotImplementedMsg"/>
</MenuItem>
<Separator />
<MenuItem Header="Exit" InputGestureText="Alt-F4"
Click="ExitApplication">
<MenuItem.ToolTip>
<ToolTip>
Click here to exit
</ToolTip>
</MenuItem.ToolTip>
</MenuItem>
</MenuItem>
</Menu>
<Menu Background="White">
<MenuItem Header="Edit">
<MenuItem Command="ApplicationCommands.Copy"/>
<MenuItem Command="ApplicationCommands.Paste"/>
</MenuItem>
</Menu>
</DockPanel>
(8)下一步是工具栏。ToolBar有两个Buttons,允许您添加和删除联系人。我们稍后会实现添加的功能。至于删除,暂时由我们在上一步定义的NotImplementedMsg事件处理方法来处理。
<!-- Tool Bar -->
<DockPanel
Name="DockPanel_Toolbar"
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="1">
<ToolBar>
<Button Click="LaunchNewContactWizard" ToolTip="Add Contact">
+
</Button>
<Button Click="NotImplementedMsg" ToolTip="Delete Contact">
-
</Button>
</ToolBar>
</DockPanel>
<DockPanel
Name="DockPanel_Toolbar"
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="1">
<ToolBar>
<Button Click="LaunchNewContactWizard" ToolTip="Add Contact">
+
</Button>
<Button Click="NotImplementedMsg" ToolTip="Delete Contact">
-
</Button>
</ToolBar>
</DockPanel>
(9)左边的面板是这个地址簿应用程序的主要窗口,用来列出所有的联系人。我们使用ListBox,每个联系人的FirstName都是一个ListItem项。暂时让我们关注ListBox和DockPanel,稍后再回来看数据绑定。
既然看到这儿了,我们顺便为联系人列表定义一个上下文菜单。这样就可以添加一个联系人或者添加一个组了:
<!-- Left Pane for contact list view -->
<DockPanel
Name="DockPanel_LeftPane"
Grid.Column="0"
Grid.Row="2">
<ListBox Name="allContacts" SelectionChanged="ListItemSelected">
<ListBox.ContextMenu>
<ContextMenu>
<MenuItem Header="Add a Contact" Click="LaunchNewContactWizard"/>
<MenuItem Header="Add a Group" Click="NotImplementedMsg"/>
</ContextMenu>
</ListBox.ContextMenu>
</ListBox>
</DockPanel>
<DockPanel
Name="DockPanel_LeftPane"
Grid.Column="0"
Grid.Row="2">
<ListBox Name="allContacts" SelectionChanged="ListItemSelected">
<ListBox.ContextMenu>
<ContextMenu>
<MenuItem Header="Add a Contact" Click="LaunchNewContactWizard"/>
<MenuItem Header="Add a Group" Click="NotImplementedMsg"/>
</ContextMenu>
</ListBox.ContextMenu>
</ListBox>
</DockPanel>