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内容控件。

相关推荐
懒惰的bit2 小时前
基础网络安全知识
学习·web安全·1024程序员节
Natural_yz5 小时前
大数据学习09之Hive基础
大数据·hive·学习
龙中舞王5 小时前
Unity学习笔记(2):场景绘制
笔记·学习·unity
Natural_yz5 小时前
大数据学习10之Hive高级
大数据·hive·学习
love_and_hope5 小时前
Pytorch学习--神经网络--完整的模型训练套路
人工智能·pytorch·python·深度学习·神经网络·学习
夜雨星辰4876 小时前
Android Studio 学习——整体框架和概念
android·学习·android studio
奔跑的花短裤6 小时前
少儿编程启蒙学习
学习·青少年编程·机器人·ai编程
VertexGeek6 小时前
Rust学习(一):初识Rust和Rust环境配置
开发语言·学习·rust
chusheng18406 小时前
Java基于小程序公考学习平台的设计与实现(附源码,文档)
java·学习·小程序·公考小程序·公考学习小程序
虾球xz7 小时前
游戏引擎学习第五天
学习·算法·游戏引擎