课程频道导航
课程分类导航
当前位置：首页 > 操作系统 > Windows

Windows App开发之应用布局与基本导航

简单演示样例看页面布局和导航

首先依照上一篇博客中的顺序来新建一个项目。新建好之后就点开MainPage.xaml開始写程序了。

                <code><<span>Grid</span><span>Background</span>=<span>"{ThemeResource ApplicationPageBackgroundThemeBrush}"</span>>
        <<span>Grid</span>.RowDefinitions>
            <RowDefinition Height=<span>"100"</span>/>
            <RowDefinition Height=<span>"auto"</span>/>
            <RowDefinition Height=<span>"*"</span>/>
        </<span>Grid</span>.RowDefinitions>
        <<span>Grid</span>.ColumnDefinitions>
            <ColumnDefinition Width=<span>"4*"</span>/>
            <ColumnDefinition Width=<span>"6*"</span>/>
        </<span>Grid</span>.ColumnDefinitions>

        <StackPanel <span>Grid</span>.<span>Row</span>=<span>"0"</span><span>Grid</span>.ColumnSpan=<span>"2"</span> Orientation=<span>"Horizontal"</span>>
            <TextBlock <span>Text</span>=<span>"页面布局"</span> Foreground=<span>"Red"</span><span>FontSize</span>=<span>"40"</span> Margin=<span>"12"</span> 
                     Width=<span>"200"</span> Height=<span>"80"</span> />
            <TextBlock <span>Text</span>=<span>"基本导航"</span> Foreground=<span>"Green"</span><span>FontSize</span>=<span>"40"</span> Margin=<span>"12"</span> 
                       Width=<span>"200"</span> Height=<span>"80"</span>  />
        </StackPanel>

        <<span>Grid</span><span>Grid</span>.<span>Row</span>=<span>"1"</span><span>Grid</span>.<span>Column</span>=<span>"0"</span>>
            <<span>Button</span> Content=<span>"导航到第二页"</span> Foreground=<span>"Blue"</span><span>FontSize</span>=<span>"35"</span>
                   Margin=<span>"12,480,0,0"</span> Name=<span>"btnGoSecondPage"</span> Click=<span>"btnGoSecondPage_Click"</span>/>
        </<span>Grid</span>>

        <Canvas <span>Grid</span>.<span>Row</span>=<span>"1"</span><span>Grid</span>.<span>Column</span>=<span>"1"</span> HorizontalAlignment=<span>"Center"</span> VerticalAlignment=<span>"Center"</span>>
             <<span>Rectangle</span> Fill=<span>"Blue"</span>/>
             <<span>Rectangle</span> Fill=<span>"Yellow"</span> Height=<span>"100"</span> Width=<span>"100"</span> Canvas.<span>Left</span>=<span>"50"</span> Canvas.<span>Top</span>=<span>"20"</span>/>
             <<span>Rectangle</span> Fill=<span>"White"</span> Height=<span>"100"</span> Width=<span>"100"</span> Canvas.<span>Left</span>=<span>"70"</span> Canvas.<span>Top</span>=<span>"90"</span>/>
        </Canvas>

    </<span>Grid</span>></code>

以下就来依次介绍上面这段代码究竟做了写什么。

1）首先将最外围的Grid控件分成了3行2列。当中第一行的高度是100像素。第二行的高度是自己主动的。所谓自己主动呢，就是会依据将来在当中加入的控件的所占的高度来决定的；第三行的高度就是剩余的啦，这么说可能不够清楚究竟星号是什么意思。那再看看切成的这两列就好啦。它的宽度比就是4：6。

非常显然不一定是非得比例加起来等于10，即便是4：100也能够的。

2）在最外层的Grid内嵌套了一个StackPanel，而且将其定位在第一行，而且横跨2列。

Grid最擅长的就是操作详细的像素，它能够将不论什么控件精确的定位到不论什么一点。而StackPanel最重要的Orientation属性则能够安排其内的控件的排列方式，比方这里就是让两个TextBlock控件按水平方向来排列。

3）在这里又嵌套了Grid，里面有一个Button。Foreground属性是定义字体颜色。FontSize属性是定义字体大小。以下重点来看看Margin属性。

我们定义的Marin=”12,480,0,0”，从左至右依次是左、上、右和下四个方向距离外围边框的距离。

技术分享

在设计器中已经标注了左边距是12。而上边距没有体现出来。但确实是480。

还记得之前的那个auto么，在这里就体现出来了啦。由于下边距是0，所以Grid的切割线就刚好在Button以下啦。但为什么右边的切割线不刚好在Button的右边呢。这是由于我们之前的2列是依照4：6的比例来切的呀。而不是设置的auto。

4）Canvas位于其外围的Grid控件的正中央，HorizontalAligment和VerticalAlignment分别表示水平方向和垂直方向的摆放位置。Canvas.Top和Canvas.Left分别表示离Canvas最上边和最下边的距离。

技术分享

5）给Button设置一个名字。然后敲下Click=”“之后，就会出现例如以下图所看到的。这是直接按下Enter键就能够直接命名咯。

小技巧啦。

技术分享

然后双击Click事件的名字后，直接按F12键就会自己主动生成一个事件而且跳转到C#文件啦。以下这段代码就是会让页面从MainPage跳转到SecondPage。

                <code>
                    <span>private</span>
                    <span>void</span>
                    <span>btnGoSecondPage_Click</span>(<span>object</span> sender, RoutedEventArgs e)
{    
  <span>if</span> (<span>this</span>.Frame != <span>null</span>)
  {
     <span>this</span>.Frame.Navigate(<span>typeof</span>(SecondPage));
  }
}</code>

写完这段代码也先别急着调试，由于还没有创建SecondPage呢。建议创建好之后最好再往里面加点东西。不然跳转过去了就是黑茫茫的一片还以为是出Bug了呢，加入一个主要的TextBlock就能够了。

                <code>   <TextBlock <span>Text</span>=<span>"Second Page"</span><span>FontSize</span>=<span>" 50"</span>/></code>

我再来简介一下VS中经常使用的一些东西，仅仅面向刚開始学习的人。在以下的图中，方框1处能够让设计器和XAML代码的位置对换哦。截图里我就是将设计器放到了右边，只是仅仅是为了截图，设计器还是在左边比較习惯。

方框2处能够让设计器和XAML代码上下摆列和左右摆列也能够不显示它们中的某一个。

旁边还能够设置网格对齐以及设计器的缩放比例。

方框3和方框4中能够设置的东西就太多啦，能够设置渐变色。也能够设置Click事件。还能够设置控件的布局等。

技术分享

应用栏布局

Windows上的modern应用我倒是不经常使用。只是WP8上的应用我认为和安卓什么的最大的差别就是它的应用栏了，以下就来讲讲应用栏是怎么做出来的。

在Document Outline（在视图中找到。或者按Ctrl+W。U）中有TopAppBar和BottomAppBar，各自是顶部和底部的应用栏。点鼠标右键能够高速定义AppBar和CommandBar。通常将AppBar放在应用上端也就是TopAppBar内，CommandBar放在下端也就是BottomAppBar内。

技术分享

也许非常多人都不知道，在Modern应用下，按Win+Z键能够直接呼出应用栏哟。另外要注意AppBar与CommandBar不同，前者仅仅能包括一条子内容，通常定义一个Grid控件，然后在Grid内嵌套其它控件。以下贴出一段AppBar的演示样例：

                <code>
                    <span><<span>Page.TopAppBar</span>></span>
                    <span><<span>AppBar</span><span>IsSticky</span>=<span>"True"</span>></span>
                    <span><<span>Grid</span>></span>
                    <span><<span>Grid.ColumnDefinitions</span>></span>
                    <span><<span>ColumnDefinition</span>/></span>
                    <span><<span>ColumnDefinition</span>/></span>
                    <span></<span>Grid.ColumnDefinitions</span>></span>
                    <span><<span>StackPanel</span><span>Orientation</span>=<span>"Horizontal"</span>></span>
                    <span><<span>Button</span><span>Content</span>=<span>"Main Page"</span><span>Width</span>=<span>"140"</span><span>Height</span>=<span>"80"</span><span>Click</span>=<span>"AppBarButton1_Click"</span>/></span>
                    <span><<span>Button</span><span>Content</span>=<span>"Second Page"</span><span>Width</span>=<span>"140"</span><span>Height</span>=<span>"80"</span><span>Click</span>=<span>"AppBarButton2_Click"</span>/></span>
                    <span><<span>Button</span><span>Content</span>=<span>"Third Page"</span><span>Width</span>=<span>"140"</span><span>Height</span>=<span>"80"</span><span>Click</span>=<span>"AppBarButton3_Click"</span>/></span>
                    <span><<span>TextBlock</span><span>Text</span>=<span>"AppBar"</span><span>Foreground</span>=<span>"Red"</span><span>FontSize</span>=<span>"40"</span><span>VerticalAlignment</span>=<span>"Center"</span><span>Margin</span>=<span>"12"</span><span>Width</span>=<span>"200"</span>/></span>
                    <span></<span>StackPanel</span>></span>
                    <span><<span>SearchBox</span><span>Grid.Column</span>=<span>"1"</span><span>Width</span>=<span>"300"</span><span>Height</span>=<span>"50"</span><span>HorizontalAlignment</span>=<span>"Right"</span>/></span>
                    <span></<span>Grid</span>></span>
                    <span></<span>AppBar</span>></span>
                    <span></<span>Page.TopAppBar</span>></span>
                    <span><<span>Page.BottomAppBar</span>></span>
                    <span><<span>CommandBar</span>></span>
                    <span><<span>AppBarButton</span><span>Label</span>=<span>"Refresh"</span><span>Icon</span>=<span>"Refresh"</span><span>Click</span>=<span>"appBarBtn4_Click"</span>/></span>
                    <span><<span>AppBarButton</span><span>Label</span>=<span>"Redo"</span><span>Icon</span>=<span>"Redo"</span><span>Click</span>=<span>"appBarBtn5_Click"</span>/></span>
                    <span><<span>CommandBar.SecondaryCommands</span>></span>
                    <span><<span>AppBarButton</span><span>Label</span>=<span>"Add"</span><span>Icon</span>=<span>"Add"</span><span>Click</span>=<span>"AppBarButton6_Click"</span>/></span>
                    <span><<span>AppBarButton</span><span>Label</span>=<span>"Delete"</span><span>Icon</span>=<span>"Delete"</span><span>Click</span>=<span>"AppBarButton7_Click"</span>/></span>
                    <span><<span>AppBarButton</span><span>Label</span>=<span>"Edit"</span><span>Icon</span>=<span>"Edit"</span><span>Click</span>=<span>"AppBarButton8_Click"</span>/></span>
                    <span></<span>CommandBar.SecondaryCommands</span>></span>
                    <span></<span>CommandBar</span>></span>
                    <span></<span>Page.BottomAppBar</span>></span>
                </code>

可是大家应该都发现了。默认情况下应用栏是隐藏起来的，假设想要在载入的时候就是启动的，那该怎么办呢？非常easy。直接在AppBar定义IsOpen属性为真就好。

                <code>
                    <span><<span>CommandBar</span><span>IsOpen</span>=<span>"True"</span>></span>
                    <span><!-- --></span>
                    <span></<span>CommandBar</span>></span>
                </code>

另外还有粘滞属性哟。也就是说。原本当用右键呼出应用栏后，再用左键等点一下其它位置应用栏就会自己消失啦，但假设IsSticky属性为真的话呢，非得再多按几下右键才会消失的。

                <code>
                    <span><<span>AppBar</span><span>IsSticky</span>=<span>"True"</span>></span>
                    <span><!-- --></span>
                    <span></<span>AppBar</span>></span>
                </code>

除了在XAML中定义这些属性外，我们也能够在后台代码中用函数来实现呢，这里我就是用的2个Button的Click事件。

                <code>
                    <span>private</span>
                    <span>void</span>
                    <span>btnSetAppBar_Click</span>(<span>object</span> sender, RoutedEventArgs e)
{
   <span>if</span> (<span>this</span>.TopAppBar != <span>null</span>)
   {
       <span>this</span>.TopAppBar.IsSticky = <span>true</span>;
   }
}

<span>private</span><span>void</span><span>btnSetAppBar2_Click</span>(<span>object</span> sender, RoutedEventArgs e)
{
    <span>if</span> (BottomAppBar.IsOpen ==<span>false</span>)
    {
       <span>this</span>.BottomAppBar.IsOpen = <span>true</span>;
    }
}</code>

既然是通用应用了，那么WP这边自然也是相似的。只是临时还仅仅有BottomAppBar却没有TopAppBar呢，以下是系统给生成的代码，和Windows上的一样。

                <code>
                    <span><<span>Page.BottomAppBar</span>></span>
                    <span><<span>CommandBar</span>></span>
                    <span><<span>AppBarButton</span><span>Icon</span>=<span>"Accept"</span><span>Label</span>=<span>"appbarbutton"</span>/></span>
                    <span><<span>AppBarButton</span><span>Icon</span>=<span>"Cancel"</span><span>Label</span>=<span>"appbarbutton"</span>/></span>
                    <span></<span>CommandBar</span>></span>
                    <span></<span>Page.BottomAppBar</span>></span>
                </code>

想要了解很多其它关于应用栏的内容。大家能够參考下一篇中的应用栏。

经常使用属性

Background：背景色
BorderBrush：边框色
BorderThickness：边框大小

                <code>  <<span>Button</span><span>Background</span>=<span>"Red"</span> BorderBrush=<span>"Blue"</span> BorderThickness=<span>"5"</span> Height=<span>"66"</span> Width=<span>"153"</span>/>
</code>

技术分享

ClickMode：点击模式，详细有3种：悬停（Hover）、按压（Press）、释放（Release）

Content：内容
FontFamily：字体
FontSize：字体大小
Foreground：字体颜色
FontStretch：字体在屏幕上的展开程度

原文：http://www.cnblogs.com/mengfanrong/p/5369989.html
【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！

相关教程推荐

其他课程推荐