今天的议程，有三个①展示弹出对话框②创建更复杂的控件③并为复杂的控件赋值
（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