A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 shangxin 于 2014-3-19 10:31 编辑

在WPF页面布局时,怎样做才能使页面发生尺寸变化等情况时页面不会乱弹?

3 个回复

倒序浏览
本帖最后由 鬼鬼 于 2014-3-18 13:11 编辑

WPF默认使用Grid进行布局(类比html中的table),用户可自定义行数、列数以及每行、每列的高度和宽度,还可以使用比例值。
下面是我以前写的一个程序中的一段:
  1.                 <Grid>
  2.                     <Grid.ColumnDefinitions>
  3.                         <ColumnDefinition Width="Auto"/>
  4.                         <ColumnDefinition Width="Auto"/>
  5.                         <ColumnDefinition Width="Auto"/>
  6.                         <ColumnDefinition Width="*"/>
  7.                         <ColumnDefinition Width="Auto"/>
  8.                         <ColumnDefinition Width="Auto"/>
  9.                         <ColumnDefinition Width="Auto"/>
  10.                         <ColumnDefinition Width="*"/>
  11.                         <ColumnDefinition Width="Auto"/>
  12.                         <ColumnDefinition Width="Auto"/>
  13.                         <ColumnDefinition Width="Auto"/>
  14.                         <ColumnDefinition Width="*"/>
  15.                         <ColumnDefinition Width="Auto"/>
  16.                         <ColumnDefinition Width="Auto"/>
  17.                         <ColumnDefinition Width="Auto"/>
  18.                         <ColumnDefinition Width="6*"/>
  19.                     </Grid.ColumnDefinitions>
  20.                     <Grid.RowDefinitions>
  21.                         <RowDefinition Height="5"/>
  22.                         <RowDefinition Height="Auto"/>
  23.                         <RowDefinition Height="5"/>
  24.                         <RowDefinition Height="Auto"/>
  25.                         <RowDefinition Height="5"/>
  26.                         <RowDefinition />
  27.                     </Grid.RowDefinitions>

  28.                     ……………………

  29.                     <Button Grid.Column="12" Grid.Row="3" Grid.ColumnSpan="3" …… />

  30.                 ……………………

  31.                 </Grid>
复制代码

在<Grid.ColumnDefinitions>中使用<ColumnDefinition />定义列数,并可通过其Width属性定义列宽;在<Grid.RowDefinitions>中使用<RowDefinition />定义行数,并可通过其Height属性定义行高。行高和列宽定义中若数字后加“*”,则为比例值,也就是说缩放前后各控件大小比例保持不变,为“*”前数字之比。
在每个控件的属性中通过Grid.Row和Grid.Column属性(话说这个是依赖属性,也很有说头的,楼主可以自查。)定义其所处位置,并可使用ColumnSpan和RowSpan属性定义其跨越的列数和行数。
又看了一眼自己的代码补充一点,如果Width设置为Auto,则该列宽度取本列中最宽控件的宽度,Height同理。



评分

参与人数 1技术分 +1 收起 理由
czwanglei + 1

查看全部评分

回复 使用道具 举报
,当 UI 调整的大小时,布局提供一个有序的方式将 UI 元素,并管理这些元素的大小和位置。 使用以下格式控件之一通常创建一个布局:
1、Canvas;
2、DockPanel
3、Grid
4、StackPanel
5、VirtualizingStackPanel
6、WrapPanel
这些窗体控件中的每一个支持布局的一种特殊类型的子元素的。 ExpenseIt 页面可以调整大小,并且,每页都有垂直同其他元素水平排列和的元素。 因此, Grid 是应用程序的理想布局元素。
用Grid 类定义网格布局:// Create the application's main window
            mainWindow = new Window();
            mainWindow.Title = "Grid Sample";

            // Create the Grid
            Grid myGrid = new Grid();
            myGrid.Width = 250;
            myGrid.Height = 100;
            myGrid.HorizontalAlignment = HorizontalAlignment.Left;
            myGrid.VerticalAlignment = VerticalAlignment.Top;
            myGrid.ShowGridLines = true;

            // Define the Columns
            ColumnDefinition colDef1 = new ColumnDefinition();
            ColumnDefinition colDef2 = new ColumnDefinition();
            ColumnDefinition colDef3 = new ColumnDefinition();
            myGrid.ColumnDefinitions.Add(colDef1);
            myGrid.ColumnDefinitions.Add(colDef2);
            myGrid.ColumnDefinitions.Add(colDef3);

            // Define the Rows
            RowDefinition rowDef1 = new RowDefinition();
            RowDefinition rowDef2 = new RowDefinition();
            RowDefinition rowDef3 = new RowDefinition();
            RowDefinition rowDef4 = new RowDefinition();
            myGrid.RowDefinitions.Add(rowDef1);
            myGrid.RowDefinitions.Add(rowDef2);
            myGrid.RowDefinitions.Add(rowDef3);
            myGrid.RowDefinitions.Add(rowDef4);

            // Add the first text cell to the Grid
            TextBlock txt1 = new TextBlock();
            txt1.Text = "2005 Products Shipped";
            txt1.FontSize = 20;
            txt1.FontWeight = FontWeights.Bold;
            Grid.SetColumnSpan(txt1, 3);
            Grid.SetRow(txt1, 0);

            // Add the second text cell to the Grid
            TextBlock txt2 = new TextBlock();
            txt2.Text = "Quarter 1";
            txt2.FontSize = 12;
            txt2.FontWeight = FontWeights.Bold;
            Grid.SetRow(txt2, 1);
            Grid.SetColumn(txt2, 0);

            // Add the third text cell to the Grid
            TextBlock txt3 = new TextBlock();
            txt3.Text = "Quarter 2";
            txt3.FontSize = 12;
            txt3.FontWeight = FontWeights.Bold;
            Grid.SetRow(txt3, 1);
            Grid.SetColumn(txt3, 1);

            // Add the fourth text cell to the Grid
            TextBlock txt4 = new TextBlock();
            txt4.Text = "Quarter 3";
            txt4.FontSize = 12;
            txt4.FontWeight = FontWeights.Bold;
            Grid.SetRow(txt4, 1);
            Grid.SetColumn(txt4, 2);

            // Add the sixth text cell to the Grid
            TextBlock txt5 = new TextBlock();
            Double db1 = new Double();
            db1 = 50000;
            txt5.Text = db1.ToString();
            Grid.SetRow(txt5, 2);
            Grid.SetColumn(txt5, 0);

            // Add the seventh text cell to the Grid
            TextBlock txt6 = new TextBlock();
            Double db2 = new Double();
            db2 = 100000;
            txt6.Text = db2.ToString();
            Grid.SetRow(txt6, 2);
            Grid.SetColumn(txt6, 1);

            // Add the final text cell to the Grid
            TextBlock txt7 = new TextBlock();
            Double db3 = new Double();
            db3 = 150000;
            txt7.Text = db3.ToString();
            Grid.SetRow(txt7, 2);
            Grid.SetColumn(txt7, 2);

            // Total all Data and Span Three Columns
            TextBlock txt8 = new TextBlock();
            txt8.FontSize = 16;
            txt8.FontWeight = FontWeights.Bold;
            txt8.Text = "Total Units: " + (db1 + db2 + db3).ToString();
            Grid.SetRow(txt8, 3);
            Grid.SetColumnSpan(txt8, 3);

            // Add the TextBlock elements to the Grid Children collection
            myGrid.Children.Add(txt1);
            myGrid.Children.Add(txt2);
            myGrid.Children.Add(txt3);
            myGrid.Children.Add(txt4);
            myGrid.Children.Add(txt5);
            myGrid.Children.Add(txt6);
            myGrid.Children.Add(txt7);
            myGrid.Children.Add(txt8);

            // Add the Grid as the Content of the Parent Window Object
            mainWindow.Content = myGrid;
            mainWindow.Show ();

以上是由自己查资料加自己的理解!

评分

参与人数 1技术分 +1 收起 理由
czwanglei + 1

查看全部评分

回复 使用道具 举报
wpf里面每个窗口都有自己的布局的XMAL文件,其中几乎所有控件都有一个属性margin(HTML布局中有介绍)
Margin表示距离外层容器的边距,就好比把按钮放到窗口中(或者更形象你要在墙上贴一张画)这个时候窗口(墙)就是外层容器。如何对按钮(画)进行布局,就会用到margin
Margin="80" 表示距窗口(墙)左边80、上边80
Margin="80,40"表示距窗口(墙)左边80、上边40
margin不支持三个参数
Margin="80,40,20,10" 表示距窗口(墙)左边80、上边40、右边20、下边10(如果设置了4个边距就不要设置控件宽高,它会自动填充)
最好的办法就是手动写一个按钮,然后设置其margin值,当然你也可以拖控件,可以观察一下margin的变化,但是如果设置了对齐方式好像margin值会有些让人费解。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马