Windows Phone 7 使用Canvas Grid StackPanel进行布局管理

一、布局原理

　　首先，所有元素的最顶层必须是一个容器(通常如Grid，Canvas，StackPanel等)，然后在容器中摆放元素，容器中也可能包含容器。这里的容器就像行政长官一样，他们负责分配元素的空间。同样，首先顶层的容器一个一个的问自己的子元素：你想要多大的空间？如果子元素也是容器，它又继续向下递归，最后又顶层开始向上汇报。这就是所谓的测量。

　　测量完之后就是排列，这个时候每个容器知道自己每个子元素想要的空间大小，就按自己的实际情况进行分配。一致递归到最底层。

　　这里的容器也一样，容器拥有完全的分配权，不过这里容器不仅仅是分配空间，还决定元素的位置，因为空间总是跟位置相关的。也就是说，容器说想给你多大空间你就只有有那么大的空间可使用，容器想让你摆在什么位置，你就得乖乖呆着什么位置。

二、继承层次结构

System.Object
System.Windows.DependencyObject
System.Windows.UIElement
   System.Windows.FrameworkElement
    System.Windows.Controls.Panel
     System.Windows.Controls.Canvas
     System.Windows.Controls.Grid
     System.Windows.Controls.StackPanel
     System.Windows.Controls.VirtualizingPanel

三、Canvas Grid StackPanel 介绍

Canvas-画布 定义一个区域，在此区域内，您可以使用相对于 Canvas 区域的坐标显式定位子元素。

Canvas的规则是：我读取附加属性Canvas.Left,Canvas.Right,Canvas.Top,Canvas.Bottom，并以此来决定元素的位置。

可以嵌套 Canvas 对象。嵌套对象时，每个对象使用的坐标都是相对于直接包含它们的 Canvas 而言的。

每个子对象都必须是 UIElement。在 XAML 中，将子对象声明为对象元素，这些元素是 Canvas 对象元素的内部 XML。在代码中，可以通过获取由 Children 属性访问的集合来操作 Canvas 子对象的集合。

由于 Canvas 为 UIElement 类型，因此可以嵌套 Canvas 对象。

很多情况下，Canvas 仅仅用作其他对象的容器，而没有任何可见属性。如果满足以下任一条件，Canvas 即不可见：

Height 属性等于 0。

Width 属性等于 0。

Background 属性等于 nullNothingnullptrunitnull 引用（在 Visual Basic 中为 Nothing）。

Opacity 属性等于 0。

Visibility 属性等于 Visibility..::..Collapsed。

Canvas 的某个上级对象不可见。

Grid-表格 定义由行和列组成的灵活网格区域。

Grid的规则是：我把我这个空间分成一格一格的格子，看起来有些像Table，在我里面的元素我完全按照附加属性Grid.Row,Grid.Column，Grid.RowSpan,Grid.ColumnSpan来决定其大小和位置。

可以通过使用 Grid.Column 和 Grid.Row 附加属性，在 Grid 的特定单元格中定位对象。

列和行可以利用 Star 缩放来按比例分配剩余空间。当选择 Star 作为行或列的高度或宽度时，该行或列将得到一个剩余可用空间的加权比例分配。Star 大小调整是默认行为。

StackPanel-堆放容器 将子元素排列成一行（可沿水平或垂直方向）。

StackPanel的规则是：根据附加属性，我要么让元素横着排列，要么竖着排列。

StackPanel 为启用布局的 Panel 元素之一。在特定情形下，例如，要将一组对象排列在竖直或水平列表（例如，项的水平或竖直菜单）中，StackPanel 很有用。设置 Orientation 属性可确定列表的方向。Orientation 属性的默认值为 Vertical。

StackPanel 中内容的 HorizontalAlignment 和 VerticalAlignment 默认值均为 Stretch。

三、实例

Canvas

<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="ELLIPSE CHAIN" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="main page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="1 0 0 0">
<Canvas>
<Canvas.Resources>
<Style x:Key="ellipseStyle"
TargetType="Ellipse">
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="100" />
<Setter Property="Stroke" Value="{StaticResource PhoneAccentBrush}" />
<Setter Property="StrokeThickness" Value="10" />
</Style>
</Canvas.Resources>

Grid

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="SIMPLE GRID" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="main page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

</Grid>
</Grid>

StackPanel

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="STACKPANEL WITH FOUR ELEMENTS" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Name="stackPanel"
Orientation="Vertical">
<TextBlock Text="TextBlock aligned at right bottom"
HorizontalAlignment="Right"
VerticalAlignment="Bottom" />

注：SDKhome移动平台开发的交流平台 http://www.sdkhome.com

转载于:https://www.cnblogs.com/zihong87/archive/2011/10/11/2206955.html

Windows Phone 7 使用Canvas Grid StackPanel进行布局管理相关推荐

背水一战 Windows 10 (38) - 控件（布局类）: Panel, Canvas, RelativePanel, StackPanel, Grid
原文: 背水一战 Windows 10 (38) - 控件(布局类): Panel, Canvas, RelativePanel, StackPanel, Grid [源码下载] 背水一战 Windo ...
WPF中5种内建面板Canvas、StackPanel、WrapPanel、DockPanel、Grid分析
Canvas.StackPanel.WrapPanel.DockPanel和Grid是WPF中主要的5种内建面板,这些面板类都位于System.Windows.Controls命名空间下. 主要布局特 ...
WPF 布局 - Grid, StackPanel, DockPanel, WrapPanel
本文大纲 1.Grid 2.StackPanel 3.DockPanel 4.WrapPanel Grid 1.Row和Column 我们下面来介绍Grid的行的用法,及我们在UI设计过程中需要注意的 ...
C# Grid StackPanel DockPanel WrapPanel
WPF面板布局介绍Grid.StackPanel.DockPanel.WrapPanel 回顾上一篇,我们介绍了基本控件及控件的重要属性和用法,我们本篇详细介绍WPF中的几种布局容器及每种布局容器的 ...
python place布局_Python TKinter布局管理Place()Grid Pack详解
Tkinter是Python标准GUI工具包,有三种布局管理方式: pack grid place 这三种布局管理在同一个 master window 里是不可以混用的. 下面通过三示例,详解使用参数 ...
python图形界面化编程GUI（二）常用的组件(Text、Radiobutton、Checkbutton、Canvas)和布局管理器(gird、pack、place)
Text文本框 Text(多行文本框)的主要用于显示多行文本,还可以显示网页链接, 图片, HTML 页面, 甚至 CSS 样式表,添加组件等.主要用来显示信息,也常被当做简单的文本处理器.⽂本编 ...
[译] 你不需要基于 CSS Grid 的栅格布局系统
本文讲的是[译] 你不需要基于 CSS Grid 的栅格布局系统, 原文地址:You do not need a CSS Grid based Grid System 原文作者:Rachel Andr ...
[Tkinter 教程] 布局管理 (Pack Place Grid)
原系列地址: Python Tkinter 简介: 本文讲述如何使用 tkinter 的布局管理 (被称作 layout managers 或 geometry managers). tkinter ...
python布局管理_Python基础=== Tkinter Grid布局管理器详解
本文转自:https://www.cnblogs.com/ruo-li-suo-yi/p/7425307.html @ 箬笠蓑衣 Grid(网格)布局管理器会将控件放置到一个二维的表 ...

Windows Phone 7 使用Canvas Grid StackPanel进行布局管理

Windows Phone 7 使用Canvas Grid StackPanel进行布局管理相关推荐

最新文章

热门文章