这节，我们来建立一个用户控件瞧一瞧
建立用户控件
以前，我都说过这么个事情，如果把所有的文件写在一个xaml文件中，这样一个页面就会变得特别的冗长。所以,我更加的喜欢吧flyouts定义成用户控件。注意用户控也是包含一个xmal设计文件和一个源代码文件。（我这里不会重点深入xaml的实质，但这部分的源码我会在这里展示出来）。为了更好的管理，我在项目中建立了一个相应的文件夹叫做Flyouts的文件夹，并且使用原始的用户控件的模板创建一个新用户控件叫做HomeZipCodeFlyout，相应的源代码如图所示：
1 <UserControl
2 x:Class="MetroGrocer.Flyouts.HomeZipCodeFlyout"
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="130"
10 d:DesignWidth="350">
11 <!--Popup 这个弹出的对话框-->
12 <Popup x:Name="HomeZipCodePopup"
13 IsLightDismissEnabled="True" Width="350" Height="130" >
14 <!--布局控件 背景-->
15 <StackPanel Background="Black">
16 <!--Border 边框控件-->
17 <Border Background="#85C54C" BorderThickness="4">
18 <StackPanel>
19 <StackPanel Orientation="Horizontal" Margin="10">
20 <TextBlock Style="{StaticResource PopupTextStyle}"
21 Text="Home Zip Code:" VerticalAlignment="Center"
22 Margin="0,0,10,0" />
23 <TextBox Height="40" Width="150" FontSize="20"
24 Text="{Binding Path=HomeZipCode, Mode=TwoWay}" />
25 </StackPanel>
26 <Button Click="OKButtonClick" HorizontalAlignment="Center"
27 Margin="10">OK</Button>
28 </StackPanel>
29 </Border>
30 </StackPanel>
31 </Popup>
32 </UserControl>命名及规范，命名及知意。flyout的控件的作用就是允许用户更改ViewModel中的HomeZipCode属性的值，作用在这个项目中不是很大，但他保持了项目很好的扩展性。
说一说UserControl吧！他在项目中更多的是以的模板使用的，你定义xaml，是你要创建哪些元素在模板中。当你创建flyouts这个控件的时候，这内容是在Popup的里面。我的布据中是用文本框得到相应的输入，在控件中，用户点击某某按钮，能得到相应值，就是我们周围加了像这样各种各样的控件元素了。
我在popup元素中设置了3个非常非常重要属性，每个属性都粗体显示。这个IsLightDismissEnabled属性，意思是用户点击了popup以外的部分，这个popup控件是否消失了，默认值是真，为什么了，这样能够给用户很好的弹出对话框的体验。
至于宽度和高度这样的属性，还有什么好说的了，我必须要设置，并且要设置好，因为他要有足够的大小显示文字内容，至于这些属性怎么用于定位。后面的篇幅我会给予了说明。
特别提醒，只用运用了精确的高度和宽度，才能够使其popup控件定位。
哝——一个popup控件的界面已经做好了。
