xmlns @H_404_266@="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x @H_404_266@="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d @H_404_266@="http://schemas.microsoft.com/Expression/blend/2008"
xmlns:mc @H_404_266@="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable @H_404_266@="d"
xmlns:navigation @H_404_266@="clr-namespace:System.windows.Controls;assembly=System.windows.Controls.Navigation"
d:DesignWIDth @H_404_266@="640" d:DesignHeight @H_404_266@="480"
Title @H_404_266@="StackPanelDemo Page" @H_404_266@>
@H_404_266@< StackPanel Height @H_404_266@="100" name @H_404_266@="stackPanel1" WIDth @H_404_266@="200" Background @H_404_266@="Yellow" @H_404_266@>
@H_404_266@< button Content @H_404_266@="按钮一" Height @H_404_266@="23" name @H_404_266@="button1" WIDth @H_404_266@="100" @H_404_266@/>
@H_404_266@< button Content @H_404_266@="按钮二" Height @H_404_266@="23" name @H_404_266@="button2" WIDth @H_404_266@="200" @H_404_266@/>
@H_404_266@< button Content @H_404_266@="按钮三" Height @H_404_266@="23" name @H_404_266@="button3" WIDth @H_404_266@="400" @H_404_266@/>
@H_404_266@</ StackPanel @H_404_266@>
@H_404_266@</ navigation:Page @H_404_266@> 这个Page 的显示效果如下: 在上面的代码中我们设置StackPanel 的WIDth 为200 ,没有设置MaxWIDth 、MinWIDth 的值,最终实际显示宽度为200 ,因为此时MaxWIDth 和MinWIDth 都采用了默认值,因为这这三个值有冲突但是都在限制(没有找到具体对限制的定义,周公推测为MinWIDth ≤WIDth ≤MaxWIDth ,如果您觉得周公的推测不正确,请告知以免误导大家,谢谢)之内,所以最终实际宽度为200 。 如果设置StackPanel 的WIDth 、MaxWIDth 、MinWIDth 分别为200 、400 、100 ,最终实际显示宽度仍为200 ,原因同上,如下图所示: 如果设置StackPanel 的WIDth 、MaxWIDth 、MinWIDth 分别为200 、100 、100 ,最终实际显示宽度为100 ,这里MaxWIDth 和MinWIDth 都是100 ,而WIDth 却是200 不在限制之内,所以最终显示宽度为MinWIDth 设置的宽度,如下图所示: 如果设置StackPanel 的WIDth 、MaxWIDth 、MinWIDth 分别为200 、400 、500 ,最终实际显示宽度为500 ,这里MaxWIDth 和MinWIDth 分别是400 和500 ,而WIDth 却是200 不在限制之内,所以最终显示宽度也为MinWIDth 设置的宽度,如下图所示: GrID 布局用法 GrID 布局是Silverlight 一种比较复杂的布局,它有点像我们HTML 中的table 元素,将空间划分为行和列组成的单元格,在每个单元格中可以放置其它元素,下面是一个使用GrID 的例子: @H_404_266@< navigation:Page x:Class @H_404_266@="SilverlightDemo1.GrIDDemo1"
xmlns @H_404_266@="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x @H_404_266@="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d @H_404_266@="http://schemas.microsoft.com/Expression/blend/2008"
xmlns:mc @H_404_266@="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable @H_404_266@="d"
xmlns:navigation @H_404_266@="clr-namespace:System.windows.Controls;assembly=System.windows.Controls.Navigation"
d:DesignWIDth @H_404_266@="400" d:DesignHeight @H_404_266@="300"
Title @H_404_266@="GrIDDemo1 Page" @H_404_266@>
@H_404_266@< GrID x:name @H_404_266@="LayoutRoot" Background @H_404_266@="Pink" @H_404_266@>
@H_404_266@< GrID.RowDeFinitions @H_404_266@>
@H_404_266@< RowDeFinition @H_404_266@/>
@H_404_266@< RowDeFinition Height @H_404_266@="200" @H_404_266@/>
@H_404_266@</ GrID.RowDeFinitions @H_404_266@>
@H_404_266@< GrID.ColumnDeFinitions @H_404_266@>
@H_404_266@< ColumnDeFinition WIDth @H_404_266@="100" @H_404_266@/>
@H_404_266@< ColumnDeFinition WIDth @H_404_266@="100" @H_404_266@/>
@H_404_266@< ColumnDeFinition WIDth @H_404_266@="100" @H_404_266@/>
@H_404_266@< ColumnDeFinition @H_404_266@/>
@H_404_266@</ GrID.ColumnDeFinitions @H_404_266@>
@H_404_266@< button Content @H_404_266@="按钮一" Height @H_404_266@="23" HorizontalAlignment @H_404_266@="left" name @H_404_266@="button1" VerticalAlignment @H_404_266@="Center" WIDth @H_404_266@="75" GrID.Column @H_404_266@="0" GrID.Row @H_404_266@="0" @H_404_266@/>
@H_404_266@< button Content @H_404_266@="按钮二" GrID.Column @H_404_266@="1" GrID.Row @H_404_266@="0" Height @H_404_266@="23" HorizontalAlignment @H_404_266@="Center" name @H_404_266@="button2" VerticalAlignment @H_404_266@="top" WIDth @H_404_266@="75" @H_404_266@/>
@H_404_266@< TextBox GrID.Column @H_404_266@="1" GrID.Row @H_404_266@="1" Height @H_404_266@="23" HorizontalAlignment @H_404_266@="Center" name @H_404_266@="textBox1" VerticalAlignment @H_404_266@="Center" WIDth @H_404_266@="80" Text @H_404_266@="文本框" @H_404_266@/>
@H_404_266@</ GrID @H_404_266@>
@H_404_266@</ navigation:Page @H_404_266@> 它的显示效果如下: 当然GrID 也可以像HTML 中的table 一样跨行或者跨列,这需要通过设置控件的rowspan 或者ColumnSpan 属性,下面就是一个例子: @H_404_266@< navigation:Page x:Class @H_404_266@="SilverlightDemo1.GrIDDemo1"
xmlns @H_404_266@="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x @H_404_266@="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d @H_404_266@="http://schemas.microsoft.com/Expression/blend/2008"
xmlns:mc @H_404_266@="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable @H_404_266@="d"
xmlns:navigation @H_404_266@="clr-namespace:System.windows.Controls;assembly=System.windows.Controls.Navigation"
d:DesignWIDth @H_404_266@="400" d:DesignHeight @H_404_266@="300"
Title @H_404_266@="GrIDDemo1 Page" @H_404_266@>
@H_404_266@< GrID x:name @H_404_266@="LayoutRoot" Background @H_404_266@="Pink" @H_404_266@>
@H_404_266@< GrID.RowDeFinitions @H_404_266@>
@H_404_266@< RowDeFinition @H_404_266@/>
@H_404_266@< RowDeFinition Height @H_404_266@="200" @H_404_266@/>
@H_404_266@</ GrID.RowDeFinitions @H_404_266@>
@H_404_266@< GrID.ColumnDeFinitions @H_404_266@>
@H_404_266@< ColumnDeFinition WIDth @H_404_266@="100" @H_404_266@/>
@H_404_266@< ColumnDeFinition WIDth @H_404_266@="100" @H_404_266@/>
@H_404_266@< ColumnDeFinition WIDth @H_404_266@="100" @H_404_266@/>
@H_404_266@< ColumnDeFinition @H_404_266@/>
@H_404_266@</ GrID.ColumnDeFinitions @H_404_266@>
@H_404_266@< button Content @H_404_266@="按钮一" Height @H_404_266@="220" HorizontalAlignment @H_404_266@="left" name @H_404_266@="button1" WIDth @H_404_266@="75" GrID.Column @H_404_266@="0" GrID.Row @H_404_266@="0" GrID.rowspan @H_404_266@="2" @H_404_266@/>
@H_404_266@< button Content @H_404_266@="按钮二" GrID.Column @H_404_266@="1" GrID.Row @H_404_266@="0" Height @H_404_266@="23" HorizontalAlignment @H_404_266@="Center" name @H_404_266@="button2" VerticalAlignment @H_404_266@="top" WIDth @H_404_266@="75" @H_404_266@/>
@H_404_266@< TextBox GrID.Column @H_404_266@="1" GrID.Row @H_404_266@="1" GrID.ColumnSpan @H_404_266@="2" Height @H_404_266@="23" name @H_404_266@="textBox1" VerticalAlignment @H_404_266@="Center" WIDth @H_404_266@="80" Text @H_404_266@="文本框" @H_404_266@/>
@H_404_266@< button Content @H_404_266@="按钮三" GrID.Column @H_404_266@="2" Height @H_404_266@="23" HorizontalAlignment @H_404_266@="left" name @H_404_266@="button3" VerticalAlignment @H_404_266@="top" WIDth @H_404_266@="75" @H_404_266@/>
@H_404_266@< button Content @H_404_266@="按钮四" GrID.Column @H_404_266@="3" GrID.Row @H_404_266@="1" Height @H_404_266@="23" HorizontalAlignment @H_404_266@="left" name @H_404_266@="button4" VerticalAlignment @H_404_266@="top" WIDth @H_404_266@="75" @H_404_266@/>
@H_404_266@</ GrID @H_404_266@>
@H_404_266@</ navigation:Page @H_404_266@> 它的显示效果如下: Canvas 布局用法 相比GrID 和GrID 的布局方式来说,Canvas 提供了另外一种途径来布置我们的控件,它采用了我们比较熟悉的利用坐标的方式的,在使用Canvas 布局时可以设置每个控件top 和left 属性,也就是设置控件距离它所在的容器的距离,下面就是一个例子: @H_404_266@< navigation:Page x:Class @H_404_266@="SilverlightDemo1.CanvasDemo1"
xmlns @H_404_266@="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x @H_404_266@="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d @H_404_266@="http://schemas.microsoft.com/Expression/blend/2008"
xmlns:mc @H_404_266@="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable @H_404_266@="d"
xmlns:navigation @H_404_266@="clr-namespace:System.windows.Controls;assembly=System.windows.Controls.Navigation"
d:DesignWIDth @H_404_266@="640" d:DesignHeight @H_404_266@="480"
Title @H_404_266@="CanvasDemo1 Page" @H_404_266@>
@H_404_266@< Canvas Height @H_404_266@="240" name @H_404_266@="canvas1" WIDth @H_404_266@="300" Background @H_404_266@="teal" @H_404_266@>
@H_404_266@< button Canvas.left @H_404_266@="40" Canvas.top @H_404_266@="161" Content @H_404_266@="登录" Height @H_404_266@="23" name @H_404_266@="button1" WIDth @H_404_266@="75" @H_404_266@/>
@H_404_266@< TextBlock Canvas.left @H_404_266@="40" Canvas.top @H_404_266@="56" Height @H_404_266@="23" name @H_404_266@="textBlock1" Text @H_404_266@="用户名" @H_404_266@/>
@H_404_266@< TextBlock Canvas.left @H_404_266@="40" Canvas.top @H_404_266@="102" Height @H_404_266@="23" name @H_404_266@="textBlock2" Text @H_404_266@="密码" @H_404_266@/>
@H_404_266@< button Canvas.left @H_404_266@="183" Canvas.top @H_404_266@="161" Content @H_404_266@="取消" Height @H_404_266@="23" name @H_404_266@="button2" WIDth @H_404_266@="75" @H_404_266@/>
@H_404_266@< TextBox Canvas.left @H_404_266@="138" Canvas.top @H_404_266@="56" Height @H_404_266@="23" name @H_404_266@="textBox1" WIDth @H_404_266@="120" @H_404_266@/>
@H_404_266@< PasswordBox Canvas.left @H_404_266@="138" Canvas.top @H_404_266@="102" Height @H_404_266@="23" name @H_404_266@="passwordBox1" WIDth @H_404_266@="120" @H_404_266@/>
@H_404_266@</ Canvas @H_404_266@>
@H_404_266@</ navigation:Page @H_404_266@> 它的显示效果如下: 在代码中我们对用户名所对应的文本框的设置是: @H_404_266@< TextBox Canvas.left @H_404_266@="138" Canvas.top @H_404_266@="56" Height @H_404_266@="23" name @H_404_266@="textBox1" WIDth @H_404_266@="120" @H_404_266@/> 于是就会在距离Canvas 顶部56 、左边138 处显示一个高度为23 、宽度为120 的文本框。 布局的综合使用 虽然在XAML 中只能有一个顶级元素,但是这并不意味着在一个界面中只使用一种界面布局,我们完全可以在外层布局中嵌套内层布局,就像我们在HTML 的table 中再次嵌套table 一样,下面是一个简单的例子: @H_404_266@< navigation:Page x:Class @H_404_266@="SilverlightDemo1.Graphics"
xmlns @H_404_266@="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x @H_404_266@="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d @H_404_266@="http://schemas.microsoft.com/Expression/blend/2008"
xmlns:mc @H_404_266@="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable @H_404_266@="d"
xmlns:navigation @H_404_266@="clr-namespace:System.windows.Controls;assembly=System.windows.Controls.Navigation"
d:DesignWIDth @H_404_266@="800" d:DesignHeight @H_404_266@="600"
Title @H_404_266@="Chapter10 Page" @H_404_266@>
@H_404_266@< StackPanel WIDth @H_404_266@="800" Height @H_404_266@="600" OrIEntation @H_404_266@="Vertical" @H_404_266@>
@H_404_266@< Canvas WIDth @H_404_266@="800" Height @H_404_266@="200" Background @H_404_266@="White" @H_404_266@>
@H_404_266@< Canvas.Resources @H_404_266@>
@H_404_266@< Storyboard x:name @H_404_266@="myStroryboard" @H_404_266@>
@H_404_266@< DoubleAnimation Storyboard.Targetname @H_404_266@="mytransform" Storyboard.TargetProperty @H_404_266@="Angle"
From @H_404_266@="0" To @H_404_266@="360" Duration @H_404_266@="0:0:5" RepeatBehavior @H_404_266@="Forever" @H_404_266@/>
@H_404_266@</ Storyboard @H_404_266@>
@H_404_266@</ Canvas.Resources @H_404_266@>
@H_404_266@< Image Canvas.left @H_404_266@="50" Canvas.top @H_404_266@="50" Height @H_404_266@="100" name @H_404_266@="image01" Stretch @H_404_266@="Fill" WIDth @H_404_266@="100" Source @H_404_266@="image/15.jpg" MouseEnter @H_404_266@="Image_MouseEnter" MouseLeave @H_404_266@="Image_MouseLeave" @H_404_266@>
@H_404_266@< Image.Rendertransform @H_404_266@>
@H_404_266@< Rotatetransform x:name @H_404_266@="mytransform" Angle @H_404_266@="15" CenterX @H_404_266@="50" CenterY @H_404_266@="50" @H_404_266@> @H_404_266@</ Rotatetransform @H_404_266@>
@H_404_266@</ Image.Rendertransform @H_404_266@>
@H_404_266@</ Image @H_404_266@>
@H_404_266@< Image Canvas.left @H_404_266@="350" Canvas.top @H_404_266@="0" Height @H_404_266@="100" name @H_404_266@="image02" Stretch @H_404_266@="Fill" WIDth @H_404_266@="100" Source @H_404_266@="image/15.jpg" @H_404_266@>
@H_404_266@</ Image @H_404_266@>
@H_404_266@< Image Canvas.left @H_404_266@="350" Canvas.top @H_404_266@="0" Height @H_404_266@="100" name @H_404_266@="image03" Stretch @H_404_266@="Fill" WIDth @H_404_266@="100" Source @H_404_266@="image/15.jpg" Opacity @H_404_266@="0.8" @H_404_266@>
@H_404_266@< Image.Rendertransform @H_404_266@>
@H_404_266@< transformGroup @H_404_266@>
@H_404_266@< Scaletransform ScaleY @H_404_266@="-0.75" @H_404_266@> @H_404_266@</ Scaletransform @H_404_266@>
@H_404_266@< Translatetransform Y @H_404_266@="180" X @H_404_266@="30" @H_404_266@> @H_404_266@</ Translatetransform @H_404_266@>
@H_404_266@< Skewtransform AngleX @H_404_266@="-15" @H_404_266@> @H_404_266@</ Skewtransform @H_404_266@>
@H_404_266@</ transformGroup @H_404_266@>
@H_404_266@</ Image.Rendertransform @H_404_266@>
@H_404_266@< Image.OpacityMask @H_404_266@>
@H_404_266@< linearGradIEntBrush StartPoint @H_404_266@="0.5,0.0" EndPoint @H_404_266@="0.5,1.0" @H_404_266@>
@H_404_266@< GradIEntStop Offset @H_404_266@="0.0" color @H_404_266@="#00000000" @H_404_266@> @H_404_266@</ GradIEntStop @H_404_266@>
@H_404_266@< GradIEntStop Offset @H_404_266@="1.0" color @H_404_266@="#FF000000" @H_404_266@> @H_404_266@</ GradIEntStop @H_404_266@>
@H_404_266@</ linearGradIEntBrush @H_404_266@>
@H_404_266@</ Image.OpacityMask @H_404_266@>
@H_404_266@</ Image @H_404_266@>
@H_404_266@</ Canvas @H_404_266@>
@H_404_266@< Canvas WIDth @H_404_266@="800" Height @H_404_266@="200" @H_404_266@>
@H_404_266@< Image Canvas.left @H_404_266@="100" Canvas.top @H_404_266@="10" Height @H_404_266@="100" name @H_404_266@="image31" Stretch @H_404_266@="Fill" WIDth @H_404_266@="200" Source @H_404_266@="image/14.jpg" @H_404_266@/>
@H_404_266@< Image Canvas.left @H_404_266@="100" Canvas.top @H_404_266@="10" Height @H_404_266@="100" name @H_404_266@="image32" Stretch @H_404_266@="Fill" WIDth @H_404_266@="200" Source @H_404_266@="image/14.jpg" @H_404_266@>
@H_404_266@< Image.Rendertransform @H_404_266@>
@H_404_266@< Rotatetransform Angle @H_404_266@="15" CenterX @H_404_266@="0" CenterY @H_404_266@="0" @H_404_266@> @H_404_266@</ Rotatetransform @H_404_266@>
@H_404_266@</ Image.Rendertransform @H_404_266@>
@H_404_266@</ Image @H_404_266@>
@H_404_266@< Image Canvas.left @H_404_266@="100" Canvas.top @H_404_266@="10" Height @H_404_266@="100" name @H_404_266@="image33" Stretch @H_404_266@="Fill" WIDth @H_404_266@="200" Source @H_404_266@="image/14.jpg" @H_404_266@>
@H_404_266@< Image.Rendertransform @H_404_266@>
@H_404_266@< Rotatetransform Angle @H_404_266@="30" CenterX @H_404_266@="50" CenterY @H_404_266@="300" @H_404_266@> @H_404_266@</ Rotatetransform @H_404_266@>
@H_404_266@</ Image.Rendertransform @H_404_266@>
@H_404_266@</ Image @H_404_266@>
@H_404_266@< Image Canvas.left @H_404_266@="100" Canvas.top @H_404_266@="10" Height @H_404_266@="100" name @H_404_266@="image34" Stretch @H_404_266@="Fill" WIDth @H_404_266@="200" Source @H_404_266@="image/14.jpg" @H_404_266@>
@H_404_266@< Image.Rendertransform @H_404_266@>
@H_404_266@< Rotatetransform Angle @H_404_266@="45" CenterX @H_404_266@="0" CenterY @H_404_266@="50" @H_404_266@> @H_404_266@</ Rotatetransform @H_404_266@>
@H_404_266@</ Image.Rendertransform @H_404_266@>
@H_404_266@</ Image @H_404_266@>
@H_404_266@</ Canvas @H_404_266@>
@H_404_266@< Canvas WIDth @H_404_266@="800" Height @H_404_266@="200" @H_404_266@>
@H_404_266@< Image Canvas.left @H_404_266@="100" Canvas.top @H_404_266@="10" Height @H_404_266@="100" name @H_404_266@="image1" Stretch @H_404_266@="Fill" WIDth @H_404_266@="200" Source @H_404_266@="image/14.jpg" @H_404_266@/>
@H_404_266@< Image Canvas.left @H_404_266@="100" Canvas.top @H_404_266@="10" Height @H_404_266@="100" name @H_404_266@="image2" Stretch @H_404_266@="Fill" WIDth @H_404_266@="200" Source @H_404_266@="image/14.jpg" @H_404_266@>
@H_404_266@< Image.Rendertransform @H_404_266@>
@H_404_266@< Rotatetransform Angle @H_404_266@="15" @H_404_266@> @H_404_266@</ Rotatetransform @H_404_266@>
@H_404_266@</ Image.Rendertransform @H_404_266@>
@H_404_266@</ Image @H_404_266@>
@H_404_266@< Image Canvas.left @H_404_266@="100" Canvas.top @H_404_266@="10" Height @H_404_266@="100" name @H_404_266@="image3" Stretch @H_404_266@="Fill" WIDth @H_404_266@="200" Source @H_404_266@="image/14.jpg" @H_404_266@>
@H_404_266@< Image.Rendertransform @H_404_266@>
@H_404_266@< Rotatetransform Angle @H_404_266@="30" @H_404_266@> @H_404_266@</ Rotatetransform @H_404_266@>
@H_404_266@</ Image.Rendertransform @H_404_266@>
@H_404_266@</ Image @H_404_266@>
@H_404_266@< Image Canvas.left @H_404_266@="100" Canvas.top @H_404_266@="10" Height @H_404_266@="100" name @H_404_266@="image4" Stretch @H_404_266@="Fill" WIDth @H_404_266@="200" Source @H_404_266@="image/14.jpg" @H_404_266@>
@H_404_266@< Image.Rendertransform @H_404_266@>
@H_404_266@< Rotatetransform Angle @H_404_266@="40" @H_404_266@> @H_404_266@</ Rotatetransform @H_404_266@>
@H_404_266@</ Image.Rendertransform @H_404_266@>
@H_404_266@</ Image @H_404_266@>
@H_404_266@</ Canvas @H_404_266@>
@H_404_266@</ StackPanel @H_404_266@>
@H_404_266@</ navigation:Page @H_404_266@> 它的显示效果如下: 总结:本篇主要讲述了Silverlight 中几种常见的布局:StackPanel 可以将控件按行或者按列布局,这是一种比较简单的布局方式;GrID 可以采用类似于HTML 中table 的方式布局,并且可以设置控件跨行或者跨列摆放;Canvas 控件采用类似于坐标定位的方式对控件进行布局。还有一些布局在本篇中没有讲述,读者朋友可以在学习时借鉴这些知识来学习,其实利用这些布局已经足够实现复杂的界面了。 下一篇将讲述常用控件的学习。 周公(zhoufoxcn) 2010-10-11 总结
以上是内存溢出为你收集整理的Silverlight学习笔记(3):Silverlight的界面布局全部内容,希望文章能够帮你解决Silverlight学习笔记(3):Silverlight的界面布局所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)