【WPF】—StackPanel && Grid 初识布局容器(1)
先创建一个Grid,命名为gridGame:当窗体加载时触发,所以在属性框中,点击事件中的Loaded,实现:private void Window_Loaded(object sender, RoutedEventArgs e){for (int i = 0; i < 10; i+
认识WPF布局容器,首先就要明白其出现的目的,就是可以容纳多个控件或者签到其它布局的控件,用于在UI上进行组织和排列,其实也就是对界面的规整。
对于常用的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就是人性化服务,而布局就是其服务之一。
更多推荐
所有评论(0)