MyException - 我的异常网
当前位置:我的异常网» Windows » Windows phone8 基础篇(3)常用布局(一)

Windows phone8 基础篇(3)常用布局(一)

www.myexceptions.net  网友分享于:2013-04-10  浏览:7次
Windows phone8 基础篇(三)常用布局(一)

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

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

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

绝对布局(Canvas容器):按照绝对坐标来布局程序的UI界面;

堆放布局(StackPanel容器):按照垂直或者水平的方式布局文件;

枢轴视图布局(pivot控件):通过类似页面标签方式在一个页面展示多个视图;

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

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

5.1 网络布局(Grid容器)

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

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

Grid属性

1.RowDefinitionsColumnDefinitions

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

2. Grid.Row Grid.Column

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

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

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

4. VerticalAlignmenthorizontalAlignment

根据这个属性来设置行和列的位置,自动根据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. 实例代码:VerticalAlignmenthorizontalAlignment

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

            }

        }

    }

}

文章评论

软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有