文档章节

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

NoMasp
 NoMasp
发布于 2015/09/08 21:47
字数 1830
阅读 7
收藏 0

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

首先按照上一篇博客中的顺序来新建一个项目。新建好之后就点开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:字体在屏幕上的展开程度

版权声明:本文为 NoMasp柯于旺 原创文章,未经许可严禁转载!欢迎访问我的博客:http://blog.csdn.net/nomasp

本文转载自:http://blog.csdn.net/nomasp/article/details/46922109

NoMasp
粉丝 7
博文 334
码字总数 0
作品 0
镇江
程序员
私信 提问
Titanium 用户界面之布局结构及核心代码块

以Tab为界面基础的界面 以窗口为界面基础 目标 在本节,你将会看到Ti应用的核心代码块。 我们将会讨论Tab组件,windows窗口以及他们的核心功能 。 内容 如果用开发web的方式来比拟Ti里面的界...

lifer
2012/10/12
494
0
SNS平台--EasySNS

EasySNS 是由EasySNS Team基于Code Igniter开发的SNS平台,在09年4月以BSD协议发布开源版本. 该协议允许用户在保留版权的前提下任意修改,分发和用于商业. 功能简介 突破SNS界限,融合内容,社区...

匿名
2010/03/01
10K
0
UWP 入门教程2——如何实现自适应用户界面

系列文章 UWP入门教程1——UWP的前世今生 如上文所说的,布局面板根据可用的屏幕空间,指定界面元素的大小和位置。例如StackPanel 会水平或垂直排列界面元素。Grid 布局与CSS 中的表格控件类...

葡萄城控件技术团队
2015/12/25
140
0
近乎(spacebuilder)二次开发指南

更多二次开发文档:http://www.jinhusns.com/Developers 1 引言 1.1 目的 用于社会化开发平台的架构设计指导,阐述基础设施及关键技术构件、业务构件的设计思想及具体实现。 读者包括但不限于...

whp610
2013/08/29
44
0
近乎(Spacebuilder)二次开发指南

更多文档阅读请点击地址:http://www.jinhusns.com/Developers 1 引言 1.1 目的 用于社会化开发平台的架构设计指导,阐述基础设施及关键技术构件、业务构件的设计思想及具体实现。 读者包括但...

whp610
2013/08/28
35
0

没有更多内容

加载失败,请刷新页面

加载更多

How to find table in a database with HeidiSQL

In this article I want to show you how you can find table by name with HeidiSQL. Find table by typing One of the options to find table is to having focus in the object explorer ......

Ciet
23分钟前
5
0
基于SWIG跨平台开发的C++编码规范

1、数组定义 使用数组不建议采用指针方式eg double *,或者 double test[4] 直接采用std::vector或list即可。对于固定长度的数组定义为一个结构体 double test[4]instead ofstruct Vec...

洋碱
25分钟前
8
0
用Markdown编程之布局

基本就是用Markdown的布局方式。 \:是转义符号,最高优先级。 行首+# :用于空间布局,1-6分别标明:模式根、子模式、子模式内。 行首+> :用于标注和通信,1个标明标注,2个标明分类,3个标...

dwcz
32分钟前
7
0
SpringBoot定时器多线程解决方案

@Scheduled 作用:spring定时器(定时执行一次或定时轮询执行一段代码) 使用场景:注解在方法上 参数说明:常用参数 @Scheduled 参数说明 String cron:cron表达式定义了方法执行的时间规则(网...

whoisliang
32分钟前
8
0
3.01、Spring AOP的理解

注:转 https://mp.weixin.qq.com/s/PsgTLn8cdTxdd542XgVkUA 什么是AOP AOP(Aspect-Oriented Programming), 即 面向切面编程 , 它与 OOP( Object-Oriented Programming, 面向对象编程) 相辅相......

追忆2025
38分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部