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 x:Name="ContentPanel" ShowGridLines="True">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<TextBlock Text="第一行第一列" Grid.Row="0" Grid.Column="0"/>

<TextBlock Text="第一行第二列" Grid.Row="0" Grid.Column="1"/>

<TextBlock Text="第一行第三列" Grid.Row="0" Grid.Column="2"/>

<TextBlock Text="第二行第一列" Grid.Row="1" Grid.Column="0"/>

<TextBlock Text="第二行第二列" Grid.Row="1" Grid.Column="1"/>

<TextBlock Text="第二行第三列" Grid.Row="1" Grid.Column="2"/>

</Grid>

2. 实例代码：VerticalAlignment和horizontalAlignment

<Grid x:Name="ContentPanel" ShowGridLines="True" Grid.RowSpan="2">

<TextBlock Text="左上方" VerticalAlignment="Top" HorizontalAlignment="Left"/>

<TextBlock Text="中上方" VerticalAlignment="Top" HorizontalAlignment="Center"/>

<TextBlock Text="右上方" VerticalAlignment="Top" HorizontalAlignment="Right"/>

<TextBlock Text="左中间" VerticalAlignment="Center" HorizontalAlignment="Left"/>

<TextBlock Text="中间" VerticalAlignment="Center" HorizontalAlignment="Center"/>

<TextBlock Text="右中间" VerticalAlignment="Center" HorizontalAlignment="Right"/>

<TextBlock Text="左下方" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>

<TextBlock Text="中下方" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>

<TextBlock Text="右下方" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>

</Grid>

3.简单计算器的实现

Main.xaml文件：

<Grid Name="MyGrid" Height="704" Width="440">

<Grid.ColumnDefinitions>

<ColumnDefinition />

<ColumnDefinition />

<ColumnDefinition />

<ColumnDefinition />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="63*" />

<RowDefinition Height="170*" />

<RowDefinition Height="119*" />

<RowDefinition Height="117*" />

<RowDefinition Height="119*" />

<RowDefinition Height="117*" />

</Grid.RowDefinitions>

<!--数字按键的布局-->

<Button Name="B7" Click="DigitBtn_Click" Grid.Column="0" Grid.Row="2" Content="7" />

<Button Name="B8" Click="DigitBtn_Click" Grid.Column="1" Grid.Row="2" Content="8" />

<Button Name="B9" Click="DigitBtn_Click" Grid.Column="2" Grid.Row="2" Content="9" />

<Button Name="B4" Click="DigitBtn_Click" Grid.Column="0" Grid.Row="3" Content="4" />

<Button Name="B5" Click="DigitBtn_Click" Grid.Column="1" Grid.Row="3" Content="5" />

<Button Name="B6" Click="DigitBtn_Click" Grid.Column="2" Grid.Row="3" Content="6" />

<Button Name="B1" Click="DigitBtn_Click" Grid.Column="0" Grid.Row="4" Content="1" />

<Button Name="B2" Click="DigitBtn_Click" Grid.Column="1" Grid.Row="4" Content="2" />

<Button Name="B3" Click="DigitBtn_Click" Grid.Column="2" Grid.Row="4" Content="3" />

<Button Name="B0" Click="DigitBtn_Click" Grid.Column="0" Grid.Row="5" Content="0" />

<!--加减乘除操作按键的布局-->

<Button Name="Plus" Click="OperationBtn_Click" Grid.Column="3" Grid.Row="2" Content="+" />

<Button Name="Minus" Click="OperationBtn_Click" Grid.Column="3" Grid.Row="3" Content="-" />

<Button Name="Multiply" Click="OperationBtn_Click" Grid.Column="3" Grid.Row="4" Content="*" />

<Button Name="Divide" Click="OperationBtn_Click" Grid.Column="3" Grid.Row="5" Content="/" />

<!--等于和删除按键的布局-->

<Button Name="Del" Grid.Column="2" Grid.Row="5" Content="删除" Click="Del_Click" />

<Button Name="Result" Grid.Column="1" Grid.Row="5" Content="=" Click="Result_Click" />

<!--OperationResult显示输入的数字-->

<TextBlock Name="OperationResult" FontSize="120" Grid.Row="1" Margin="6,17,10,17" Grid.ColumnSpan="4" HorizontalAlignment="Right"></TextBlock>

<!--InputInformation显示输入的公式-->

<TextBlock Name="InputInformation" Grid.Row="0" Margin="6,12,10,11" Grid.ColumnSpan="4" HorizontalAlignment="Right"></TextBlock>

</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;

}

}

}

}