WPF学习-布局

1.  Grid布局 ,(Table 布局)
两行两列布局, 
Border  0 行 0 列默认开始

1. <Window x:
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6.         xmlns:local="clr-namespace:WpfApp"
7.         mc:Ignorable="d"
8.         Title="MainWindow" Height="450" Width="800">
9.     <Grid>
10.         <Grid.RowDefinitions>
11.             <RowDefinition></RowDefinition>
12.             <RowDefinition></RowDefinition>
13.         </Grid.RowDefinitions>
15.         <Grid.ColumnDefinitions>
16.             <ColumnDefinition></ColumnDefinition>
17.             <ColumnDefinition></ColumnDefinition>
18.         </Grid.ColumnDefinitions>
20.         <Border Background="Red"></Border>
21.         <Border Grid.Row="1" Background="Yellow"></Border>
22.         <Border Grid.Column="1"  Background="Blue"></Border>
23.         <Border Grid.Row="1" Grid.Column="1" Background="Green"></Border>
24.     </Grid>
25. </Window>

复制代码

效果图:

 
2. StackPanel 布局
默认垂直布局 ，一旦超出区域限制后不限制
     改成水平排列

1. <Window x:
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6.         xmlns:local="clr-namespace:WpfApp"
7.         mc:Ignorable="d"
8.         Title="MainWindow" Height="450" Width="800">
9.     <Grid>
10.         <Grid.RowDefinitions>
11.             <RowDefinition></RowDefinition>
12.             <RowDefinition></RowDefinition>
13.         </Grid.RowDefinitions>
15.         <Grid.ColumnDefinitions>
16.             <ColumnDefinition></ColumnDefinition>
17.             <ColumnDefinition></ColumnDefinition>
18.         </Grid.ColumnDefinitions>
20.         <Border Background="Red"></Border>
21.         <Border Grid.Row="1" Background="Yellow"></Border>
22.         <Border Grid.Column="1"  Background="Blue"></Border>
23.         <Border Grid.Row="1" Grid.Column="1" Background="Green"></Border>
24.     </Grid>
25. </Window>                                            

复制代码

效果图:

3.  WrapPanel 布局， （ float布局）
默认水平排序
 

1. <Window x:
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6.         xmlns:local="clr-namespace:WpfApp"
7.         mc:Ignorable="d"
8.         Title="MainWindow" Height="450" Width="800">
9.     <Grid>
10.         <Grid.RowDefinitions>
11.             <RowDefinition></RowDefinition>
12.             <RowDefinition></RowDefinition>
13.         </Grid.RowDefinitions>
15.         <Grid.ColumnDefinitions>
16.             <ColumnDefinition></ColumnDefinition>
17.             <ColumnDefinition></ColumnDefinition>
18.         </Grid.ColumnDefinitions>
20.         <Border Background="Red"></Border>
21.         <Border Grid.Row="1" Background="Yellow"></Border>
22.         <Border Grid.Column="1"  Background="Blue"></Border>
23.         <Border Grid.Row="1" Grid.Column="1" Background="Green"></Border>
24.     </Grid>
25. </Window><Window x:
26.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
27.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
28.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
29.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
30.         xmlns:local="clr-namespace:WpfApp"
31.         mc:Ignorable="d"
32.         Title="MainWindow" Height="450" Width="800">
33.     <Grid>
34.         <Grid.RowDefinitions>
35.             <RowDefinition></RowDefinition>
36.             <RowDefinition></RowDefinition>
37.         </Grid.RowDefinitions>
39.         <Grid.ColumnDefinitions>
40.             <ColumnDefinition></ColumnDefinition>
41.             <ColumnDefinition></ColumnDefinition>
42.         </Grid.ColumnDefinitions>
44.         <Border Background="Red"></Border>
45.         <Border Grid.Row="1" Background="Yellow"></Border>
46.         <Border Grid.Column="1"  Background="Blue"></Border>
47.         <Border Grid.Row="1" Grid.Column="1" Background="Green"></Border>
48.     </Grid>
49. </Window>

复制代码

效果：

 
4. DockPanel  停靠 (flex 布局)
默认横向填充,

1.     <Grid>
3.         <DockPanel>
4.             <Button Width="100" Height="40"/>
5.             <Button Width="100" Height="40"/>
6.             <Button Width="100" Height="40"/>
7.             <Button Width="100" Height="40"/>
8.             <Button Width="100" Height="40"/>
9.         </DockPanel>
10.     </Grid>

复制代码

效果图:
默认横向填充,  最后一个元素占据整个布局, 居中显示.

 
停靠布局
注意设置: LastChildFill="False"

1.     <Grid>
3.         <DockPanel LastChildFill="False">
4.             <Button Width="100" Height="40" DockPanel.Dock="Left"/>
5.             <Button Width="100" Height="40" DockPanel.Dock="Top"/>
6.             <Button Width="100" Height="40" DockPanel.Dock="Right"/>
7.             <Button Width="100" Height="40" DockPanel.Dock="Bottom"/>
8.         </DockPanel>
9.     </Grid>

复制代码

效果图:

 
5. Uniform 布局 （Table）
均分所有区域
设置三行三列布局

1.     <Grid>
3.         <DockPanel>
4.             <Button Width="100" Height="40"/>
5.             <Button Width="100" Height="40"/>
6.             <Button Width="100" Height="40"/>
7.             <Button Width="100" Height="40"/>
8.             <Button Width="100" Height="40"/>
9.         </DockPanel>
10.     </Grid>                           

复制代码

效果图：

 
6.  布局Demo 案例
Border : 类似background 属性 

1. <Window x:
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6.         xmlns:local="clr-namespace:WpfApp"
7.         mc:Ignorable="d"
8.         Title="MainWindow" Height="450" Width="800">
9.     <Grid>
10.         <Grid.RowDefinitions>
11.             <RowDefinition></RowDefinition>
12.             <RowDefinition></RowDefinition>
13.         </Grid.RowDefinitions>
15.         <Grid.ColumnDefinitions>
16.             <ColumnDefinition></ColumnDefinition>
17.             <ColumnDefinition></ColumnDefinition>
18.         </Grid.ColumnDefinitions>
20.         <Border Background="Red"></Border>
21.         <Border Grid.Row="1" Background="Yellow"></Border>
22.         <Border Grid.Column="1"  Background="Blue"></Border>
23.         <Border Grid.Row="1" Grid.Column="1" Background="Green"></Border>
24.     </Grid>
25. </Window><Window x:
26.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
27.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
28.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
29.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
30.         xmlns:local="clr-namespace:WpfApp"
31.         mc:Ignorable="d"
32.         Title="MainWindow" Height="450" Width="800">
33.     <Grid>
34.         <Grid.RowDefinitions>
35.             <RowDefinition></RowDefinition>
36.             <RowDefinition></RowDefinition>
37.         </Grid.RowDefinitions>
39.         <Grid.ColumnDefinitions>
40.             <ColumnDefinition></ColumnDefinition>
41.             <ColumnDefinition></ColumnDefinition>
42.         </Grid.ColumnDefinitions>
44.         <Border Background="Red"></Border>
45.         <Border Grid.Row="1" Background="Yellow"></Border>
46.         <Border Grid.Column="1"  Background="Blue"></Border>
47.         <Border Grid.Row="1" Grid.Column="1" Background="Green"></Border>
48.     </Grid>
49. </Window><Window x:
50.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
51.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
52.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
53.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
54.         xmlns:local="clr-namespace:WpfApp"
55.         mc:Ignorable="d"
56.         Title="MainWindow" Height="450" Width="800">
57.     <Grid>
58.         <Grid.RowDefinitions>
59.             <RowDefinition></RowDefinition>
60.             <RowDefinition></RowDefinition>
61.         </Grid.RowDefinitions>
63.         <Grid.ColumnDefinitions>
64.             <ColumnDefinition></ColumnDefinition>
65.             <ColumnDefinition></ColumnDefinition>
66.         </Grid.ColumnDefinitions>
68.         <Border Background="Red"></Border>
69.         <Border Grid.Row="1" Background="Yellow"></Border>
70.         <Border Grid.Column="1"  Background="Blue"></Border>
71.         <Border Grid.Row="1" Grid.Column="1" Background="Green"></Border>
72.     </Grid>
73. </Window><Window x:
74.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
75.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
76.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
77.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
78.         xmlns:local="clr-namespace:WpfApp"
79.         mc:Ignorable="d"
80.         Title="MainWindow" Height="450" Width="800">
81.     <Grid>
82.         <Grid.RowDefinitions>
83.             <RowDefinition></RowDefinition>
84.             <RowDefinition></RowDefinition>
85.         </Grid.RowDefinitions>
87.         <Grid.ColumnDefinitions>
88.             <ColumnDefinition></ColumnDefinition>
89.             <ColumnDefinition></ColumnDefinition>
90.         </Grid.ColumnDefinitions>
92.         <Border Background="Red"></Border>
93.         <Border Grid.Row="1" Background="Yellow"></Border>
94.         <Border Grid.Column="1"  Background="Blue"></Border>
95.         <Border Grid.Row="1" Grid.Column="1" Background="Green"></Border>
96.     </Grid>
97. </Window>    <Grid>
99.         <DockPanel>
100.             <Button Width="100" Height="40"/>
101.             <Button Width="100" Height="40"/>
102.             <Button Width="100" Height="40"/>
103.             <Button Width="100" Height="40"/>
104.             <Button Width="100" Height="40"/>
105.         </DockPanel>
106.     </Grid>                        

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！