Windows phone8 基础篇（三）常用布局（一）

广告：我开设了一个群300143953。刚建的群，所以还没人。希望有兴趣的可以来一起努力。

布局管理是从一个整体的角度去把握手机应用的界面设计，一个良好的UI界面，会使用户得到非凡的体验。在一个手机应用程序的界面布局中，主要有Grid，Canvas，StackPanel，并且他的根节点必须是一个容器，然后在容器中才能摆放。我测试了一下，如果把那些容器都给删掉，那么最终只能显示一个控件，其他下层控件都被覆盖。那么在windows phone中常见的布局有哪些呢？

网络布局（Grid容器）：按照行列方式布局程序的UI，定义一个区域，再次区域内，用户可以使用相对于Canvas区域的坐标显示子元素；

绝对布局（Canvas容器）：按照绝对坐标来布局程序的UI界面；

堆放布局（StackPanel容器）：按照垂直或者水平的方式布局文件；

枢轴视图布局（pivot控件）：通过类似页面标签方式在一个页面展示多个视图；

全景视图布局（panorama控件）:通过左右滑动的方式在一个页面显示多个视图。

用户可以根据自己应用的实际情况来选择布局的容器。也可以使用组合模式。

5.1 网络布局（Grid容器）

网络布局是一个类似于网页中的table标签，它定义了一个表格，然后设置表格里边的行列，在HTML中时根据tr和td来表示列和行。而Grid通过Grid.Row，Grid.Column，Grid.RowSpan,Grid.ColumnSpan来决定列和行的大小位置.

在silverlight的Grid进行布局的时候，需要先指定Grid的行和列，它是先指定后使用。

Grid属性

1.RowDefinitions和ColumnDefinitions

这两个属性是用来指定Grid控件的行数和列数，内部嵌套几个Definition，这就代表这个Grid有几行几列。

2. Grid.Row 和Grid.Column

当使用其他控件内置与Grid中时，需要使用Grid.Row和Grid.Column来指定它所在的行和列。

3. Height = “Auto”和Width= “Auto”

这个auto表示的是高度和宽度的自适应，这种情况下，他会根据内部的内容改变而改变，当然也可以设置成绝对的宽高。他的单位是px，像素。

4. VerticalAlignment和horizontalAlignment

根据这个属性来设置行和列的位置，自动根据Grid容器的大小来自动调整行和列的大小使得整个行和列都铺满了Grid的所有空间。

示例代码

1.使用Grid布局，两行三列：

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

2. 实例代码：VerticalAlignment和horizontalAlignment

</Grid>

3.简单计算器的实现

Main.xaml文件：

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</Grid>

.cs文件

using System;

using System.Windows;

using System.Windows.Controls;

using Microsoft.Phone.Controls;

namespace Calculator

{

public partial class MainPage : PhoneApplicationPage

{

//之前一次你按下的运算符

private string Operation="";

//结果

private int num1 = 0;

public MainPage()

{

InitializeComponent();

}

//数字按键的事件

private void DigitBtn_Click(object sender, RoutedEventArgs e)

{

//如果之前的操作时按下了等于符号，则清除之前的操作数据

if (Operation == "=")

{

OperationResult.Text = "";

InputInformation.Text = "";

Operation = "";

num1 = 0;

}

//获取你按下的按钮的文本内容，即你按下的数字

string s = ((Button)sender).Content.ToString();

OperationResult.Text = OperationResult.Text + s;

InputInformation.Text = InputInformation.Text + s;

}

//加减乘除按键的事件

private void OperationBtn_Click(object sender, RoutedEventArgs e)

{

if (Operation == "=")

{

InputInformation.Text = OperationResult.Text;

Operation = "";

}

string s = ((Button)sender).Content.ToString();

//公式显示

InputInformation.Text = InputInformation.Text + s;

//运算

OperationNum(s);

//情况你之前输入的数字

OperationResult.Text = "";

}

//按下等于运算符的事件

private void Result_Click(object sender, RoutedEventArgs e)

{

OperationNum("=");

//显示结果

OperationResult.Text = num1.ToString();

}

//删除之前的所有输入

private void Del_Click(object sender, RoutedEventArgs e)

{

OperationResult.Text ="";

InputInformation.Text = "";

Operation = "";

num1 = 0;

}

//通过运算符进行计算

private void OperationNum(string s)

{

//输入的数字不为空，则进行运算，否则只是保存你最后一次按下的运算符

if (OperationResult.Text != "")

{

switch (Operation)

{

case "":

num1 = Int32.Parse(OperationResult.Text);

Operation = s;

break;

case "+":

num1 = num1 + Int32.Parse(OperationResult.Text);

Operation = s;

break;

case "-":

num1 = num1 - Int32.Parse(OperationResult.Text);

Operation = s;

break;

case "*":

num1 = num1 * Int32.Parse(OperationResult.Text);

Operation = s;

break;

case "/":

if (Int32.Parse(OperationResult.Text) != 0)

num1 = num1 / Int32.Parse(OperationResult.Text);

else num1 = 0;

Operation = s;

break;

default: break;

}

else

{

Operation = s;

}

posted @ 2013-04-02 13:25 xinyuyuanm 阅读(238) 评论(0) 编辑收藏举报

刷新页面返回顶部

xinyuyuanm

Windows phone8 基础篇（三）常用布局（一）

5.1 网络布局（Grid容器）

公告