WPF应用布局基础

创建应用
WPF应用(.Net framework) C#
完成后控制台在下方


在grid中存放内容
存放的容器有多种
<Grid></Grid>
<StackPanel/>
<WrapPanel/>
<DockPanel/>
<UniformGrid/>
不同的存放容器
<Grid></Grid>为最常用的存放容器


创建用户控件:
用户控件后缀名为.xaml
其中用户控件用的存放容器为grid容器

 

创建行(hang)
//注释:其中可以对<RowDefinition>加/进行代码缩写例如<RowDefinition></RowDefinition>可以缩写为<RowDefinition/>代表一行


<Grid.RowDefinitions></Grid.RowDefinitions>
如果想多行创建则在行中添加<RowDefinition></RowDefinition>
<Grid.RowDefinitions>
<RowDefinition>
</RowDefinition>
</Grid.RowDefinitions>
创建列<Grid.ColumnDefinitions></Grid.ColumnDefinitions>
如果想多列创建则在列中添加<ColumnDefinition></ColumnDefinition>
<Grid.ColumnDefinitions>
<ColumnDefinition>
</ColumnDefinition>
</Grid.ColumnDefinitions>


装饰:
<Border></Border>
可以用于装饰行或列的样式
Background=‘’”
默认修饰的是0行0列的内容,和下标一样[0][0]判断位置
找行的位置使用
Grid.Row="" 双引号中加下标默认为0
找列的位置使用
Grid.Column="" 双引号中加下标默认为0


修饰过后内容是均匀分布在视图中的
可以在行中添加属性 例如:
<RowDefinition Height="auto"/> //注释:auto是自动适应的意思
当自动适应时,下方行会占据整个视图
可以给视图内添加内容
会根据内容的最高高度适应整个视图的高度
例如:
//注释:button按钮不能直接添加在行或列中,默认的是0行0列的内容,和下标一样[0][0]判断位置,与添加装饰相同
<Button Height="100"/>整个适应视图的高度为100

属性Height操作
可以给<RowDefinition Height="auto"/> 中的Height="auto"改为
Height="2*"这样这一行的视图就是下方视图的两倍


如果我们想用一个装饰页面占据多行多列
使用Grid.ColumnSpan占据多列 默认从[0]行[0]列开始
例如
Grid.Column="1" Grid.ColumnSpan="2"
从下标为1的列开始占据,占据2列,也就是占据到了下标为2的列,一共占据了2列

使用Grid.RowSpan占据多行 默认从[0]行[0]列开始
例如
Grid.Row="0" Grid.RowSpan="2"
从下标为0的行开始占据,占据2行,也就是占据到了下标为1的行,一共占据了2行

 

<StackPanel/>容器: //注释:stack panel(堆栈面板)
是一个局部容器:默认的排列顺序是从上往下排列
<StackPanel Orientation="">
</StackPanel>
其中Orientation代表方向,其中有两个字段
默认方向为Vertical(从上往下)
可选方向为Horizontal(从左往右)

 

<WrapPanel/>容器:
对于<StackPanel/>来说<WrapPanel/>会自动排列,
也具有属性Orientation
<WrapPanel/>可以进行自动换行操作无论是从上往下还是从左往右
当视图无法完整的存放时就会进行自动换行操作
<StackPanel/>不会进行自动换行操作,即使显示不出来也会继续向后完成
例如 整体视图宽为500我们定义了10个button按钮宽为110
<WrapPanel/>会变成三行存放整体内容
<StackPanel/>会变成一行存放整体内容,内容宽度即使超出视图宽度也不会进行自动换行

 

<DockPanel/>容器://注释:Dock panel(停靠面板)
<DockPanel/>中最后一个元素是一个填充空间
无论其中有几个元素,最后一个都是填充空间
想让其跟随可以添加属性LastChildFill
LastChildFill默认属性为true 可以改为false
可以使用其中的属性DockPanel.Dock进行位置排列
例如DockPanel.Dock="Bottom"会在视图下方显示

 


<UniformGrid/>容器:
类似于表格的使用
可以在内部添加属性 Rows,和 Columns
会自动进行行列的切换
比如有九个按钮会自动变为rows=3,columns=3 共九个格子
有十个按钮会自动变为rows=4,columns=4 共十六个格子
以此类推
也可以自己定义一个多行多列的表格

 

posted @ 2022-09-01 18:34  _Fearless  阅读(87)  评论(0编辑  收藏  举报