码迷,mamicode.com
首页 > Web开发 > 详细

Silverlight

时间:2015-03-02 16:47:32      阅读:277      评论:0      收藏:0      [点我收藏+]

标签:

http://kb.cnblogs.com/zt/silverlight/

【第一步】理解布局管理

    先看Silverlight4离线文档中的介绍

容器

说明

Canvas

在 x,y 空间中绝对定位子元素。

StackPanel

相对于水平或垂直堆栈中的另一个子元素来定位子元素。

Grid

在行和列中定位子元素。

 

【第二步】Canvas面板介绍

    Canvas面板是一种很基础的布局面板,它可以定义一个区域,在该区域中可以使用相对于该区域的坐标显式定位子元素。

    你可以通过一种XAML的特性--“附加属性”来对Canvas中的元素进行定位,Canvas 为启用布局的 Panel 元素之一。每个子对象都呈现在 Canvas 区域中。通过指定 x 和 y 坐标,可以控制对象在 Canvas 中的定位。这些坐标以像素为单位。x 和 y 坐标通常使用 Canvas.Left 和 Canvas.Top 的附加属性来指定。Canvas.Left 指定对象与包含它的 Canvas 的左侧之间的距离(x 坐标);Canvas.Top 指定对象与包含它的 Canvas 的顶部之间的距离(y 坐标)。

    下面就打开昨天的“StudySilverlight”代码,将<Grid>先注释掉,我们写一个<Canvas>容器,向容器中添加两个按钮,指定其距离Canvas左侧的距离为50像素,距离上边为150像素,代码如下:

<Canvas x:Name="TestCanvas" Background="Silver">
    <Button x:Name="btnTest1" Content="按钮1" Width="100" Height="50" Canvas.Left="50" Canvas.Top="100"></Button>
    <Button x:Name="btnTest2" Content="按钮2" Width="100" Height="50" Canvas.Left="50" Canvas.Top="200"></Button>
</Canvas>

    添加两个按钮,设置在Canvas的布局后,显示结果如下:

技术分享

    Canvas适用于其中包含的UI元素比较固定的情况,但是你如果想向程序中添加更多的控件,或者UI需要改变大小或能够移动,Canvas显得就不是那么灵活了,那样的话,你不得不忙于手写代码来移动Canvas内的东西,所以,应付这种情况,更好的办法是使用其他带有相关功能的布局方法,接下来介绍下StackPanel。

【第三步】StackPanel面板介绍

    StackPanel是一种简单的布局面板,它支持用行或列的方式来定位其中包含的控件。它常用于安排页面上的一个很小部分的UI,例如,我们可以用下面的方式在页面上垂直排布三个按钮,代码如下:

<StackPanel x:Name="TestStackPanel" Background="Silver">
    <Button x:Name="btnTest1" Content="按钮1" Width="100" Height="50" Margin="10"></Button>
    <Button x:Name="btnTest2" Content="按钮2" Width="100" Height="50" Margin="10"></Button>
    <Button x:Name="btnTest3" Content="按钮3" Width="100" Height="50" Margin="10"></Button>
</StackPanel>

    在运行时,StackPanel会自动的在一个垂直的堆叠(Stack)中排列按钮,显示结果如下:

技术分享

    如果,我们在<StackPanel>中添加“Orientation="Horizontal"”附加属性的话,显示结果就会变成下图:

技术分享

【第四步】Grid面板介绍

    为什么把最重要的Grid放到最后呢?哎呀,实在是因为太实用、太重要了嘛,放在最下面当地基,呵呵~

    Grid控件是最灵活的布局面板,它支持多行和多列的方式排布,在概念上,它和HTML中的Table类似,但是不同于Table的是,你不需要把控件内嵌到标记中,而是通过定义<Grid.RowDefinitions>和<Grid.ColumnDefinitions>属性来定义控件所处的Grid的行或列,这两个属性是定义在<Grid>标签内,这样,你就可以在控件的附加属性中指定它属于哪一行哪一列,例如:

<Grid x:Name="TestGrid" ShowGridLines="True" Background="Silver">
        <Grid.RowDefinitions>
            <RowDefinition Height="60"></RowDefinition>
            <RowDefinition Height="60"></RowDefinition>
            <RowDefinition Height="60"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="110"></ColumnDefinition>
            <ColumnDefinition Width="110"></ColumnDefinition>
            <ColumnDefinition Width="110"></ColumnDefinition>
        </Grid.ColumnDefinitions>
</Grid>

    其中“ShowGridLines="True"”是可以显示分割线的,这样便于演示,我们就定义了一个三行三列的类似于表格的Grid,这样还不行,我们往里面添加几个按钮试试。在</Grid.ColumnDefinitions>下面添加按钮,代码如下:

        <Button x:Name="btnTest1" Content="按钮1" Width="100" Height="50" Grid.Row="1" Grid.Column="0"></Button>
        <Button x:Name="btnTest2" Content="按钮2" Width="100" Height="50" Grid.Row="2" Grid.Column="1"></Button>
        <Button x:Name="btnTest3" Content="按钮3" Width="100" Height="50" Grid.Row="0" Grid.Column="1"></Button>
        <Button x:Name="btnTest4" Content="按钮4" Width="100" Height="50" Grid.Row="1" Grid.Column="2"></Button>

    通过Grid.Column和Grid.Row,我们指定按钮的位置在第几行第几列,在Grid中定义多行和多列的时候,还可以预先设置行和列的宽度或高度,灵活性明显要高于上两种方法。显示结果如下:

技术分享

 

 

Silverlight

标签:

原文地址:http://www.cnblogs.com/weihengblogs/p/4308914.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!