WPF学习（6）- WPF布局Demo示例

xml 复制代码

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <!--Top 整体停靠布局  -->
        <DockPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Background="#126A74" Height="60">
            <TextBlock Text="XX应用程序" Foreground="White" FontSize="20" Margin="15,15" />
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <Border Height="35" Margin="10" BorderThickness="1" BorderBrush="#CA5100" Background="#CA5100"
                        CornerRadius="10">
                    <TextBlock Text="退出系统" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"
                               Margin="10 0 10 0" />
                </Border>
            </StackPanel>
        </DockPanel>
        <!--left-->
        <StackPanel Grid.Row="1" Grid.Column="0" Width="350" Orientation="Vertical">
            <Border Height="50" Margin="10" Padding="5" Background="#439D84">
                <TextBlock Text="参数区域" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center"
                           Foreground="White" FontSize="16" />
            </Border>
            <Border Height="50" Margin="10" Padding="5" Background="#9CDC7B">
                <TextBlock Text="参数区域" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center"
                           Foreground="White" FontSize="16" />
            </Border>
            <Border Height="110" Margin="10" Padding="5" Background="#E97752">
                <TextBlock Text="参数区域" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center"
                           Foreground="White" FontSize="16" />
            </Border>
        </StackPanel>
        <!--right-->
        <Grid Grid.Row="1" Grid.Column="1">
            <Border Margin="10" Padding="5" BorderThickness="1" BorderBrush="#F7BD93" CornerRadius="5"
                    Background="#FDD2B2">
                <TextBlock Text="主体区域" Margin="5" />
            </Border>
            <Border Width="150" Height="150" Margin="10" Padding="5" BorderThickness="1" Background="Red"
                    BorderBrush="Gray" CornerRadius="75">
                <TextBlock Text="开始运行" Margin="5" HorizontalAlignment="Center" FontSize="16" FontWeight="Bold"
                           VerticalAlignment="Center" Foreground="White" />
            </Border>
        </Grid>
        <!--bottom-->
        <Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Background="#CA5100">
            <TextBlock Text="版本：1.0  |  版权所有：百度有限公司  www.baidu.com" Margin="10 5 10 5" Foreground="White" />
        </Grid>
    </Grid>

我们通过Grid栅格布局出界面的主要区域，然后给每个区域进行二次布局，比如Top区域，我们DockPanel和StackPanel的组合，设计成左右两个子区域，左边是应用程序的名称，右边是退出按钮。

中间区域，分为两部分组成，左边是一个StackPanel，里面有一个Border，右边是一个Grid。(注：左侧的StackPanel改成Grid的效果会更好)。

底部区域是一个Grid和一个TextBlock内容控件。