文章目录

前言
- 概述：
一、StackPanel
- Orientation属性演示
- - 代码如下（水平排列）:
  - 效果图如下
  - 代码如下（垂直排列）:
  - 效果图如下
- Background属性演示
- - 代码如下
  - 效果如下
- HorizontalAlignment属性演示
- - 代码如下（水平靠右）其他同理
  - 效果图如下
- VerticalAlignment属性演示
- - 代码如下（垂直向下）其他同理
  - 效果图如下
- 总结

前言

博主文章仅用于学习、研究和交流目的，不足和错误之处在所难免，希望大家能够批评指出，博主核实后马上更改。

概述：

StackPanel可以把内部的元素在纵向或者横向的排列。

名称	说明
Grid	网格，根据自定义行和列来设置控件的布局
StackPanel	栈式面板，包含的元素在竖直或水平方向排成一条直线
WrapPanel	自动折行面板，包含的元素在排满一行后，自动换行
DockPanel	泊靠式面板，内部的元素可以选择泊靠方向
UniformGrid	网格,UniformGrid就是Grid的简化版，每个单元格的大小相同。
Canvas	画布，内部元素根据像素为单位绝对坐标进行定位
Border	装饰的控件，此控件用于绘制边框及背景，在Border中只能有一个子控件

一、StackPanel

常用属性	数据类型	可选值	说明
Orientation	Orientation	Horizontal（水平排列）\Vertical(垂直排列)	决定内部元素是水平还是垂直排列，默认值（Vertical）
Background	Brush	背景色(Red/Yellow等等)
HorizontalAlignment	HorizontalAlignment	Center（中心）/Left（靠左）/Right（靠右）/Stretch（拉伸以填充父元素）	决定内部元素在水平方向的对齐方式
VerticalAlignment	VerticalAlignment	Top（上方）/Center（中心）/Bottom（下方）/Stretch（拉伸以填充父元素）	决定内部元素在垂直方向的对齐方式

Orientation属性演示

代码如下（水平排列）:

 <Window.Resources><Style TargetType="{x:Type Button}"><Setter Property="Width" Value="100" ></Setter></Style></Window.Resources><Grid ><StackPanel Orientation="Horizontal"><Button>zhangsan</Button><Button>zhangsan</Button><Button>zhangsan</Button><Button>zhangsan</Button></StackPanel></Grid>

效果图如下

代码如下（垂直排列）:

    <Window.Resources><Style TargetType="{x:Type Button}"><Setter Property="Height" Value="100" ></Setter></Style></Window.Resources><Grid ><StackPanel><Button>zhangsan</Button><Button>zhangsan</Button><Button>zhangsan</Button><Button>zhangsan</Button></StackPanel></Grid>

效果图如下

Background属性演示

代码如下

     <StackPanel  Background="Red"></StackPanel>

效果如下

HorizontalAlignment属性演示

代码如下（水平靠右）其他同理

    <Window.Resources><Style TargetType="{x:Type Button}"><Setter Property="Height" Value="100" ></Setter></Style></Window.Resources><Grid ><StackPanel HorizontalAlignment="Right"><Button>zhangsan</Button><Button>zhangsan</Button><Button>zhangsan</Button><Button>zhangsan</Button></StackPanel></Grid>

效果图如下

VerticalAlignment属性演示

代码如下（垂直向下）其他同理

   <Grid ><StackPanel VerticalAlignment="Bottom"><Button>zhangsan</Button><Button>zhangsan</Button><Button>zhangsan</Button><Button>zhangsan</Button></StackPanel></Grid>

效果图如下

总结

在实际工作中，我们可以使用Orientation、HorizontalAlignment、VerticalAlignment 这三个属性组合各种排列和对齐方式。

WPF布局控件之StackPanel布局相关推荐

Android在Activity中动态增加xml自定义样式布局控件(引用xml布局文件和循环增加控件)
工程目录: MainActivity package com.example.test1121;import androidx.appcompat.app.ActionBar; import andr ...
WPF布局控件之StackPanel
StackPanel Stack,英文意思是堆栈,StackPanel,意思是堆栈式布局,相当于把控件给堆起来.如果不设置StackPanel中控件的宽高,那么其中控件的宽高是默认和StackPane ...
WPF的布局控件：Grid，StackPanel，DockPanl，Canvas，WrapPanel， UniformGrid
WPF中的基本控制面板类控件都是从 Panel 类中派生出来的, Panel 本身是 UIElement.Panel(Abstract)排成出来的排版控件: StackPanel WrapPanel ...
WPF布局控件与子控件的HorizontalAlignment/VerticalAlignment属性之间的关系
WPF布局控件与子控件的HorizontalAlignment/VerticalAlignment属性之间的关系: 1.Canvas/WrapPanel控件: 其子控件的HorizontalAlign ...
WPF（一） WPF基本控件与布局
WPF(Windows Presentation Foundation)是微软推出的基于Windows的用户界面框架,中文译为"Windows呈现基础",属于.NET Fram ...
【愚公系列】2023年07月 WPF+上位机+工业互联 002-WPF布局控件
文章目录前言一.WPF布局控件 1.无边框设计 2.理解布局 2.1 WPF的布局处理 2.1 布局原则 2.3 布局过程 3.布局控件 3.1 Grid控件 3.1.1 属性 3.1.2 案例 ...
WPF布局控件AvalonDock介绍以及应用中遇到的一个问题
在使用OpenExpressApp框架工作中,我们将开源的AvalonDock控件作为界面布局来应用. AvalonDock是在codeplex上的一个开源项目,专门用于WPF的界面布局,可以做成类似 ...
WPF 自定义控件-布局控件
自定义布局控件 1.添加自定义控件添加新项->WPF->自定义控件(WPF) 在Themes文件夹下Generic.xaml会自动生成自定义控件的模板样式 2.实现自定义布局控件功能 1 ...
Expression Blend实例中文教程(3) - 布局控件快速入门Grid
上一篇对Blend 3开发界面进行了快速入门介绍,本篇将基于Blend 3介绍Silverlight控件.对于微软开发工具熟悉的朋友,相信您很快就熟悉Blend的开发界面和控件. XAML概述 Sil ...
Silverlight 数据显示和布局控件示例
数据显示控件 DataGrid DataGrid 是最基础的数据显示方式,也就是二维表格. <data:DataGrid Name="dataGrid1" Height=&q ...

WPF布局控件之StackPanel布局

文章目录

前言

概述：

一、StackPanel

Orientation属性演示

代码如下（水平排列）:

效果图如下

代码如下（垂直排列）:

效果图如下

Background属性演示

代码如下

效果如下

HorizontalAlignment属性演示

代码如下（水平靠右）其他同理

效果图如下

VerticalAlignment属性演示

代码如下（垂直向下）其他同理

效果图如下

总结

WPF布局控件之StackPanel布局相关推荐

最新文章

热门文章