在WindowsPhone开发中,主要有三种布局方式,Canvas、Grid和StackPanel。
Canvas是以坐标的方式定位子元素,相当于Android中的AbsoluteLayout方式。Canvas当中也可以包含子Canvas。
Grid是以表格的方式定位子元素。可以定义行和列,然后将元素布局到表格当中。类似于Html中的Table元素。
StackPanel是以水平或者竖直方向对子元素进行排列。相当于Android中的LinearLayout,或者是JavaGUI中的FlowLayout。
个人认为,为了兼容多种屏幕,最好尽量多使用Grid和StackPanel布局方式。以下以一个常见的登陆窗口的例子来说明如果使用Grid和StackPanel布局。这里为了说明方便,使用了Grid和StackPanel两种方式。(用其中任何一种布局方式,都可以达到设计目的的。)
phone:PhoneApplicationPage
x:Class="PhoneApp1.Login"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
shell:SystemTray.IsVisible="True">
<StackPanel x:Name="LoginPanel">
<TextBlock x:Name="PageTitle" Text="Login" Style="{StaticResource PhoneTextTitle1Style}" HorizontalAlignment="Center" Margin="0,30,0,0" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<TextBlock Text="UserName:" Style="{StaticResource PhoneTextLargeStyle}" HorizontalAlignment="Center" />
</Grid>
<Grid Grid.Column="1">
<TextBox x:Name="name" HorizontalAlignment="Stretch" />
</Grid>
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<TextBlock Text="Password:" Style="{StaticResource PhoneTextLargeStyle}" HorizontalAlignment="Center" />
</Grid>
<Grid Grid.Column="1">
<TextBox x:Name="pass" HorizontalAlignment="Stretch" />
</Grid>
</Grid>
<Button x:Name="login" Content="Login" HorizontalAlignment="Center" Margin="0,30,0,0" Padding="30,3,30,5" Click="login_Click" />
</StackPanel>
</phone:PhoneApplicationPage>
这里先定义了一个StackPanel,而且使用默认的Orientation,从上到下依次放入了文本显示控件、Grid、Grid和按钮控件。文本显示控件显示“Login”。第一个Grid设置了两列,第一列是文本控件,显示“UserName”,第二列是一个文本输入控件。第二个Grid和第一个Grid结构相同,用来输入密码。按钮控件显示“Login”,点击后触发“login_Click”事件。
整个UI虽然简单,但是基本说明了Grid和StackPanel布局的使用。
附界面图如下所示:
---------------------------------------------------------------------------
GL(arui319)
http://blog.csdn.net/arui319
<本文可以转载,但是请保留以上作者信息。谢谢。>
---------------------------------------------------------------------------
分享到:
相关推荐
StackPanel、WrapPanel、DockPanel布局StackPanel、WrapPanel、DockPanel布局
(8):在Windows Phone显示GIF图片 (9):自定义Windows Phone 页面切换动画 (10):Windows Phone 中处理图片的技巧 (11):让StackPanel中的控件靠右对齐 (12):让你的Windows Phone应用变得更Metro ...
WPF 基础视频教程(共50集)---5.使用StackPanel面板进行简单布局
一、StackPanel StackPanel是以堆叠的方式显示其中的控件 1、可以使用Orientation属性更改堆叠的顺序 ........ 更多WPF资源:http://cleopard.download.csdn.net/
WPF中布局控件的用法,包括GRID ,STACKPANEL,WRAP. CANVAS ,WRAP控件的使用
wpf中动态创建按钮并添加到stackpanel中,当按钮数量比较多使用ScrollViewer滚动条
一、StackPanel StackPanel是以堆叠的方式显示其中的控件 1、可以使用Orientation属性更改堆叠的顺序
内置WPF Grid和StackPanel的神奇替代品。 注意:我正在将该项目从SpicyTaco.AutoGrid重命名为SpicyTaco.WpfToolkit。 这是因为我计划向此程序包添加除AutoGrid之外的更多有用功能。 安装 要将SpicyTaco.WpfToolkit...
GridDemo 使用Grid进行布局。 InkCanvasDemo 使用InkCanvas的示例。 SimpleDiagDox 简单对话框示例程序。 SimpleStackPanelDemo 使用StackPanel进行布局。 WrapPanelDemo 使用WrapPanelDemo...
在WPF中子元素的绝对定位的布局控件 其子元素使用Width、Height定义元素的宽度和高度 使用Convas.Left(Convas.Right)、Convas.Top(Convas.Bottom)定义与Convas容器的相对位置..... (更多资源:...
自定义实现基于动画的StackPanel,https://www.cnblogs.com/yk250/p/10043694.html
wpf listbox animation 添加数据 添加行 动画
等距控件就是在指定的宽度下,平均把控件放在水平的地方,这样相等于 StackPanel 的水平,但是没有做水平压缩。在这个控件,无论在水平放多少个控件,都会在相同的高度把他们放下。如果里面的控件的宽度不相同,那么...
详细介绍WPFGrid StackPanel WrapPanel DockPanel UniformGrid 5种布局的使用
WPF揭秘(中文版)第六章 使用面板布局.pdf 本章内容: Canvas StackPanel WrapPanel DockPanel Grid 原始面板 处理内容溢出 把他们拼合:创建一个类似Visual Studio的可收缩、可停靠、可改变尺寸的窗格
C# WPF中常用的几种布局容器 StackPanel 、Border 、Wrap Panel 、DockPanel
3.2 使用StaCkPanel面板进行简单布局 3.2.1 布局属性 3.2.2 对齐方式 3.2.3 边距 3.2.4 最小尺寸、最大尺寸以及显式地设置尺寸 3.2.5 Border控件 3.3 wrapPanel面板和DockPanel面板 3.3.1 wrapPanel...
3.2 使用StaCkPanel面板进行简单布局 3.2.1 布局属性 3.2.2 对齐方式 3.2.3 边距 3.2.4 最小尺寸、最大尺寸以及显式地设置尺寸 3.2.5 Border控件 3.3 wrapPanel面板和DockPanel面板 3.3.1 wrapPanel...