Windows Phone新手开发教程（二）

阅读更多

这是本系列的第2部分。在这里我将讲解StackPanel和Grid元素。很多时候开发人员对于在何处放置包含StackPane或Grid元素的控制元件感到困惑。那么我们就来了解一些关于StackPane和Grid元素的东西。

StackPanel元素

StackPanel元素主要用在网格的顶部或者底部。因此，当你打算设计一个简单的web应用程序时，你可以使用Windows Phone的StackPanel把页面名称放置在标题标签中。

在知晓页面名称和应用程序名称的情况下你可以就使用StackPanel了，简单地说就是使用StackPanel展示页面名称并对一个系列的子元素进行横向的或者纵向的排列。

    "LayoutRoot" background= "Transparent" >

            "Auto" >
            "*" >


        "TitlePanel" grid.row= "0" margin= "12,17,0,28" >
            "ApplicationTitle" text= "MY APPLICATION" style= "{StaticResource PhoneTextNormalStyle}" >
            "PageTitle" text= "StackPanel" margin= "9,-7,0,0" style= "{StaticResource PhoneTextTitle1Style}" >


        "150" >
            "Red" width= "100" height= "100" margin= "5" >
            "Green" width= "100" height= "100" margin= "5" >
            "Violet" width= "100" height= "100" margin= "5" >
            "Firebrick" width= "100" height= "100" margin= "5" >
            "White" width= "100" height= "100" margin= "5" >

Grid元素

Grid元素提供了对于多个行列的排布的更加灵活的控制。对于Grid元素，你可以使用RowDefinition和ColumnDefinition这两个属性来对行和列设置；也可以在一个单元格中使用行和列的定义来设置如Textblock、TextBox、Hyperlinkbutton和Image这样的控制元件。

下面的XAML显示了如何创建一个有4行和2列的网格：

• 第一行包含文本的高度设置为自动。
• 第二行的高度设置为100px。
• 第三行和第四行设置为剩下的可用高度。
• 列的宽度使用“*”，设置为等于可用的容器宽度。

"LayoutRoot" background= "Transparent" >

        "*" >
        "100" >
        "*" >
        "*" >


        "*" >
        "*" >


    "TitlePanel" grid.columnspan= "2" grid.row= "0" margin= "12,17,0,28" >
        "ApplicationTitle" text= "MY APPLICATION" style= "{StaticResource PhoneTextNormalStyle}" >
        "PageTitle" text= "page name" margin= "9,-7,0,0" style= "{StaticResource PhoneTextTitle1Style}" >


    "BLUE" grid.column= "0" grid.row= "1" >
    "RED" grid.column= "1" grid.row= "1" >
    "pink" grid.column= "0" grid.row= "2" >
    "Aqua" grid.column= "1" grid.row= "2" >
    "BlueViolet" grid.column= "0" grid.row= "3" >
    "DarkMagenta" grid.column= "1" grid.row= "3" >

 

本文翻译自c-sharpcorner.com，原文地址