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

这节，阐述了xaml文件。

编写xaml源代码

现在，资源列表已经有了啊，我要在xaml页面中进行布局了，listView的xmal的源代码如下所示：

<Page
x:Class="MetroGrocer.Pages.ListPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MetroGrocer.Pages"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<!--grid布局控件  2行2列-->
<Grid Background="{StaticResource AppBackgroundColor}">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition/>
    </Grid.ColumnDefinitions>
       <!--跨行2列-->
    <StackPanel Grid.RowSpan="2">
       <!--文本框-->
      <TextBlock Style="{StaticResource HeaderTextStyle}" Margin="10"
            Text="Grocery List"/>
        <!--食品的列表 数据绑定数据模板-->
      <ListView x:Name="groceryList" Grid.RowSpan="2"
        ItemsSource="{Binding GroceryList}"
        ItemTemplate="{StaticResource GroceryListItemTemplate}"
        SelectionChanged="ListSelectionChanged" />
    </StackPanel>
    <!--进行了一步定位-->
    <StackPanel Orientation="Vertical" Grid.Column="1">
      <TextBlock Style="{StaticResource HeaderTextStyle}" Margin="10"
            Text="Item Detail"/>
    </StackPanel>
        <!--布局控件-->
    <Orientation="Vertical" Grid.Column="1" Grid.Row="1">
      <TextBlock Style="{StaticResource HeaderTextStyle}" Margin="10"
            Text="Store Detail"/>
            
    </StackPanel>
  </Grid>
</Page>

 你可以设置背景颜色的属性，此外，我在表格控件设置为2行2列。

 为了更好的布局，我加了一个stackpanel，使其布局更加的填满某个布局,相应的源代码如下：

1 <StackPanel Grid.RowSpan="2">

这个stackpanel控件包含了能够显示头部和一个列表的文本框。在屏幕的右方，我添加了一个stackpanels，使其一行一列。并且指定某个控件属于某行某列的属性。这个属性的z-index赋值为0，倘若你如果为某个控件没有指定这个属性的话 ，他就位于第一行第一列。下图就展示了布局的页面：

设计图面上显示的内容不是动态生成的，这就是你为什么不能看到图中数据的视图模型。将用一个列表视图控件显示动态内容。正如它的名字所暗示，列表视图显示一组列表中的项目。列表视图的三个属性，是这样设置的：

1   <!--ItemsSource 数据源 ItemTemplate数据的模版 SelectionChanged  选择改变的事件-->
2 <ListView x:Name="groceryList" Grid.RowSpan="2"
3   ItemsSource="{Binding GroceryList}"
4   ItemTemplate="{StaticResource GroceryListItemTemplate}"
5   SelectionChanged="ListSelectionChanged" />

我使用这些属性之间能够缩小Data Context属性与数据的模板宏观和微观的差距。List View控件itemsource的属性，就是告诉项目中listview控件如何显示数据。  绑定关键字，就是显示背后隐藏的数据的文件。

这个ItemTemplate告诉这个ListView某项显示的数据。使用StaticResource关键字是指定使用资源字典中的样式与GroceryListItemTemplate意味着指定数据模板。这个StackPanel三个文本框意味这viewModel的三个属性。

SelectionChanged这个属性指向了一个事件，而这个事件，将在源代码文件中通过一个方法来实现、
这就是listViewXaml文件的编码，你看懂没。后面的篇幅继续下面的议程。