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>

效果:
在这里插入图片描述

发布了65 篇原创文章 · 获赞 8 · 访问量 3212

猜你喜欢

转载自blog.csdn.net/yasenRK/article/details/104195793