WP8开发学习 - 网格布局Grid

 grid 控件介绍

Grid 控件是最灵活的布局面板，支持以多行和多列布局排列控件。您可以使用在 Grid 控件中立即声明的 RowDefinitions 和 ColumnDefinitions 属性指定 Grid 的行和列定义。可以通过使用 Column 和Row 附加属性，在 Grid 的特定单元格中定位对象。您可以使用自动或星号调整大小分配列或行内的空间。本快速入门前面已解释了自动和星号调整大小。使用 RowSpan 和 ColumnSpan 附加属性可以使内容跨多个行和列。

Grid 的子元素按其在标记或代码中出现的顺序绘制。因而，当各元素共享相同的坐标时，便可以获得分层的顺序（也称为 z 顺序）。

以下 XAML 演示如何创建三行两列的 Grid。第一行和第三行的高度刚好可以包含文本。第二行的高度填充剩余的可用高度。在可用容器宽度内平均分配各列的宽度。

<Grid ShowGridLines="True" Margin="12,0,12,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition />
        <RowDefinition Height="auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <TextBox Text="1st row 1st column" TextWrapping="Wrap" Grid.Column="0" Grid.Row="0" />
    <TextBox Text="3rd row 1st column" TextWrapping="Wrap" Grid.Column="0" Grid.Row="2" />
    <Button Content="1st row 2nd column" FontSize="17" Grid.Column="1" Grid.Row="0" />
    <Button Content="3rd row 2nd column" FontSize="17" Grid.Column="1" Grid.Row="2" />
</Grid>

 

将生成与下图所描述的类似的输出

 

Grid布局练习计算器Demo

布局文件MainPage.xaml

<phone:PhoneApplicationPage
    x:Class="PhoneApp2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="false">
    <phone:PhoneApplicationPage.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="Black" Offset="0"/>
            <GradientStop Color="#FFA82828" Offset="1"/>
        </LinearGradientBrush>
    </phone:PhoneApplicationPage.Background>

    <!--LayoutRoot 是包含所有页面内容的根网格-->
    <Grid x:Name="LayoutRoot" Background="#FF302F42">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel 包含应用程序的名称和页标题-->
        <StackPanel Grid.Row="0" Margin="9,0,0,0" Height="117">
            <TextBlock Text="计算器" FontFamily="楷体" Margin="22,17,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - 在此处放置其他内容-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,22,0,33">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <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>

            <TextBlock Name="OperatorTxt" FontSize="50" Grid.Row="0" Grid.ColumnSpan="5" Margin="0,0,10,0" HorizontalAlignment="Right" VerticalAlignment="Top"></TextBlock>
            <Border BorderBrush="Blue" Grid.Row="1" Grid.ColumnSpan="5">
                <TextBlock Name="calcResult"  FontSize="100"  HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,10,0">0</TextBlock>
            </Border>
            <Button Name="B7" Tag="N" FontSize="40" Click="B_Click" Grid.Row="2" Grid.Column="0" Content="7"></Button>
            <Button Name="B8" Tag="N" FontSize="40" Click="B_Click" Grid.Row="2" Grid.Column="1" Content="8"></Button>
            <Button Name="B9" Tag="N"  FontSize="40" Click="B_Click" Grid.Row="2" Grid.Column="2" Content="9"></Button>

            <Button Name="B4" Tag="N" FontSize="40" Click="B_Click" Grid.Row="3" Grid.Column="0" Content="4"></Button>
            <Button Name="B5" Tag="N" FontSize="40" Click="B_Click" Grid.Row="3" Grid.Column="1" Content="5"></Button>
            <Button Name="B6" Tag="N" FontSize="40" Click="B_Click" Grid.Row="3" Grid.Column="2" Content="6"></Button>

            <Button Name="B1" Tag="N" FontSize="40" Click="B_Click" Grid.Row="4" Grid.Column="0" Content="1"></Button>
            <Button Name="B2" Tag="N" FontSize="40" Click="B_Click" Grid.Row="4" Grid.Column="1" Content="2"></Button>
            <Button Name="B3" Tag="N" FontSize="40" Click="B_Click" Grid.Row="4" Grid.Column="2" Content="3"></Button>
            <Button Name="BResult" FontSize="40" Click="B_Click" Grid.Row="4" Grid.Column="4" Grid.RowSpan="2" Content="="></Button>

            <Button Name="B0" Tag="N" FontSize="40" Click="B_Click" Grid.Row="5" Grid.ColumnSpan="2" Grid.Column="0" Content="0"></Button>
            <Button Name="BPoint" Tag="N" FontSize="40" Click="B_Click" Grid.Row="5" Grid.Column="2" Content="."></Button>

            <Button Name="BPlus" Tag="OP" FontSize="40" Click="B_Click" Grid.Row="2" Grid.Column="3" FontWeight="Bold" Content="+"></Button>
            <Button Name="BMinus" Tag="OP" FontSize="40" Click="B_Click" Grid.Row="3" Grid.Column="3" FontWeight="Bold" Content="-"></Button>
            <Button Name="BMulti" Tag="OP" FontSize="40" Click="B_Click" Grid.Row="4" Grid.Column="3" FontWeight="Bold" Content="*"></Button>
            <Button Name="BDivision" Tag="OP" FontSize="40" Click="B_Click" Grid.Row="5" Grid.Column="3" FontWeight="Bold" Content="/"></Button>

            <Button Name="BBack" Tag="BC" FontSize="40" Click="B_Click" Grid.Row="2" Grid.Column="4" FontWeight="Bold" Content="←" Foreground="#FFDCC5C5"></Button>
            <Button Name="BClear" Tag="BC" FontSize="40" Click="B_Click" Grid.Row="3" Grid.Column="4" Content="C"></Button>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

 

后台文件MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using PhoneApp2.Resources;

namespace PhoneApp2
{
    public partial class MainPage : PhoneApplicationPage
    {
        //保存上一个数值
        private string preNum="";
        string op = "";
        bool isResult = false;
        bool isOp = false;
        string zeroInfo = "";

        // 构造函数
        public MainPage()
        {
            InitializeComponent();

            // 用于本地化 ApplicationBar 的示例代码
            //BuildLocalizedApplicationBar();
        }

        private void B_Click(object sender, RoutedEventArgs e)
        {

            string tag = "";
            if (((Button)sender).Tag!=null){
                tag = ((Button)sender).Tag.ToString();
            }

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

            if (zeroInfo != "")
            {
                calcResult.FontSize = 40;
                if (txt != "C") return;
                zeroInfo = "";
            }
            else
            {
                calcResult.FontSize = 100;
            }
            //jisuan
            Calc(tag, txt);
        }

        private void Calc(string tag, string txt)
        {
            //点击数字
            if (tag == "N")
            {

                if (txt!=".")
                {
                    if (isResult) calcResult.Text = "0";
                    if ((calcResult.Text == "0") || (isOp)) calcResult.Text = "";

                    calcResult.Text = calcResult.Text + txt;
                }
                else
                {
                    if (calcResult.Text.IndexOf(".") < 0 )
                       calcResult.Text = calcResult.Text + txt;
                }
                isOp = false;
            }
            else if (tag == "OP")
            {
                preNum = calcResult.Text;
                OperatorTxt.Text = calcResult.Text + " " + txt ;
                op = txt;
                isOp = true;
            }
            else if (tag == "BC")
            {
                if (txt == "C")
                {
                    OperatorTxt.Text = "";
                    calcResult.Text = "0";
                    op = "";
                    preNum = "";
                    isOp = false;
                    isResult = false;
                }
                else
                {
                    if (!isResult) { 
                        if (calcResult.Text.Length == 1) {
                            calcResult.Text = "0";
                        }
                        else
                        {
                            calcResult.Text = calcResult.Text.Substring(0, calcResult.Text.Length - 1);
                        }
                    }
                }
            }
            else
            {
                Operator();
            }
        }

        //jisuan
        private void Operator()
        {
            if (calcResult.Text != "0")
            {
                if (calcResult.Text.Substring(calcResult.Text.Length - 1, calcResult.Text.Length) == ".")
                {
                    calcResult.Text = calcResult.Text.Substring(0, calcResult.Text.Length);
                }
            }
            double pNum = 0;
            if (!string.IsNullOrEmpty(preNum)) {
                pNum = double.Parse(preNum);
            }
             
            double cResult = double.Parse(calcResult.Text);
            double res = 0;

            if (op == "+")
            {
                res = pNum + cResult; 
            }
            else if (op == "-")
            {
                res = pNum - cResult; 
            }
            else if (op == "*")
            {
                res = pNum * cResult; 
            }
            else if (op == "/")
            {
                if (cResult != 0)
                {
                    res = pNum / cResult;
                }
                else
                {
                    zeroInfo = "除数不能为零";
                }
            }

            if (string.IsNullOrEmpty(zeroInfo))
            {
                calcResult.Text = Convert.ToString(res);
            }
            else
            {
                calcResult.Text = zeroInfo;
                calcResult.FontSize = 40;
            }
            OperatorTxt.Text = "";
            isResult = true;
            //preNum = "";
            isOp = false;
        }

         //用于生成本地化 ApplicationBar 的示例代码
        //private void BuildLocalizedApplicationBar()
        //{
        //    // 将页面的 ApplicationBar 设置为 ApplicationBar 的新实例。
        //    ApplicationBar = new ApplicationBar();

        //    // 创建新按钮并将文本值设置为 AppResources 中的本地化字符串。
        //    ApplicationBarIconButton appBarButton = new ApplicationBarIconButton(new Uri("/Assets/AppBar/appbar.add.rest.png", UriKind.Relative));
        //    appBarButton.Text = AppResources.AppBarButtonText;
        //    ApplicationBar.Buttons.Add(appBarButton);

        //    // 使用 AppResources 中的本地化字符串创建新菜单项。
        //    ApplicationBarMenuItem appBarMenuItem = new ApplicationBarMenuItem(AppResources.AppBarMenuItemText);
        //    ApplicationBar.MenuItems.Add(appBarMenuItem);
        //}
    }
}

 

附件源码下载

SmallCall.rar