当前位置：网站首页>WPF study notes "WPF Layout Basics"

WPF study notes "WPF Layout Basics"

2022-07-30 04:34:00 【A solar storm】

WPF布局基础


综述：WPFSaid technology is a kind of page,WPFReasonable layout is using some layout in the container to the layout of the need to display the contents of the,在布局时,Use the controls is one of the most <Grid><StackPanel> Secondly some of the controls like <DockPanel>, <WrapPanel> Less use of it,很多需求 <Grid><StackPanel> 就可以完成啦, <DockPanel> 其实用 <Grid><StackPanel> 来表示.

一、 Grid 控件

1. Grid介绍

Grid As the name suggests is the grid layout,Divide the grid into a a grid,Each grid is to populate the content we,当然啦,Who is going to divide the grid yet？That's right is you,That how to position to each grid yet？Can use the coordinates,Do you want to is a two-dimensional array of that kind of locating way is（如下图）.没错,Is the layout position,You may be thinking again,The grid size is divide the large areas of？没错.The default is divide,Now that the default word can special specifies the,那没错了,到这里,We will to a problem,Now that can specify,It must also automatically.没错,Can set the automatic adaptive control size.
在这里插入图片描述

2. 代码实例

  • 第一步,划分格子
//第一步,划分格子
<Window x:Class="xx_MSS.Pages.InstrumentPages.StatisticInfoWindow"
        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:xx_MSS.Pages.InstrumentPages"
        mc:Ignorable="d"
        Title="Instrument statistics" Height="450" Width="800">
    <Grid>
        <!--列定义-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <!---行定义-->
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        
    </Grid>
</Window>

就是这种效果
在这里插入图片描述

  • 第二步、放置元素
<Window x:Class="xx_MSS.Pages.InstrumentPages.StatisticInfoWindow"
        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:xx_MSS.Pages.InstrumentPages"
        mc:Ignorable="d"
        Title="Instrument statistics" Height="450" Width="800">
    <Grid>
        <!--列定义-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <!---行定义-->
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Button Content="第一个按钮" Grid.Column="0" Grid.Row="0"/>
        <Button  Content="第二个按钮" Grid.Column="0" Grid.Row="1"/>
        <Button  Content="第三个按钮" Grid.Column="1" Grid.Row="0"/>
        <Button  Content="第四个按钮" Grid.Column="1" Grid.Row="1"/>
    </Grid>
</Window>

就是这种效果,很好理解吧,This size is specified it,That we ourselves can also specify
在这里插入图片描述

  • 第三步、Specified percentage width
<Window x:Class="xx_MSS.Pages.InstrumentPages.StatisticInfoWindow"
        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:xx_MSS.Pages.InstrumentPages"
        mc:Ignorable="d"
        Title="Instrument statistics" Height="450" Width="800">
    <Grid>
        <!--列定义-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <!---行定义-->
        <Grid.RowDefinitions>
            <RowDefinition Height="45*" />
            <RowDefinition Height="374*"/>
        </Grid.RowDefinitions>

        <Button Content="第一个按钮" Grid.Column="0" Grid.Row="0"/>
        <Button  Content="第二个按钮" Grid.Column="0" Grid.Row="1"/>
        <Button  Content="第三个按钮" Grid.Column="1" Grid.Row="0"/>
        <Button  Content="第四个按钮" Grid.Column="1" Grid.Row="1"/>
    </Grid>
</Window>

就是这种效果,You can specify a specific value,可以用 1* 2* Said value ratio is 1 ：2 之类的
在这里插入图片描述

  • 第四步,Layout from adapted to control the width
<Window x:Class="xx_MSS.Pages.InstrumentPages.StatisticInfoWindow"
        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:xx_MSS.Pages.InstrumentPages"
        mc:Ignorable="d"
        Title="Instrument statistics" Height="450" Width="800">
    <Grid>
        <!--列定义-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <!---行定义-->
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Button Height="150" Width="120" Content="第一个按钮" Grid.Column="0" Grid.Row="0"/>
        <Button  Content="第二个按钮" Grid.Column="0" Grid.Row="1"/>
        <Button  Content="第三个按钮" Grid.Column="1" Grid.Row="0"/>
        <Button  Content="第四个按钮" Grid.Column="1" Grid.Row="1"/>
    </Grid>
</Window>

二、StackPanel 控件

1、StackPanel 介绍

StackPanel Layout is actually is the stack layout,He tends to part,The direction of the horizontal or vertical arrangement,Where the content order is through we specified order,当然,Is the layout of the elements inside actually filled with the layout in the form of filling control,That said we specify each layout element alignment,
在这里插入图片描述

在这里插入图片描述

2、代码实例

  • 第一种：默认垂直布局,
<Window x:Class="xx_MSS.Pages.InstrumentPages.StatisticInfoWindow"
        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:xx_MSS.Pages.InstrumentPages"
        mc:Ignorable="d"
        Title="Instrument statistics" Height="450" Width="800">

    <StackPanel>
        <Button Content="第一个按钮"/>
        <Button  Content="第二个按钮" />
        <Button  Content="第三个按钮" />
        <Button  Content="第四个按钮" />
    </StackPanel>
</Window>

在这里插入图片描述

  • 第二种 水平布局
<Window x:Class="xx_MSS.Pages.InstrumentPages.StatisticInfoWindow"
        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:xx_MSS.Pages.InstrumentPages"
        mc:Ignorable="d"
        Title="Instrument statistics" Height="450" Width="800">

    <StackPanel Orientation="Horizontal">
        <Button Content="第一个按钮"/>
        <Button  Content="第二个按钮" />
        <Button  Content="第三个按钮" />
        <Button  Content="第四个按钮" />
    </StackPanel>
</Window>

在这里插入图片描述

  • 第三种：填充内容
<Window x:Class="xx_MSS.Pages.InstrumentPages.StatisticInfoWindow"
        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:xx_MSS.Pages.InstrumentPages"
        mc:Ignorable="d"
        Title="Instrument statistics" Height="450" Width="800">

    <StackPanel Orientation="Horizontal">
        <Button VerticalAlignment="Top" Content="第一个按钮"/>
        <Button VerticalAlignment="Center" Content="第二个按钮" />
        <Button VerticalAlignment="Bottom" Content="第三个按钮" />
        <Button  VerticalAlignment="Stretch" Content="第四个按钮" />
        <Button  Content="第五个按钮" />
    </StackPanel>
</Window>

在这里插入图片描述

  • 第四种,StackPanelWon't go to the content is more than the window
<Window x:Class="xx_MSS.Pages.InstrumentPages.StatisticInfoWindow"
        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:xx_MSS.Pages.InstrumentPages"
        mc:Ignorable="d"
        Title="Instrument statistics" Height="450" Width="100">

    <StackPanel Orientation="Horizontal">
        <Button  Content="第一个按钮" DockPanel.Dock="Top"/>
        <Button Content="第二个按钮" DockPanel.Dock="Left"/>
        <Button Content="第三个按钮"  DockPanel.Dock="Bottom"/>
        <Button   Content="第四个按钮" DockPanel.Dock="Right"/>
        <Button  Content="第五个按钮" />
    </StackPanel>
</Window>

在这里插入图片描述

三、 DockPanel 控件

1、DockPanel 介绍

Dock is similar to the window that style、Anyway, keep in mind is to write the finish all the corresponding position of,Parked position is all around,There is no central dock that saying

2、代码实例

  • 第一种
<Window x:Class="xx_MSS.Pages.InstrumentPages.StatisticInfoWindow"
        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:xx_MSS.Pages.InstrumentPages"
        mc:Ignorable="d"
        Title="Instrument statistics" Height="450" Width="800">

    <DockPanel>
        <Button  Content="第一个按钮" DockPanel.Dock="Top"/>
        <Button Content="第二个按钮" DockPanel.Dock="Left"/>
        <Button Content="第三个按钮"  DockPanel.Dock="Right"/>
        <Button   Content="第四个按钮" DockPanel.Dock="Bottom"/>
        <Button  Content="第五个按钮" />
    </DockPanel>
</Window>

在这里插入图片描述
Inside place in,May effect is not the same

<Window x:Class="xx_MSS.Pages.InstrumentPages.StatisticInfoWindow"
        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:xx_MSS.Pages.InstrumentPages"
        mc:Ignorable="d"
        Title="Instrument statistics" Height="450" Width="800">

    <DockPanel>
        <Button  Content="第一个按钮" DockPanel.Dock="Top"/>
        <Button Content="第二个按钮" DockPanel.Dock="Left"/>
        <Button Content="第三个按钮"  DockPanel.Dock="Bottom"/>
        <Button   Content="第四个按钮" DockPanel.Dock="Right"/>
        <Button  Content="第五个按钮" />
    </DockPanel>
</Window>

在这里插入图片描述

四、 WrapPanel 控件

1、WrapPanel 介绍

WrapPanel其实和StackPanel很类似,Also there are horizontal and vertical layout,默认是水平,只是说,StackPanelDon't automatically change the layout,WrapPanelIn window internal elements too much,Automatic transfer element to the next line,

2、代码实例

  • 第一种
<Window x:Class="xx_MSS.Pages.InstrumentPages.StatisticInfoWindow"
        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:xx_MSS.Pages.InstrumentPages"
        mc:Ignorable="d"
        Title="Instrument statistics" Height="450" Width="700">

    <WrapPanel>
        <Button  Content="第一个按钮" DockPanel.Dock="Top"/>
        <Button Content="第二个按钮" DockPanel.Dock="Left"/>
        <Button Content="第三个按钮"  DockPanel.Dock="Bottom"/>
        <Button   Content="第四个按钮" DockPanel.Dock="Right"/>
        <Button  Content="第五个按钮" />
    </WrapPanel>
</Window>

在这里插入图片描述
Content excess window size

<Window x:Class="xx_MSS.Pages.InstrumentPages.StatisticInfoWindow"
        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:xx_MSS.Pages.InstrumentPages"
        mc:Ignorable="d"
        Title="Instrument statistics" Height="450" Width="300">

    <WrapPanel>
        <Button  Content="第一个按钮" DockPanel.Dock="Top"/>
        <Button Content="第二个按钮" DockPanel.Dock="Left"/>
        <Button Content="第三个按钮"  DockPanel.Dock="Bottom"/>
        <Button   Content="第四个按钮" DockPanel.Dock="Right"/>
        <Button  Content="第五个按钮" />
    </WrapPanel>
</Window>

在这里插入图片描述

原网站

版权声明
本文为[A solar storm]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/211/202207300257426587.html

边栏推荐

猜你喜欢

随机推荐