C#四种布局方式（网格、泊靠式面板、栈式面板、自动折行式）

最新推荐文章于 2024-10-07 10:58:21 发布

行思坐忆，志凌云

最新推荐文章于 2024-10-07 10:58:21 发布

阅读量2.5k

点赞数

分类专栏： C# 文章标签： c#

原文链接：https://blog.csdn.net/weixin_44565782/article/details/90543933

版权

C# 专栏收录该内容

3 篇文章 2 订阅

订阅专栏

C#四种布局面板
在这里插入图片描述
利用网格将四种布局面板整合到一个窗口，讲解都在注释中，代码如下

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
             <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Row="0">
            <GroupBox Header="Grid网格" Height="Auto">
                <Button Content="Grid" Background="Yellow"></Button>
            </GroupBox>
        </Grid>
        <Grid Grid.Row="1">
            <GroupBox Header="DockPanel泊靠式面板" Height="Auto">
                <DockPanel LastChildFill="False">
                    <!--LastChildFill 设置False时 不填充-->
                    <Button DockPanel.Dock="Left" Content="BUtton.left"></Button>
                    <Button DockPanel.Dock="Top" Content="button.Top"></Button>
                    <Button DockPanel.Dock="Right" Content="button.right"></Button>
                    <Button DockPanel.Dock="Bottom" Content="button.Bottom"></Button>
                    <Button  Content="ButtonTop"></Button>
                </DockPanel>
            </GroupBox>
        </Grid>
        <Grid Grid.Row="2">
            <StackPanel>
                <GroupBox Header="StackPanel栈式面板" Height="Auto">
                    <StackPanel Orientation="Vertical" Width="300">
                        <!-- Orientation="Horizontal"按钮呈水平排列-->
                        <Button Content="亚马逊"></Button>
                        <Button>天猫</Button>
                        <Button Content="京东"/>
                        <Button Content="天眼"/>
                    </StackPanel>
                </GroupBox>
            </StackPanel>
        </Grid>
        <Grid Grid.Row="3">
            <GroupBox Header="WrapPanel自动折行面板" Height="Auto">
                <WrapPanel Orientation="Vertical">
                    <!-- Orientation="Horizontal"按钮呈水平排列-->
                    <Button Content="亚马逊"></Button>
                    <Button>天猫</Button>
                    <Button Content="京东"/>
                    <Button Content="天眼"/>
                    <Button Content="亚马逊"></Button>
                    <Button>天猫</Button>
                </WrapPanel>
            </GroupBox>
        </Grid>
        <Grid Grid.Row="0" Grid.Column="1">
            <!--2、	子元素超出边界-->
            <Canvas ClipToBounds="False">
                <!--如果将ClipToBounds属性设为true，在设计界面将会对子元素的超出部分进行裁剪-->
                <TextBox Width="100" BorderBrush="Blue"></TextBox>
                <TextBox Canvas.Left="200" Canvas.Top="50" Width="100" BorderBrush="Green"></TextBox>
            <Button Height="200" Canvas.Right="10" Canvas.Bottom="-130" Content="按钮"></Button>
            </Canvas>
        </Grid>
    </Grid> 
    ```