布局管理是从一个整体的角度去把握手机应用的界面设计,一个良好的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; } }
} } |