彩票走势图

Windows Phone新手开发教程(二)

原创|使用教程|编辑:郝浩|2015-07-28 15:38:31.000|阅读 262 次

概述:本文讲解了关于StackPanel和Grid元素的基础。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

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

StackPanel元素

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

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

<!--LayoutRoot is the root grid where all page content is placed-->  
    <Grid x:Name="LayoutRoot" Background="Transparent">  
        <Grid.RowDefinitions>  
            <RowDefinition Height="Auto"/>  
            <RowDefinition Height="*"/>  
          </Grid.RowDefinitions> 
        <!--TitlePanel contains the name of the application and page title-->  
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">  
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>  
            <TextBlock x:Name="PageTitle" Text="StackPanel" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>  
         </StackPanel>  
        <!--ContentPanel - place additional content here-->  
        <StackPanel Margin="150">  
            <Rectangle Fill="Red" Width="100" Height="100" Margin="5" />  
            <Rectangle Fill="Green" Width="100" Height="100" Margin="5" />  
            <Rectangle Fill="Violet" Width="100" Height="100" Margin="5" />  
            <Rectangle Fill="Firebrick" Width="100" Height="100" Margin="5" />  
            <Rectangle Fill="White" Width="100" Height="100" Margin="5" />  
        </StackPanel>  
    </Grid>
Windows Phone新手开发教程

Grid元素

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

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

  • 第一行包含文本的高度设置为自动。
  • 第二行的高度设置为100px。
  • 第三行和第四行设置为剩下的可用高度。
  • 列的宽度使用“*”,设置为等于可用的容器宽度。
<Grid x:Name="LayoutRoot" Background="Transparent">  
    <Grid.RowDefinitions>  
        <RowDefinition Height="*"/>  
        <RowDefinition Height="100"/>  
        <RowDefinition Height="*"/>  
        <RowDefinition Height="*"></RowDefinition>  
    </Grid.RowDefinitions>  
    <Grid.ColumnDefinitions>  
        <ColumnDefinition Width="*"></ColumnDefinition>  
        <ColumnDefinition Width="*"></ColumnDefinition>  
    </Grid.ColumnDefinitions>  
    <!--TitlePanel contains the name of the application and page title-->  
    <StackPanel x:Name="TitlePanel" Grid.ColumnSpan="2"  Grid.Row="0"    
Margin="12,17,0,28">  
        <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION"   
Style="{StaticResource PhoneTextNormalStyle}"/>  
        <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0"   
Style="{StaticResource PhoneTextTitle1Style}"/>  
    </StackPanel>  
    <!--ContentPanel - place additional content here-->  
    <Rectangle Fill="BLUE" Grid.Column="0"  Grid.Row="1"></Rectangle>  
    <Rectangle Fill="RED" Grid.Column="1"  Grid.Row="1"></Rectangle>  
    <Rectangle Fill="pink" Grid.Column="0"  Grid.Row="2"></Rectangle>  
    <Rectangle Fill="Aqua" Grid.Column="1"  Grid.Row="2"></Rectangle>  
    <Rectangle Fill="BlueViolet"  Grid.Column="0"  Grid.Row="3"></Rectangle>  
    <Rectangle Fill="DarkMagenta"  Grid.Column="1"  Grid.Row="3"></Rectangle>  
</Grid>  
Windows Phone新手开发教程

 

本文翻译自


标签:移动开发

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP