CaseStudy(showcase)布局篇-列表的排放与遮罩

做silvelight也有一段时间了,相册、游戏,刚刚完成的showcase这个小程序算是一个阶段了。这里就以showcase这个项目来做一下CaseStudy。

布局篇-列表的排放与遮罩

有数据就肯定会有列表,这里就写一下我使用的心得。

做列表这里我选用的是StackPanel,它可以横向或纵向排列。同样若是纵向排列。可以设置宽度一定。高度Auto。如果需要设置间距,那就在它的子控件设置。

重点说一下对StackPanel的遮罩。 这个做遮罩首先先把StackPanel组合到一个Canvas中。然后在canvas上画一个矩形。同时选中Canvas和矩形,如图所示:

这样做事为了以后做滚动条方便。

下边分别对各个布局控件进行介绍。

  1. Canvas Canvas是一个绝对定位的组件,它以左上角为定点进行定位。

<Canvas x:Name="LayoutRoot" Background="White"> <Rectangle Height="100" Width="100" Fill="#FF4A656C" Canvas.Top="60" Canvas.Left="100"/> </Canvas>

  1. Border

Border是一个容器控件。它可以是一个空的,为动态加载的控件做占位实用。不过它的内部只能包含一个控件。

  1. StatckPanel 其可以横行或纵向的对子控件进行排列。 <StackPanel Height="144" Width="165" Canvas.Top="71" Canvas.Left="142"> <Button Content="Button"/> <Button Content="Button"/> <Button Content="Button"/> <Button Content="Button"/> <Button Content="Button"/> </StackPanel>

<StackPanel Height="144" Width="221" Canvas.Top="53" Canvas.Left="56.715" Orientation="Horizontal"> <Button Content="Button"/> <Button Content="Button"/> <Button Content="Button"/> <Button Content="Button"/> <Button Content="Button"/> </StackPanel>

  1. ScrollViewer 该控件允许其子控件大小大于其本身的大小。在大于其自身的情况下出现滚动条进行控制显示的区域。 <ScrollViewer Height="141" Width="186" Canvas.Left="54.715" Canvas.Top="50" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"> <StackPanel Height="127" Width="223" Orientation="Horizontal"> <Button Content="Button"/> <Button Content="Button"/> <Button Content="Button"/> <Button Content="Button"/> <Button Content="Button"/> </StackPanel> </ScrollViewer>
  1. Grid 这个控件是最复杂的,其可以设置行和列,尺寸(宽高)其设置分为三种 Auto,自适应子控件 InPixel,固定的宽高 *,按百分比分配 <Grid Height="278" Width="365" Canvas.Left="63" Canvas.Top="91"> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.249*"/> <ColumnDefinition Width="0.751*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="0.097*"/> <RowDefinition Height="0.23*"/> <RowDefinition Height="0.673*"/> </Grid.RowDefinitions> <Button HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="Auto" RenderTransformOrigin="0.529999971389771,0.0700000002980232" Grid.ColumnSpan="2" Grid.RowSpan="1" Content="Button"/> <Button HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="Auto" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1" Content="Button"/> <Button HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="Auto" Grid.ColumnSpan="1" Grid.Row="2" Content="Button" d:LayoutOverrides="HorizontalAlignment"/> <Button Margin="0,0,0,0" Grid.RowSpan="1" Content="Button" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="Auto"/> </Grid>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Coco的专栏

【前端攻略】最全面的水平垂直居中方案与flexbox布局

1853
来自专栏Nian糕的私人厨房

CSS Flex弹性盒布局

我在上一篇博文CSS 布局_2 Flex弹性盒里,对 Flex 弹性盒有着详细的介绍,这里就不再复述了,书写页面前,我们先来介绍一个之前没提到的知识点——伪类选...

1415
来自专栏cnblogs

CSS3新特性应用之用户体验

一、光标 新增加not-allowed光标,不允许访问 隐藏光标,在触模应用上很有用,css2.1需要一个透明的图片来实现,而css3直接用cursor:non...

2168
来自专栏Python攻城狮

HTML 5&CSS快速入门1.计算机中的文件2.网页组成4.HTML基础操作

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

3803
来自专栏偏前端工程师的驿站

CSS魔法堂:重拾Border之——图片作边框

前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半...

2666
来自专栏TechBox

一篇文章详解iOS之AutoResizing、AutoLayout、sizeClass来龙去脉前言三大适配技术

3086
来自专栏用户2442861的专栏

关于Div的宽度与高度的100%设定

正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度...

882
来自专栏web前端

制作H5响应式页面注意事项、微信二次分享

1、H5页面(APP端)      1.1     APP端页面用HTML5制作,头部需要加适配信息:   <meta http-equiv="Content-...

3379
来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记之 overflow 篇

如果overflow-x、overflow-y的值相同,则等同于overflow设置了这个值。

1191
来自专栏菜鸟前端工程师

html+css学习笔记010-垂直对齐0指针0透明

1102

扫码关注云+社区

领取腾讯云代金券