今天的议程，有三个①展示弹出对话框②创建更复杂的控件③并为复杂的控件赋值
（1）展示弹出对话框
上节，我们已经写好了这个对话框，并且已经引入了项目中去了，那我们就有必要展示了。
当用户点击了这个按钮以后，这个用户控件就会出现。下列的源代码就是实现了这个功能：
1 private void AppBarButtonClick(object sender, RoutedEventArgs e) {
2 //获取相应的源对象
3 if (e.OriginalSource == AppBarDoneButton
4 && viewModel.SelectedItemIndex > -1) {
5 //移去对象 viewModel.GroceryList.RemoveAt(viewModel.SelectedItemIndex);
6 viewModel.SelectedItemIndex = -1;
7 } else if (e.OriginalSource == AppBarZipButton) {
8 //展示这个对象
9 HomeZipFlyout.Show(this, this.BottomAppBar, (Button)e.OriginalSource);
10 }
11 }这个方法的思路，我是获取相应的源对象，当前的选择的对象appBarZipButton的对象，有当前选项的话， 就展示这个对象。相应的效果如下：
展示更复杂的flyOut对象
怎么创建更复杂的flyOut控件。
现在，我已经添加了基本的样式了，我定义了这个能够添加列表的控件。这个控件的差异是不能够two-way绑定数据的差异。尤其不需要特别复杂的技术，因此，我创建一个较为复杂的，使您学得到更多的知识。因此，我使用了usercontrol的控件在flyout文件夹创建了一个addItemFlyOut控件下列的源代码如下：
1 <UserControl
2 x:Class="MetroGrocer.Flyouts.AddItemFlyout"
3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5 xmlns:local="using:MetroGrocer.Flyouts"
6 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8 mc:Ignorable="d"
9 d:DesignHeight="265"
10 d:DesignWidth="435">
11 <!--Popup 弹出的控件 StackPanel 布局控件 Grid 布局控件 4行2列-->
12 <Popup x:Name="AddItemPopup" IsLightDismissEnabled="True" Width="435" Height="265" >
13 <StackPanel Background="Black">
14 <Border Background="#85C54C" BorderThickness="4">
15 <Grid Margin="10">
16 <Grid.RowDefinitions>
17 <RowDefinition/>
18 <RowDefinition/>
19 <RowDefinition/>
20 <RowDefinition/>
21 </Grid.RowDefinitions>
22 <Grid.ColumnDefinitions>
23 <ColumnDefinition Width="Auto"/>
24 <ColumnDefinition Width="300"/>
25 </Grid.ColumnDefinitions>
26 <TextBlock Text="Name:" Style="{StaticResource AddItemText}" />
27 <TextBlock Text="Quantity:" Grid.Row="1"
28 Style="{StaticResource AddItemText}" />
29 <TextBlock Text="Store:" Grid.Row="2"
30 Style="{StaticResource AddItemText}" />
31 <TextBox x:Name="ItemName" Grid.Column="1"
32 Style="{StaticResource AddItemTextBox}" />
33 <TextBox x:Name="ItemQuantity" Grid.Row="1" Grid.Column="1"
34 Style="{StaticResource AddItemTextBox}" />
35 <ComboBox x:Name="ItemStore" Grid.Column="1" Grid.Row="2"
36 Style="{StaticResource AddItemStore}"
37 ItemsSource="{Binding StoreList}"
38 DisplayMemberPath="" />
39 <StackPanel Orientation="Horizontal" Grid.Row="3"
40 HorizontalAlignment="Center"
41 Grid.ColumnSpan="2">
42 <Button Click="AddButtonClick">Add Item</Button>
43 </StackPanel>
44 </Grid>
45 </Border>
46 </StackPanel>
47 </Popup>
48 </UserControl>这种布局的模式非常像我们在ItemDetail中创建的布局的模式，他嵌入了一个框架的控件在其中。更重要是需要来改变其中的样式，书写一定的源代码，来满足不同的需求，我感到非常的高兴了，能够使其原先的布局的模式能够复用。
书写代码
上文说我们要书写源代码，满足相应的需求。下列源代码如下：
1 using System;
2 using MetroGrocer.Data;
3 using Windows.UI.Xaml;
4 using Windows.UI.Xaml.Controls;
5 namespace MetroGrocer.Flyouts {
6 //addItemFlyOut控件
7 public sealed partial class AddItemFlyout : UserControl {
8 //构造函数
9 public AddItemFlyout() {
10 this.InitializeComponent();
11 }
12 //展示的方法
13 public void Show(Page page, AppBar appbar, Button button) {
14 //popup是否显示
15 AddItemPopup.IsOpen = true;
16 FlyoutHelper.ShowRelativeToAppBar(AddItemPopup, page, appbar, button);
17 }
18 //addButton的方法
19 private void AddButtonClick(object sender, RoutedEventArgs e) {
20 //获取数据的List添加Item ((ViewModel)DataContext).GroceryList.Add(new GroceryItem {
21 Name = ItemName.Text,
22 Quantity = Int32.Parse(ItemQuantity.Text),
Store = ItemStore.SelectedItem.ToString() }); AddItemPopup.IsOpen = false; } } }
这个用户控件的代码文件， show方法，在page页面中添加一个flyOut控件，使其控件在其appbar 控件的附近。 AddButtonClick而是一个事件，像数据的绑定列表添加某项。
添加像列表中添加一个viewmodel对象。实现这个效果，可以有许多方法来实现。这简单的方法，是读取data Context属性，然后以列表的形式来形式来显示。你看到没有，我上面的这些属性本身就是这个viewmodel的值，用以赋值必须到viewmodel这个对象中。另外，我已经说过了，这个datacontext的属性也是相互继承的，你在某某page设置的这个对象，在他的usercontrol中自然也访问的聊。
一旦我们有了viewmodel这个对象以后，就是向GroceryList集合中添加GroceryItem，由于这个集合是observable，所以在界面上也能自由显示出来
哝——这节议程ok
