WPF學習-佈局

1.  Grid佈局 ,(Table 佈局)

兩行兩列佈局, 

Border  0 行 0 列預設開始

<Window x:Class="WpfApp.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:WpfApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Border Background="Red"></Border>
        <Border Grid.Row="1" Background="Yellow"></Border>
        <Border Grid.Column="1"  Background="Blue"></Border>
        <Border Grid.Row="1" Grid.Column="1" Background="Green"></Border>
    </Grid>
</Window>

效果圖:

2. StackPanel 佈局

預設垂直佈局 ，一旦超出區域限制後不限制

   <StackPanel Orientation="Horizontal">  改成水平排列

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <StackPanel>
            <Button Width="100" Height="40"/>
            <Button Width="100" Height="40"/>
            <Button Width="100" Height="40"/>
            <Button Width="100" Height="40"/>
            <Button Width="100" Height="40"/>
        </StackPanel>
    </Grid>

效果圖:

3.  WrapPanel 佈局， （ float佈局）

預設水平排序

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <StackPanel Orientation="Horizontal">
            <Button Width="100" Height="40"/>
            <Button Width="100" Height="40"/>
            <Button Width="100" Height="40"/>
            <Button Width="100" Height="40"/>
            <Button Width="100" Height="40"/>
        </StackPanel>

        <WrapPanel Grid.Row="1">
            <Button Width="100" Height="40"/>
            <Button Width="100" Height="40"/>
            <Button Width="100" Height="40"/>
            <Button Width="100" Height="40"/>
            <Button Width="100" Height="40"/>
        </WrapPanel>
    </Grid>

效果：

4. DockPanel  停靠 (flex 佈局)

預設橫向填充,

    <Grid>

        <DockPanel>
            <Button Width="100" Height="40"/>
            <Button Width="100" Height="40"/>
            <Button Width="100" Height="40"/>
            <Button Width="100" Height="40"/>
            <Button Width="100" Height="40"/>
        </DockPanel>
    </Grid>

效果圖:

預設橫向填充,  最後一個元素占據整個佈局, 居中顯示.

停靠佈局

註意設置: LastChildFill="False"

    <Grid>

        <DockPanel LastChildFill="False">
            <Button Width="100" Height="40" DockPanel.Dock="Left"/>
            <Button Width="100" Height="40" DockPanel.Dock="Top"/>
            <Button Width="100" Height="40" DockPanel.Dock="Right"/>
            <Button Width="100" Height="40" DockPanel.Dock="Bottom"/>
        </DockPanel>
    </Grid>

效果圖:

5. Uniform 佈局 （Table）

均分所有區域

設置三行三列佈局

        <UniformGrid Columns="3" Rows="3">
            <Button></Button>
            <Button></Button>
            <Button></Button>
            <Button></Button>
            <Button></Button>
            <Button></Button>
            <Button></Button>
            <Button></Button>
        </UniformGrid>

效果圖：

6.  佈局Demo 案例

Border : 類似background 屬性 

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"></RowDefinition>
            <RowDefinition ></RowDefinition>
        </Grid.RowDefinitions>

        <!--裝飾器元素-->
        <Border Background="#7671d8"></Border>

        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200"></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Border Background="Blue"></Border>

            <Grid Grid.Column="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.5*"></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <Border Margin="5" Background="#7671d8"></Border>
                <Border Margin="5" Background="#429ecd" Grid.Column="1"></Border>
                <Border Margin="5" Background="#7671d8" Grid.Column="2"></Border>
                <Border Margin="5" Background="#5ac4b6" Grid.Column="3"></Border>
                <Border Margin="5" Background="#d9707f" Grid.Column="4"></Border>

                <Border Background="Red" Grid.Row="1" Grid.ColumnSpan="3" Margin="5">
                </Border>

                <Border Background="Yellow" Grid.Row="1" Grid.Column="3" Grid.ColumnSpan="2" Margin="5">
                </Border>

                <Border Grid.Row="2" Background="Blue" Margin="5" Grid.ColumnSpan="3"></Border>
                <Border Grid.Row="2" Grid.ColumnSpan="2" Grid.Column="3" Background="Green" Margin="5"></Border>
                
            </Grid>
        </Grid>

    </Grid>

本文來自博客園，作者：至道中和，轉載請註明原文鏈接：https://www.cnblogs.com/voidobject/p/17241758.html