WPF简单布局 浅尝辄止

Posted 2020-06-23

        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>