这节，我们来建立一个用户控件瞧一瞧
建立用户控件
以前，我都说过这么个事情，如果把所有的文件写在一个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控件的界面已经做好了。