【WPF】—StackPanel && Grid 初识布局容器(1)
2015-09-08 20:08
537 查看
认识WPF布局容器,首先就要明白其出现的目的,就是可以容纳多个控件或者签到其它布局的控件,用于在UI上进行组织和排列,其实也就是对界面的规整。
对于常用的WPF布局容器,每个有每个的特点,今天咱们只简单了解两个容器:
我们来实现一个小Demo,实现9宫格;
当然我们可以通过页面编写的方式,写多个RowDefinitionhe和多个ColumnDefinition来实现,具体代码和图示如下:
![](http://img.blog.csdn.net/20150908192453036?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
但是如果真的使用的话,我们必须要实现动态添加才能满足项目的需求,比如连连看小游戏:
先创建一个Grid,命名为gridGame:
当窗体加载时触发,所以在属性框中,点击事件中的Loaded,实现:
最后实现的效果:
![](http://img.blog.csdn.net/20150908192555433?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
简而言之,他就是通过一条一条的线来控制控件的位置,比如登录的样式:
![](http://img.blog.csdn.net/20150908192828876?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](http://img.blog.csdn.net/20150908192908690?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
通过横向,纵向居中的方式,保证控件的居中效果,通过Maigin的大小来控制其与Grid的间隔,其实也就是控件的大小。
举例说明:我们可以实现触发鼠标移动父控件,动态添加的效果
![](http://img.blog.csdn.net/20150908193409407?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
代码:
当创建新的XAML文件时,其是有一个总的Grid的,这个是默认的,不管添加什么都不用将其去掉,直接忽略即可,我们在Grid中建立一个StackPanel.取名为"sp1":
![](http://img.blog.csdn.net/20150908193711141?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
之前就提到过,布局控件主要体现的就是组合问题,就好像我自己住一套房太贵了,那么我可以选择合租,这样我们共同都位于一个房子内,控件也可以这样,比如我在一个Button上同时添加图片和按钮,该如何是好呢??
我们就可以使用StackPanel来将两者包围起来,实现效果,demo代码:
![](http://img.blog.csdn.net/20150908194239483?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
整体来讲,WPF就是人性化服务,而布局就是其服务之一。
对于常用的WPF布局容器,每个有每个的特点,今天咱们只简单了解两个容器:
Grid:
网络线格,可以自定义行和列,通过位置来调整控件的布局,有点类似于HTML中的Table控件,但是在此是为控件服务的,而且还有跨界的想法。我们来实现一个小Demo,实现9宫格;
当然我们可以通过页面编写的方式,写多个RowDefinitionhe和多个ColumnDefinition来实现,具体代码和图示如下:
<Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions>
但是如果真的使用的话,我们必须要实现动态添加才能满足项目的需求,比如连连看小游戏:
先创建一个Grid,命名为gridGame:
<Grid Name="gridGame"> </Grid>
当窗体加载时触发,所以在属性框中,点击事件中的Loaded,实现:
private void Window_Loaded(object sender, RoutedEventArgs e) { for (int i = 0; i < 10; i++) //动态加载十行十列 { ColumnDefinition colDef = new ColumnDefinition(); gridGame.ColumnDefinitions.Add(colDef); RowDefinition rowRef = new RowDefinition(); gridGame.RowDefinitions.Add(rowRef); } for (int i = 0; i < 10;i++ ) { for (int j = 0; j < 10; j++) { Button btn = new Button(); btn.Content = i + "," + j; //通过代码修改控件的Grid.Row属性 Grid.SetRow(btn, i); Grid.SetColumn(btn, j); gridGame.Children.Add(btn); } } }
最后实现的效果:
简而言之,他就是通过一条一条的线来控制控件的位置,比如登录的样式:
通过横向,纵向居中的方式,保证控件的居中效果,通过Maigin的大小来控制其与Grid的间隔,其实也就是控件的大小。
StackPanel:
样式面板,可以将包含元素排成一条直线或竖线,当添加或移除的时候,后生可畏,后边的控件可以自动的填补过来。举例说明:我们可以实现触发鼠标移动父控件,动态添加的效果
代码:
当创建新的XAML文件时,其是有一个总的Grid的,这个是默认的,不管添加什么都不用将其去掉,直接忽略即可,我们在Grid中建立一个StackPanel.取名为"sp1":
<StackPanel Name="sp1" Margin="0,0,110,55" MouseEnter="sp1_MouseEnter"></StackPanel>后台控制代码,触发页面启动事件和鼠标移动事件:
之前就提到过,布局控件主要体现的就是组合问题,就好像我自己住一套房太贵了,那么我可以选择合租,这样我们共同都位于一个房子内,控件也可以这样,比如我在一个Button上同时添加图片和按钮,该如何是好呢??
我们就可以使用StackPanel来将两者包围起来,实现效果,demo代码:
整体来讲,WPF就是人性化服务,而布局就是其服务之一。
相关文章推荐
- tabBarItem setBadgeValue 样式自定义(IOS)
- 更新财务报表2
- STL之map容器的详解
- 让网站网址实现百度秒收录
- 通过迁移的方式解决Active Directory服务器问题之1-迁移前的准备工作
- python 生成器
- hadoop2.x的HA简介
- struct和typedef struct
- hdu 2120 Ice_cream's world I
- 1023. 组个最小数 (20)
- struct和typedef struct
- qt使用
- mybatis + postgresql 遇到的问题
- 初试WebSocket构建聊天程序
- 如何让优秀文章排名大于原创文章
- Unable to execute dex: method ID not in [0, 0xffff]: 65536
- poj 3190 经典贪心(区间图:色数=团数)
- 数据库Sharding的基本思想和切分策略
- Android 笔记7
- iOS UIRefreshControl的使用 示例