WPF学习笔记之布局0

WPF学习笔记之布局0

WPF中布局包括两个阶段：测量和排列

wpf中所有的布局容器都都是派生自System.Windows.Controls.Panel抽象类面板，包括三个共有属性

名称	说明
Background	设置面板的背景颜色
Children	该属性是在面板中存储条目集合
IsItemHost	该属性是一个布尔值通俗来讲记是判断改容器是不是一个宿主容器

使用StackPanel面板进行简单的布局

• StackPanel容器有一个Orientation属性，默认是Vertical,此时添加在里面的控件都是竖向布置，如果手动改成了Horizontantal，那么里面的控件就会水平布置.
• StackPanel中添加的元素默认会被拉伸到StackPanel的大小，所以可以通过单个空间的高度、宽度属性来设置大小，也可以通过设置StackPanel的大小来设置里面所有控件的大小

 <StackPanel Background="LightBlue" Orientation="Vertical">
        <Button Name="btn1" FontSize="30" Width="100" MouseEnter="Btn1_MouseEnter" >Button1</Button>
        <Button Name="btn2" FontSize="30" Width="100" >Button2</Button>
        <Button Name="btn3" FontSize="30" Width="100" >Button3</Button>
        <Button Name="btn4" FontSize="30" Width="100" >Button4</Button>
    </StackPanel>

效果：

• Button控件的默认水平位置是在中间位置，而label控件的书评位置是靠左的。

Border控件

Border控件不是布局控件，二是非常便于使用的元素，经常与布局面板一起使用。

Border控件的属性如下：

名称	说明
Background	使用Brush对象设置背景颜色
BorderBrush/BorderThickness	使用Brush对象设置Border边框的颜色，并设置边框的宽度
CornerRadius	设置边框的圆角，CornerRadius值越大，边角越圆
Padding	该属性在边框和内容之间添加空间(于此相对，Margin属性在边框之外添加空间)

DockPanel面板

DockPanel面板沿着一条外边缘来拉伸所包含的所有的控件。
DocKPanel.Dock属性有Top,Left,Bottom,Right等设置所停靠的位置

<Window x:Class="布局.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:布局"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" >
    <Grid>
        <DockPanel LastChildFill="True">
            <Button FontSize="30" DockPanel.Dock="Top">Top Button</Button>
            <Button FontSize="30" DockPanel.Dock="Left">Left Button</Button>
            <Button FontSize="30" DockPanel.Dock="Right">Rigth button</Button>
            <Button FontSize="30" DockPanel.Dock="Bottom">Bottom Panel</Button>
            <Button FontSize="30">Remian Space</Button>
        </DockPanel>
    </Grid>
</Window>

效果：