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

这节，我们来建立一个用户控件瞧一瞧

建立用户控件

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