WPF简单布局 浅尝辄止

2022-09-19 16:44:31

        WPF的窗口只能包含一个元素，为了在WPF窗口中放置多个元素并创建更实用的用户界面，需要在窗口上放置一个容器，然后在容器中放置其它元素。
注意：造成这一限制的原因是window类继承自contentcontrol类，
说道简单布局不得不说下wpf的布局原则：
    
    理想窗口要遵循的布局原则：
    1，不应显示的设定元素的尺寸。
    2，不应使用屏幕坐标指定元素的位置。
    3，布局容器和他们的子元素“共享”可以使用的空间。
    4，可以嵌套布局容器。
    布局过程包括：测量阶段和排列阶段。所有的wpf布局容器都是派生自system.windows.controls.panel抽象类的面板。
布局容器：
    1，StatckPanel:在一个水平或垂直的堆栈中放置元素。
<Window x:Class="布局.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="布局测试" Height="350" Width="525">

<StackPanel Orientation="Vertical">

<!--Orientation布局方向-->

<Label Height="50"> A Button Stack</Label>

<Button Height="54">button1</Button>

<Button Height="57">button2</Button>

<Button Height="54">button3</Button>

<Button Height="47">button4</Button>

<Button Height="58">button5</Button>

</StackPanel>

</Window>

       2，WrapPanel:在一系列的可换行的行中放置元素，在水平方向上，WrapPanel面板以从左向右的方式放置条目，然后在随后的行中放置元素，垂直方向上，WrapPanel的面板在自上而下的列放置元素并且使用附加的列放置剩余条目。
        <Window x:Class="布局.WrapPanel面板"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WrapPanel面板" Height="300" Width="309.195">
    <WrapPanel Orientation="Vertical">
        <Button Content="Button1" Width="75"/>
        <Button Content="Button2" Width="75"/>
        <Button Content="Button3" Width="75"/>
        <Button Content="Button4" Width="75"/>
        <Button Content="Button5" Width="75"/>
        <Button Content="Button6" Width="75"/>
        <Button Content="Button7" Width="75"/>
        <Button Content="Button8" Width="75"/>
        <Button Content="Button9" Width="75"/>
        <Button Content="Button10" Width="75"/>
        <Button Content="Button11" Width="75"/>
        <Button Content="Button12" Width="75"/>
        <Button Content="Button13" Width="75"/>
        <Button Content="Button14" Width="75"/>
        <Button Content="Button15" Width="75"/>
        <Button Content="Button16" Width="75"/>
    </WrapPanel>
</Window>
       
      3，DockPanel:根据容器的整个边界调整元素。
            <Window x:Class="布局.DockPanel面板"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel面板" Height="300" Width="300">
    <Border Margin="10,10" Background="LightBlue" BorderBrush="Pink" BorderThickness="5" CornerRadius="20">
        <DockPanel LastChildFill="False">
            <Button Content="top1" DockPanel.Dock="Top"></Button>
            <Button Content="left1" DockPanel.Dock="Left"></Button>
            <Button Content="right1" DockPanel.Dock="Right"></Button>
            <Button Content="bottom1" DockPanel.Dock="Bottom"></Button>
        </DockPanel>
    </Border>
</Window>
 
      4，Grid:最常用的元素，不多说类似与html中的table一样的布局元素。表格布局最灵活的布局容器之一。
            单元格设置为数字*的形式和容器成比例缩放.
            <Window x:Class="布局.Grid*容器"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid*容器" Height="300" Width="300">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Content="TopLeft" Grid.Row="0" Grid.Column="0"></Button>
        <Button Content="MiddleLeft" Grid.Row="0" Grid.Column="1"></Button>
        <Button Content="BottomRight" Grid.Row="1" Grid.Column="2"></Button>
        <Button Content="BottomMiddle" Grid.Row="1" Grid.Column="1"></Button>
    </Grid>
</Window>
      5，UniformGrid:在一个不可见但是强制所有单元格具有相同尺寸的表中放置元素。不常用
<Window x:Class="布局.UniformGrid面板"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="UniformGrid面板" Height="300" Width="300">

<Border Background="LightGray" BorderBrush="Brown" BorderThickness="5,5" CornerRadius="10" Margin="5">

<UniformGrid Rows="2" Columns="2">

<Button>top left</Button>

<Button>top right</Button>

<Button>bottom left</Button>

<Button>bottom right</Button>

</UniformGrid>

</Border>

</Window>

               
      6，Canvas:是固定的坐标绝对定位元素。这个布局容器和传统的windows窗体最相似，但是没有提供锚定或停靠功能，不建议使用。
<Window x:Class="布局.Canvas面板"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Canvas面板" Height="300" Width="300">

<Border BorderBrush="Beige" BorderThickness="10" Margin="5" Background="YellowGreen" CornerRadius="15">

<Canvas>

<Button Canvas.Left="10" Canvas.Top="10">10,10</Button>

<Button Canvas.Left="20" Canvas.Top="20">20,20</Button>

<Button Canvas.Left="30" Canvas.Top="40">30,40</Button>

<Button Canvas.Right="60" Canvas.Bottom="50">60,50</Button>

</Canvas>

</Border>

</Window>

                
      7，Border边框
    <Window x:Class="布局.border控件"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="border控件" Height="300" Width="300">
    <Border Margin="7" Padding="15" Background="LightYellow" BorderBrush="SteelBlue" BorderThickness="3,5,3,5" CornerRadius="5" VerticalAlignment="Top">
        <StackPanel>
            <Label Name="lb">One</Label>
            <Button Name="bt2">Two</Button>
            <Button Name="bt3">Three</Button>
        </StackPanel>
    </Border>
</Window>
上一篇：WPF做12306验证码点击效果


下一篇：收藏maven错误