windows phone 7布局（布局系统）-------学习笔记

我们接着上一节继续学习，来看看scrollviewer控件。

内容超出了屏幕的显示妇女为，位于底部（右边）的元素将无法显示，在这种情况下，我们一般考虑将子元素内容放入scrollviewer中，为内容提供滚动条，实际上并不能通过滚动条来滑动，是用手指触摸。默认情况下垂直滚动条可见，水平不可见，也可以通过设置达到自己想要的效果 hiddle不可见，auto(需要时可见)，以及可见不响应事件disabled.下面我们看一个简单的电子阅读器代码：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.Resources>
                <Style x:Key="paragraphstyle" TargetType="TextBlock">
                    <Setter Property="TextWrapping" Value="Wrap"/>
                    <Setter Property="Margin" Value="5"/>
                    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeSmall}"/>
                </Style>
            </Grid.Resources>
            <ScrollViewer Padding="5" HorzontalScrollBarVisblility=”visbible”>
                <StackPanel>
                    <TextBlock Style="{StaticResource paragraphstyle}">
                      &#x2003;  TTP Error 500.19 - Internal Server Error配置错误: 不能在此路径中使用此配置节。  如果在父级别上锁定了该节，--------便会出现这种情况 锁定是默认设置(overrideModeDefault="Deny") 或者是通过包含overrideMode="Deny"  &#x2003;-  allowOverride="false" 的位置标记明确设置的。  出现这个错误是因为 IIS 7 采用了更安全的 web.config 管理机制，默认情况下会锁住配置项不允许更改。 要取消锁定可以运行命令行 %windir%\system32\inetsrv\appcmd unlock config -section:system.webServer/handlers其中的 handlers 是错误信息中红字显示的节点名称。 如果modules也被锁定，可以运行%windir%\system32\inetsrv\appcmd unlock config -section:system.webServer/modules另外，如果使用Asp.net的朋友，在安装IIS7的时候一定记得勾选Asp.net，默认不选，也会出现类似的错误信息  我今天遇到的就是asp.net 未在IIS中注册。解决办法是找到Visual Studio 2008 命令提示工具或者是Visual Studio 2005 命令提示工具中。然后用管理员身份运行，输入命令

          </TextBlock>
                    <TextBlock Style="{StaticResource paragraphstyle}">
                         &#x2003;改表法。可能是你的帐号不允许从远程登陆，只能在localhost。这个时候只要localhost的那台电脑，登入mysql后，更改 "mysql" 数据库里的 "user" 表里的 "host" 项，从"localhost"改称"%" mysql -u root -pvmwaremysql><Run Foreground="Red"> use mysql;mysql>update user set host = '%' where user = 'root';mysql> select host, user from user;</Run>
                    </TextBlock>
                    <TextBlock Style="{StaticResource paragraphstyle}">
                        <Run FontStyle="Italic">liuhao</Run>
                    </TextBlock>
                </StackPanel>
                </ScrollViewer>
        </Grid>

运行效果如下：

                                                      

现在我们在Scrollview中设置HorzontalScrollBarVisblility=”visbible”，我们发现textblock中的文本全部都么有换行，为什么scrollview中设置会影响到textblock。接下来我们来了解sliverlight for windows phone 7的布局机制，了解布局机制是非常重要的，也是非常强大的一个功能。

布局一般遍历两次.遍历过程：从可视化树的顶部开始向下遍历所有的子元素，遍历从Phoneappliantionframe->phoneapplicationpage->直到没有子元素结束。

  1，第一次遍历负责查询子元素所需的大小。

  子元素如何确定自己的大小：每个子元素大小都是一个size结构体，根据元素的性质有多种方法确定自己的大小。如textblock根据字段的文字来确定width，hight。（父元素把所剩余空间给子元素自己安排。依次递归询问，直到没有子元素为止）

  2，二次遍历负责把子元素排到对于自己的相对的位置。

为深入理解布局机制，我们自己编写一个面板类

写面板类先了解如下知识

开始写吧！

在项目中重建一个类

namespace PhoneGrid
{

public class SingGridDemo:Panel
    {  
        /// <summary>
        /// 1，调用所有子元素measure确定子元素大小，2，返回面板类所需大小
        /// </summary>
        /// <param name="availableSize">面板大小</param>
        /// <returns>返回说有子元素所有宽度和大小</returns>
        protected override Size MeasureOverride(Size availableSize)
        {
            Size compositesize = new Size();
            foreach (UIElement child in Children)
            {
                child.Measure(availableSize);//确定面板大小
                compositesize.Width = Math.Max(compositesize.Width, child.DesiredSize.Width);
                compositesize.Height = Math.Max(compositesize.Height, child.DesiredSize.Height);
            }
            return compositesize;

        }
        /// <summary>
        /// 把子元素排序到它的表面上
        /// </summary>
        /// <param name="finalSize">父元素提供的大小</param>
        /// <returns></returns>
        protected override Size ArrangeOverride(Size finalSize)
        {
            foreach (UIElement child in Children)
            {
                child.Arrange(new Rect(new Point(), finalSize));
            }
            return base.ArrangeOverride(finalSize);
        }

    }

}

然后在xaml页面中导入

xmlns:local="clr-namespace:PhoneGrid"

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <local:SingGridDemo>
                <TextBlock Text="texblock liuhao right bootom" HorizontalAlignment="Right" VerticalAlignment="Bottom">
                </TextBlock>
                <TextBlock Text=" top right" HorizontalAlignment="Right" VerticalAlignment="Top"></TextBlock>
            </local:SingGridDemo>

</Grid>

运行效果如下与Grid面板类功能相似

                                                   

再来看看强大的Grid（跨行跨列）

1，auto 单元格的大小自动适应单元格的内容

2，固定像素

3，* 后加数字按比例分配空间

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
           <Grid.RowDefinitions>
               <RowDefinition Height="Auto"/>
               <RowDefinition Height="*" />
               <RowDefinition Height="Auto"/>
           </Grid.RowDefinitions>
           <Grid.ColumnDefinitions>
               <ColumnDefinition Width="2*"/>
               <ColumnDefinition Width="*"/>
           </Grid.ColumnDefinitions>
          
           <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Text="row0 column 0                  columspan2 "/>
           <TextBlock Grid.Row="1" Grid.Column="0" Text="row1    column"/>
           <Image Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="1" Source="wt43.jpg"/>

</Grid>

运行效果如下：

                                           

Grid介绍就完了，下面我们再来看看windows phone7中里另外常用的布局面板 stackpanel，canvas

stackpanel与Grid的主要区别stackpanel把所有子元素放入stack (堆),高度无限，内容不会重叠。（以后会深究学习）

代码实现上高度：size.height+=child.DesiredSize.Height;

Canvas:采用了绝对定位（后期会详细的学习，请指教！才学疏浅，错误地方，请指出）

 

明天学习APPlicationBar(应用程序栏)