【UWP通用应用开发】应用布局、基本导航-阿里云开发者社区

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

首先按照上一篇博客中的顺序来新建一个项目。新建好之后就点开MainPage.xaml开始敲代码了。

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

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

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

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

    </Grid>

下面就来依次介绍上面这段代码到底做了写什么。

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。

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

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

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

我再来简单介绍一下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的示例：

<Page.TopAppBar>
  <AppBar IsSticky="True">
     <Grid>
       <Grid.ColumnDefinitions>
          <ColumnDefinition/>
          <ColumnDefinition/>
       </Grid.ColumnDefinitions>
       <StackPanel Orientation="Horizontal">
          <Button Content="Main Page" Width="140" Height="80" Click="AppBarButton1_Click"/>
          <Button Content="Second Page" Width="140" Height="80" Click="AppBarButton2_Click"/>
          <Button Content="Third Page" Width="140" Height="80" Click="AppBarButton3_Click"/>
          <TextBlock Text="AppBar" Foreground="Red" FontSize="40" VerticalAlignment="Center" Margin="12" Width="200"/>
       </StackPanel>                   
       <SearchBox Grid.Column="1" Width="300" Height="50" HorizontalAlignment="Right"/>
    </Grid>
  </AppBar>
</Page.TopAppBar>

<Page.BottomAppBar>
    <CommandBar>
       <AppBarButton Label="Refresh" Icon="Refresh"  
           Click="appBarBtn4_Click"/>
       <AppBarButton Label="Redo" Icon="Redo"
           Click="appBarBtn5_Click"/>        
       <CommandBar.SecondaryCommands>
          <AppBarButton Label="Add" Icon="Add" Click="AppBarButton6_Click"/>
          <AppBarButton Label="Delete" Icon="Delete" Click="AppBarButton7_Click"/>
          <AppBarButton Label="Edit" Icon="Edit" Click="AppBarButton8_Click"/>
       </CommandBar.SecondaryCommands>                                     
   </CommandBar>
</Page.BottomAppBar>

但是大家应该都发现了，默认情况下应用栏是隐藏起来的，如果想要在加载的时候就是启动的，那该怎么办呢？很简单，直接在AppBar定义IsOpen属性为真就好。

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

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

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

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

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

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

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

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

想要了解更多关于应用栏的内容，大家可以参考下一篇中的应用栏。

常用属性

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

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

这里写图片描述

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

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

和WPF等的页面导航对比

Frame、Page框架

Frame是能够定位到并显示内容的内容控件。Frame可以在其他内容中承载，与其他控件和组件。

当Frame控件导航到 HTML内容时，内部Frame控件实例化本机 webbrowserActivex控件。WPF通过对函数控件启用安全功能在浏览器 Activex控件。应用于的功能控制对 XBAP和独立应用程序不同。某些应用程序应通过附加功能控制防止恶意内容运行。有关更多信息，请参见中的 “浏览器控件和功能控制”在安全性（WPF）的和WebBrowserControl Overviews and Tutorials部分。

内容可以导航到通过设置与URI的Source属性所需内容的。另外，可以使用Navigate方法的一下重载之一，内容可以导航到：Navigate(Uri),Navigate(Uri,Object)

如果内容导航到由URI时，Frame返回包含内容的对象。或者，内容可以导航到使用接受一个对象的Navigate方法重载：Navigate(Object),Navigate(Object,Object)

导航的生存期可以通过以下活动来跟踪：Navigating,Navigated,NavigationProgress,NavigationFailed,NavigationStopped,LoadCompleted,FramentNavigation

不是导航发生的所有事件都引发；引发事件集的方式取决于发生的类型的导航（内容或内容片段），这个导航完成（取消，停止或失败）。

WPF、WP8 Silverlight 中的导航实现

1、在WPF中的导航：

window到window:
Window window1=new Window();
window1.Show();

window到page:
Navigation Windowwindow1=new NavigationWindow();
window1.Source=newUri(“Page1.xaml“，UriKind.Relative);
window1.Show();

page到page:
NavigationService.GetNavigationService(this).Navigate(newUri(“Page2.xaml”,UriKind.Relative));

2、在Silverlight（包括WP8开发的时候选择银光框架时）中的导航：
(sliver 的意思是切开，切片) (silver才是银色)

this.NavigationService.Navigate(newUri(“/Page1.xaml”,UriKind.Relative);

浅谈WPF、Silverlight和WinRT

在WPF(WPF4)中，导航主要是NavigationService类型，Frame，Page和NavigationWindow类型都有NavigationService属性，同时Frame类型还有一些方法比如Navigate就是直接调用其背后的NavigationService的相应方法。

Frame继承自ContentControl,Page继承自FrameworkElement。

Navigate方法可以传入Uri和Object参数，同时支持第二个Object代表额外数据。然后再Frame.Navigated事件中，通过NavigationEventArgs的ExtraData属性来获取额外的数据。但是WPF中的导航数据传递对于开发者来说很头疼。

在winRT中，没有了NavigationService。NavigationCacheMode等在Silverlight中都有的。同时Page还引入了一些新的元素，比如winRT中特有的AppBar。最后winRT中的Page同时引用Frame对象，这个可以说是NavigationService的代替吧，因为如果Page连Frame都不引用，那么Page本身便不具备任何主动导航功能了。

【UWP通用应用开发】应用布局、基本导航

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

应用栏布局

常用属性

和WPF等的页面导航对比

热门文章

最新文章

相关课程

相关电子书