布局---学习笔记（三）

panel（面板）类是silverlight最重要的类之一，他在silverlight中扮演着重要的角色，panel类本身定义了三个属性

  1 Brush类型的Background属性，知名见意比较好理解。

  2 UielementCollection类型的Children属性，此属性很复杂，面板类能承载多个元素，而且有多种承载样式，可以把元素放在栈中，网格中，圆圈中，显示成扇形，传送带的形式。

  3 bool类型的IsitemHost属性

   object->DependencyObject->UIEement->FrameworkElement->Panel->(Canvas,Grid, StackPanel)

目前重点学习Grid,Canvas,stacKPanel面板类

1 唯一单元格 Grid

通过前面的学习我们知道了多个元素可直接放入唯一单元格中。看例子分析

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <TextBlock x:Name="Text" FontSize="28" Text="hello liu xiu cai at right bottom" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
        <Image Source="wt43.jpg"/>
        <Ellipse Stroke="{StaticResource PhoneAccentBrush}" StrokeThickness="24"/>
        <TextBlock Text="hi liuhao at left top" HorizontalAlignment="Left" VerticalAlignment="Top"/>        
    </Grid>
</Grid>
运行效果：

                              

两个textblock的文本显示是根据字体大小决定，image元素根据Grid所允许的面积来显示最大尺寸，ellispse则是尽可能的拉伸，由于元素加入Grid.Chilred顺序不同，会覆盖上层元素。

现在我们在Gird 标签中加入 <stackPanel> 看看效果怎么能样？

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <StackPanel x:Name="stack" Orientation="Vertical">
    <TextBlock x:Name="Text" FontSize="28" Text="hello liu xiu cai at right bottom" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
    <Image Source="wt43.jpg" Height="515" Width="450" />
    <Ellipse Stroke="{StaticResource PhoneAccentBrush}" StrokeThickness="24"/>
    <TextBlock Text="hi liuhao at left top" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    </StackPanel>
</Grid>

                                            

由运行结果来看stackpanel在栈中将其子元素自顶向下排序，子元素就不在重叠了。  

stanckpanel属性Orientation="Vertical"，垂直显示。这里注意了，页面对方向改变的响应使用PhoneApplicationPage类的ApplicationPage属性处理。PhoneApplicationPage定义另外一个属性Orientation用来表示手机当前的方向是横向还是竖向，但stanckpanel中的属性Orientation与页面没有任何关系。

stackpanel与文本。

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Border Background="{StaticResource PhoneAccentBrush}" Padding="12"
            CornerRadius="28" HorizontalAlignment="Center" VerticalAlignment="Center" Height="81">
        <StackPanel Orientation="Horizontal" >
            <TextBlock Text="One " FontSize="40"/>
            <TextBlock Text=" two" FontSize="40"/>
            <TextBlock Text=" three" FontSize="40" />
            <TextBlock Text=" four" FontSize="40"/>
            <TextBlock Text=" fire" FontSize="40"/>
        </StackPanel>
    </Border>
    <Border VerticalAlignment="Top">
        <Border>
            <StackPanel>
                <TextBlock Text="One" FontWeight="Bold" FontStyle="Normal" TextDecorations="Underline"/>
                <TextBlock Text=" four" FontSize="40"/>
                <TextBlock Text=" fire" FontSize="40"/>
            </StackPanel>
        </Border>
    </Border>

</Grid>

运行效果：

                                             

  
stackpanel并没有padding和margin属性所以当你需要文本的背景颜色稍微延伸到文本之外，所以你需要将每个单独的TextBlock元素设置margin或者padding属性，其实有一个更简单解决方案，把stackpanel放到border元素里面，什么对齐，边距在border里面去。

<TextBlock Text=" four" FontSize="40" Visibility="Collapsed"/>
<TextBlock Text=" fire" FontSize="40" Opacity="0" IsHitTestVisible="False"/>

上面的代码
visbility：文本隐藏，不保留其大小。

opacity=”0” 隐藏，保留其大下。

ishittestvisble 隐藏之后，还是会影响触摸事件，设置为false，禁止响应。

 

 

先就到这儿了… 明后两天继续学习更复杂的布局