广告：我开设了一个群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;
}
}
}
}
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
