Windows Phone 7页面布局之Grid布局

2011年12月5日

12:57

 源文档 <http://b1.cnc.qzone.qq.com/cgi-bin/blognew/blog_output_data?uin=972103830&blogid=1323051117&styledm=cnc.qzonestyle.gtimg.cn&imgdm=cnc.qzs.qq.com&bdm=b.cnc.qzone.qq.com&mode=2&numperpage=15&property=GoRE&timestamp=1323060354&dprefix=cnc.&g_tk=5381&ref=qzone&v6=1>

Windows Phone 7的页面布局

 WindowsPhone 的页面布局主要通过使用以下三个控件来实现：

 (1).Grid 画布布局控件：

 Grid:实现由列和行控制的网格布局，类似于HTML中的Table，与HTML不同的是Grid的灵活性更强，因为Grid中的行和列的定义是与内容的定义是分离的，因此更具有灵活性。在XAMl中已经被作为了一种默认是我布局方式。

在Grid中，有以下几个元素的附加属性：

Grid.Row指定元素所处的行

Grid.Clumn指定元素所在的列

Grid.RawSpan指定元素的行跨度(即跨越几行)

Grid.ClumnSpan指定元素的列跨度(即跨度几列)。

通过这几个属性，即可将元素设置到相应的位置。Grid控件也可以嵌套使用，但是元素的附加属性只针对直接包含元素的那个Grid控件有效。

下面看一个Grid的示例：

实例中有两种操作Grid控件的方法，一是在XAML文件中操作Grid,二是在后台通过C#代码操作Grid.

示例代码如下：

这是在XAML中操作Grid控件的核心代码：

    <Grid x:Name="ContentPanel"Grid.Row="1" Margin="12,0,12,0">

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="180*"/>

                <ColumnDefinition Width="300*"/>

            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>

                <RowDefinition Height="100*"/>

                <RowDefinition Height="100*"/>

                <RowDefinition Height="400*"/>

            </Grid.RowDefinitions>

            <TextBlock Height="23"HorizontalAlignment="Left" Margin="12,13,0,0" Name="textBlock1"Text="UserName"VerticalAlignment="Top" />

            <TextBlockGrid.Row="1" Height="23"HorizontalAlignment="Left" Margin="12,15,0,0" Name="textBlock2"Text="PassWord"VerticalAlignment="Top" />

            <TextBoxGrid.Column="1" Height="39"HorizontalAlignment="Left" Margin="4,5,0,0"Name="UserNameTextBox"VerticalAlignment="Top" Width="118"/>

            <TextBoxGrid.Column="1" Grid.Row="1" Height="39" HorizontalAlignment="Left" Margin="4,5,0,0"Name="PassWordTextBox"VerticalAlignment="Top" Width="118"/>

            <Button Content="添加一行" Grid.Column="1" Grid.Row="2" Height="51"HorizontalAlignment="Left"Name="SubmitButton"VerticalAlignment="Top" Width="110" Click="SubmitButton_Click"/>

        </Grid>

  下面我通过C#代码在后台实现对Grid控件的操作，例如点击增加一行按钮则添加新的一行，并增加新的元素。

以下是核心代码：

        private void SubmitButton_Click(object sender,RoutedEventArgs e)

        {

            //新建一个RowDefinition对象

            RowDefinition newRow = new RowDefinition();

            //设置RowDefinition对象的属性

            newRow.Height= new GridLength(100, GridUnitType.Pixel);

            //在指定的位置插入这一行

            ContentPanel.RowDefinitions.Insert(Grid.GetRow(SubmitButton), newRow);

 

            //将提交按钮下移一行

            Grid.SetRow(SubmitButton,Grid.GetRow(SubmitButton) +1);

 

            //新建一个TextBlock对象

            TextBlock countryTextBlock = newTextBlock();

            //设置TextBlock对象的属性

            countryTextBlock.Text= "Country";

            countryTextBlock.Foreground= textBlock1.Foreground;

            countryTextBlock.Margin= textBlock1.Margin;

            //将新建的TextBlock添加到内容面板中

            ContentPanel.Children.Add(countryTextBlock);

            //设置TextBlock所在内容面板(即Grid控件)中的位置

            Grid.SetColumn(countryTextBlock,0);

            Grid.SetRow(countryTextBlock,Grid.GetRow(SubmitButton)-1);

 

            //新建一个ListBox对象

            ListBox countryListBox = newListBox();

            //设置ListBox对象的属性

            countryListBox.SelectionMode= SelectionMode.Single;

            countryListBox.Margin= new Thickness(50, 0, 0, 0);

            //向ListBox中添加选择项

            countryListBox.Items.Add("China");

            countryListBox.Items.Add("American");

            countryListBox.Items.Add("EngLand");

            //将新建的ListBox添加到内容面板中

            ContentPanel.Children.Add(countryListBox);

            //设置ListBox所在内容面板中的位置

            Grid.SetRow(countryListBox,Grid.GetRow(countryTextBlock));

            Grid.SetColumn(countryListBox,1);

        }

 

 Grid画布说明：在Silverlight元素的Width/Height属性中，纯数字代表元素的绝对高度或宽度，即是一个固定的值，数字如果加上*号，则表示按比例分配剩余空间，分配过程中优先分配固定空间，剩余部分按比例分配。除了数字和加*之外，还有一个Auto,是指根据元素大小自动分配。