StackPanel与Grid交叉使用
今天实验了StackPanel和Grid一起用,开始先建了一个StackPanel,这个StackPanel占据了真个空间,为了做成这种效果把Width设置成了500.
在第一个StackPanel里面建了个Grid。在Grid里建了三个行定义和两个列定义。
把Title1放在默认位置,文字放在Grid.Row="1" Grid.Column="1".因为起始定义为0开始。
色块放在 Grid.Row="2" Grid.Column="1"。把一份设置好后复制三份,改掉颜色就可以了。也就相当于在第一个StackPanel里建了3个Grid。
以下是代码:
<StackPanel Width="500" Margin="20,0,0,0" HorizontalAlignment="Left">
<Grid Margin="0,0,0,20">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<TextBlock FontSize="24" >Title1</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="1" TextWrapping="Wrap">
小说以第一人称描写,叙述者马塞尔患有重度失眠症,经常处于半睡半醒的状态,年幼时的体弱多病,敏感异常。小说开头主人公回忆起童年时在贡布雷的生活片段。一个夏天晚上,邻居斯万先生,没有斯万夫人奥黛特陪同,来看望叙述者的父母。叙述者睡前等不到母亲的亲吻,心里非常难受。
</TextBlock>
<StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1">
<Rectangle Fill="Blue" Width="100" Height="30"/>
<Rectangle Fill="Black" Width="100" Height="30"/>
<Rectangle Fill="Green" Width="100" Height="30"/>
</StackPanel>
</Grid>
<Grid Margin="0,0,0,20">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<TextBlock FontSize="24" >Title2</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="1" TextWrapping="Wrap">
小说以第一人称描写,叙述者马塞尔患有重度失眠症,经常处于半睡半醒的状态,年幼时的体弱多病,敏感异常。小说开头主人公回忆起童年时在贡布雷的生活片段。一个夏天晚上,邻居斯万先生,没有斯万夫人奥黛特陪同,来看望叙述者的父母。叙述者睡前等不到母亲的亲吻,心里非常难受。
</TextBlock>
<StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1">
<Rectangle Fill="Blue" Width="100" Height="30"/>
<Rectangle Fill="Yellow" Width="100" Height="30"/>
<Rectangle Fill="Green" Width="100" Height="30"/>
</StackPanel>
</Grid>
<Grid Margin="0,0,0,20">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<TextBlock FontSize="24" >Title3</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="1" TextWrapping="Wrap">
小说以第一人称描写,叙述者马塞尔患有重度失眠症,经常处于半睡半醒的状态,年幼时的体弱多病,敏感异常。小说开头主人公回忆起童年时在贡布雷的生活片段。一个夏天晚上,邻居斯万先生,没有斯万夫人奥黛特陪同,来看望叙述者的父母。叙述者睡前等不到母亲的亲吻,心里非常难受。
</TextBlock>
<StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1">
<Rectangle Fill="Blue" Width="100" Height="30"/>
<Rectangle Fill="Red" Width="100" Height="30"/>
<Rectangle Fill="Green" Width="100" Height="30"/>
</StackPanel>
</Grid>
</StackPanel>
</Page>
转载于:https://www.cnblogs.com/iteou/p/5540260.html
StackPanel与Grid交叉使用相关推荐
- silverlight学习布局之:布局stackpanel
在用户界面设计方面的竞争多半是围绕着如何制作出有吸引力.使用.灵活的用户界面而开展的,在基于浏览器的应用中进行界面的设计是一种更加需要技巧的工作,因为我们的客户端总是丰富多样而又难以准确预测,幸好,S ...
- WPF入门教程系列九——布局之DockPanel与ViewBox(四)
七. DockPanel DockPanel定义一个区域,在此区域中,您可以使子元素通过描点的形式排列,这些对象位于 Children 属性中.停靠面板其实就是在WinForm类似于Dock属性的元 ...
- 快速构建Windows 8风格应用32-构建辅助磁贴
引言 Windows Phone中,我们开发者可能会开发的一个功能点是将数据列表中某一项"Pin To Start(固定到开始屏幕)",大家都知道这种固定到开始屏幕的磁贴叫做辅助磁 ...
- 一步一步学Silverlight 2系列(10):使用用户控件
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- Silverlight学习笔记十七BingMap(六)之获取图片系统的图片信息ImageryService的应用...
BIngMap的ImageryService服务是一个微软发布的WCF服务,它用来获取图片系统的图片信息.服务地址:http://dev.virtualearth.net/webservices/v1 ...
- 分享Silverlight/WPF/Windows Phone一周学习导读(1月17日-1月23日)
上周微软Silverlight团队发布"微软发布Silverlight Native Extensions 1.0 - 扩展OOB应用功能",对于Silverlight开发人员而言 ...
- Windows App开发之集成设置、帮助、搜索和共享
应用设置和应用帮助 "设置"合约 上一节中我们学习了如何将应用设置保存到本地,这种方式是通过在App内添加设置选项,这里还有一种方式.微软将其称为"设置"合约, ...
- WPF绘制自定义窗口
原文:WPF绘制自定义窗口 WPF是制作界面的一大利器,下面就用WPF模拟一下360的软件管理界面,360软件管理界面如下: 界面不难,主要有如下几个要素: 窗体的圆角 自定义标题栏及按钮 自定义状态 ...
- WPF 自定义标题栏 自定义菜单栏
原文:WPF 自定义标题栏 自定义菜单栏 自定义标题栏 自定义列表,可以直接修改WPF中的ListBox模板,也用这样类似的效果.但是ListBox是不能设置默认选中状态的. 而我们需要一些复杂的UI ...
- 分享Silverlight/WPF/Windows Phone一周学习导读(3月1日-3月5日)
休假一个月,没有更新Silverlight/WPF/Windows Phone学习导读.从本周开始继续分享每周最新的Silverlight/WPF/Windows Phone开发学习导读. 本周Sil ...
最新文章
- [Git/Github] ubuntu 14.0 下github 配置
- linux本地监听创建,linux 创建监听服务器
- 聊聊并发(三)——JAVA线程池的分析和使用
- Dave Python 练习十五 -- 面向对象编程
- 穿墙透视真的来了!MIT华人团队超强动作检测模型,小黑屋照样夜视
- Java中String连接性能的分析
- 快速划分分栏控制器上的item(自定义)
- Configuration file contains invalid cp936 characters in C:\Users\YWX\pip\pip.ini. 已解决!
- ECS实例及阿里云服务器ECS功能组件的说明
- 电话程控交换机安装注意
- xposed模块编写教程_Xposed插件开发入门详解
- 鲁大师2022年度硬件榜单即将出炉,多维度看谁能夺奖?
- MySQL数据库期末考试试题及参考答案(01)
- traceroute 工作原理
- SSL单向、双向认证
- checking whether we are cross compiling... configure: error: in `/tmp/pip-build-rktAki/pycrypto解决方法
- UTC时间、GMT时间、CST时间(北京时间)、时间戳
- 【历史上的今天】6 月 18 日:京东诞生;网店平台 Etsy 成立;Facebook 发布 Libra 白皮书
- 9000多的电脑matlab卡,2017 MSI/微星热销6000-9000笔记本型号,使用点评
- 一文带你了解Hive【详细介绍】Hive与传统数据库有什么区别?
热门文章
- iOS关于上传iTunes store一直卡住终极解决方案
- 数学标记语言MathML简介、工具及兼容
- java进度条_Java实现进度条开发过程
- 如何安装uclient_UClient官方版下载_UClient手机官方版下载v2.0.0.1580_3DM单机
- 实现1V1音视频实时互动直播系统 十二、第一节 STUN_TURN服务器搭建
- 冒险岛079服务端_linux版(ubuntu,CentOS)下载
- 网页数据抓取工具 (谷歌插件 web Scraper)
- 解决win10系统下字体模糊问题
- 英伟达登录界面卡住_一汽夏利重组;东风贪腐案行贿者名单? 众泰被申请预重整;尼古拉承认造假;理想英伟达德赛西威将合作;宋PLUS上市[9月17日]...
- 滚动长截图,截取第三方应用,如微博、知乎、头条长图文...