WPF笔记(1.4 布局)——Hello,WPF!

简介: 原文:WPF笔记(1.4 布局)——Hello,WPF!这一节只是第2章的引子。布局要使用Panel控件,有四种Panel,如下:DockPanel,就是设置停靠位置布局模型。StackPanel,提供一个从左至右或从上至下放置内容的堆栈模型。
原文: WPF笔记(1.4 布局)——Hello,WPF!

这一节只是第2章的引子。
布局要使用Panel控件,有四种Panel,如下:
DockPanel,就是设置停靠位置布局模型。
StackPanel,提供一个从左至右或从上至下放置内容的堆栈模型。
Grid,提供一个允许进行 行/网格定位的模型。可使用表格。
Canvas,可精确定位。

其中,Grid是最常用的,vs2005自动生成的Page和window都默认带有这个标签:

img_a6339ee3e57d1d52bc7d02b338e15a60.gif Example  1 - 25 . A sample usage of the Grid panel
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
< Window img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif  
< Grid >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
< Grid.RowDefinitions >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif      
< RowDefinition  />
img_a6339ee3e57d1d52bc7d02b338e15a60.gif      
< RowDefinition  />
img_a6339ee3e57d1d52bc7d02b338e15a60.gif      
< RowDefinition  />
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
</ Grid.RowDefinitions >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
< Grid.ColumnDefinitions >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif      
< ColumnDefinition  />
img_a6339ee3e57d1d52bc7d02b338e15a60.gif      
< ColumnDefinition  />
img_a6339ee3e57d1d52bc7d02b338e15a60.gif      
< ColumnDefinition  />
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
</ Grid.ColumnDefinitions >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
< Button Grid.Row = " 0 "  Grid.Column = " 0 "  Grid.ColumnSpan = " 2 " > A </ Button >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
< Button Grid.Row = " 0 "  Grid.Column = " 2 " > C </ Button >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
< Button Grid.Row = " 1 "  Grid.Column = " 0 "  Grid.RowSpan = " 2 " > D </ Button >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
< Button Grid.Row = " 1 "  Grid.Column = " 1 " > E </ Button >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
< Button Grid.Row = " 1 "  Grid.Column = " 2 " > F </ Button >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
< Button Grid.Row = " 2 "  Grid.Column = " 1 " > H </ Button >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
< Button Grid.Row = " 2 "  Grid.Column = " 2 " > I </ Button >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif  
</ Grid >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</ Window >
这段程序产生一个3x3表格。注意,先定义行格式,再定义列格式,最后是往单元格放入button。

img_a6339ee3e57d1d52bc7d02b338e15a60.gif Example  1 - 26 . Arranging an image and text  in  a grid
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
< Button Width = " 100 "  Height = " 100 " >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif  
< Button.Content >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
< Grid >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif      
< Grid.RowDefinitions >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
< RowDefinition  />
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
< RowDefinition  />
img_a6339ee3e57d1d52bc7d02b338e15a60.gif      
</ Grid.RowDefinitions >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif      
< Image Grid.Row = " 0 "  Source = " tom.png "   />
img_a6339ee3e57d1d52bc7d02b338e15a60.gif      
< TextBlock
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        Grid.Row
= " 1 "
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        HorizontalAlignment
= " Center " > Tom </ TextBlock >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
</ Grid >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif  
</ Button.Content >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</ Button >
这段程序是在图片下面加了一行Caption,也是用的Grid下表格排版。

以上两个例子都有 Grid.Row=1这样的语法——attached-property牵连属性。即在Grid内部定义(),在外部控件Button中指定属性值。
牵连属性的用途,事先不一定用Button填充单元格,这样对所有控件就有任意性——暂时这么想,因为没看第二章。
目录
相关文章
|
4月前
|
C# UED 开发者
WPF与性能优化:掌握这些核心技巧,让你的应用从卡顿到丝滑,彻底告别延迟,实现响应速度质的飞跃——从布局到动画全面剖析与实例演示
【8月更文挑战第31天】本文通过对比优化前后的方法,详细探讨了提升WPF应用响应速度的策略。文章首先分析了常见的性能瓶颈,如复杂的XAML布局、耗时的事件处理、不当的数据绑定及繁重的动画效果。接着,通过具体示例展示了如何简化XAML结构、使用后台线程处理事件、调整数据绑定设置以及利用DirectX优化动画,从而有效提升应用性能。通过这些优化措施,WPF应用将更加流畅,用户体验也将得到显著改善。
305 1
|
4月前
|
开发者 C# Windows
WPF布局大揭秘:掌握布局技巧,轻松创建响应式用户界面,让你的应用程序更上一层楼!
【8月更文挑战第31天】在现代软件开发中,响应式用户界面至关重要。WPF(Windows Presentation Foundation)作为.NET框架的一部分,提供了丰富的布局控件和机制,便于创建可自动调整的UI。本文介绍WPF布局的基础概念与实现方法,包括`StackPanel`、`DockPanel`、`Grid`等控件的使用,并通过示例代码展示如何构建响应式布局。了解这些技巧有助于开发者优化用户体验,适应不同设备和屏幕尺寸。
123 0
WPF-布局样式练习-Day02-聊天气泡
WPF-布局样式练习-Day02-聊天气泡
262 1
|
7月前
|
前端开发 C# 索引
浅谈WPF之UI布局
一个成功的软件,离不开人性化的UI设计,如何抓住用户第一视觉,让用户产生依赖感,合适优雅的布局必不可少。本文以一些简单的小例子,简述WPF中布局 面板 控件的使用,仅供学习分享使用,如有不足之处,还请指正。
106 1
|
前端开发 C# 容器
WPF技术之控件布局
WPF提供了多种布局控件和技术,可以帮助开发人员轻松创建灵活的用户界面。
182 0
WPF技术之控件布局
WPF-布局样式练习-Day01
WPF-布局样式练习-Day01
135 0
|
C#
[WPF] VisualBrush 中的布局
原文:[WPF] VisualBrush 中的布局 今天插一篇随笔。说一说上周五遇到的一个布局问题,问题大概是这样的:需要在一个快区域上添加一张透明的背景图片,由于区域较大、并且宽高都不是固定大小,图片较小 所以图片需要居中显示。
971 0
|
C# .NET 开发框架
WPF笔记 ( xmlns引用,Resource、Binding 前/后台加载,重新绑定) 2013.6.7更新
原文:WPF笔记 ( xmlns引用,Resource、Binding 前/后台加载,重新绑定) 2013.6.7更新 1、xmlns Mapping URI的格式是 clr-namespace:[;assembly=] (1)如果自定义类和XAML处在同一个Assembly之中,只还需要提供clr-namespace值。
1454 0
|
前端开发 C#
WPF编游戏系列 之一 布局设计
原文:WPF编游戏系列 之一 布局设计        本系列主要使用WPF和C#编写一个简单的小游戏(暂命名XMarket),意在通过该实例进一步学习和体验WPF,也欢迎广大同仁拍砖交流。言归正传,在编写一个软件前首先要思考软件的结构与布局,图片放在哪,按钮放在哪,都要先设计一下。
654 0