手把手玩转win8开发系列课程（22）

今天的议程，有三个①展示弹出对话框②创建更复杂的控件③并为复杂的控件赋值

（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控件下列的源代码如下：

<UserControl
  x:Class="MetroGrocer.Flyouts.AddItemFlyout"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:MetroGrocer.Flyouts"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  d:DesignHeight="265"
  d:DesignWidth="435">
   <!--Popup  弹出的控件 StackPanel  布局控件 Grid 布局控件 4行2列-->
  <Popup x:Name="AddItemPopup" IsLightDismissEnabled="True" Width="435" Height="265" >
    <StackPanel Background="Black">
      <Border Background="#85C54C" BorderThickness="4">
        <Grid Margin="10">
          <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
          </Grid.RowDefinitions>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="300"/>
          </Grid.ColumnDefinitions>
          <TextBlock Text="Name:" Style="{StaticResource AddItemText}" />
          <TextBlock Text="Quantity:" Grid.Row="1"
                Style="{StaticResource AddItemText}" />
          <TextBlock Text="Store:" Grid.Row="2"
                Style="{StaticResource AddItemText}" />
<TextBox x:Name="ItemName" Grid.Column="1"
               Style="{StaticResource AddItemTextBox}" />
          <TextBox x:Name="ItemQuantity" Grid.Row="1" Grid.Column="1"
               Style="{StaticResource AddItemTextBox}" />
          <ComboBox x:Name="ItemStore" Grid.Column="1" Grid.Row="2"
               Style="{StaticResource AddItemStore}"
               ItemsSource="{Binding StoreList}"
               DisplayMemberPath="" />
          <StackPanel Orientation="Horizontal" Grid.Row="3"
                HorizontalAlignment="Center"
                Grid.ColumnSpan="2">
            <Button Click="AddButtonClick">Add Item</Button>
          </StackPanel>
        </Grid>
      </Border>
    </StackPanel>
  </Popup>
</UserControl>

这种布局的模式非常像我们在ItemDetail中创建的布局的模式，他嵌入了一个框架的控件在其中。更重要是需要来改变其中的样式，书写一定的源代码，来满足不同的需求，我感到非常的高兴了，能够使其原先的布局的模式能够复用。

书写代码

上文说我们要书写源代码，满足相应的需求。下列源代码如下：

using System;
using MetroGrocer.Data;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace MetroGrocer.Flyouts {
    //addItemFlyOut控件
  public sealed partial class AddItemFlyout : UserControl {
    //构造函数
    public AddItemFlyout() {
      this.InitializeComponent();
    }
    //展示的方法
    public void Show(Page page, AppBar appbar, Button button) {
      //popup是否显示
      AddItemPopup.IsOpen = true;
      FlyoutHelper.ShowRelativeToAppBar(AddItemPopup, page, appbar, button);
    }
    //addButton的方法
    private void AddButtonClick(object sender, RoutedEventArgs e) {
//获取数据的List添加Item  ((ViewModel)DataContext).GroceryList.Add(new GroceryItem {
        Name = ItemName.Text,
        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