頻道欄目
首頁 > 資訊 > Windows Phone > 正文

Windows App開發之應用布局與基本導航

15-07-17        來源:[db:作者]  
收藏   我要投稿

簡單示例看頁面布局和導航

首先按照上一篇博客中的順序來新建一個項目。新建好之后就點開MainPage.xaml開始敲代碼了。


        
            
            
            
        
        
            
            
        

        
            
            
        

        
            

下面就來依次介紹上面這段代碼到底做了寫什么。

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就可以了。

   

我再來簡單介紹一下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的示例:


  
     
       
          
          
       
       

但是大家應該都發現了,默認情況下應用欄是隱藏起來的,如果想要在加載的時候就是啟動的,那該怎么辦呢?很簡單,直接在AppBar定義IsOpen屬性為真就好。


    

另外還有粘滯屬性喲。也就是說,原本當用右鍵呼出應用欄后,再用左鍵等點一下其他位置應用欄就會自己消失啦,但如果IsSticky屬性為真的話呢,非得再多按幾下右鍵才會消失的。


    

除了在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上的一樣。

    
        
            
            
        
    

想要了解更多關于應用欄的內容,大家可以參考下一篇中的應用欄。

常用屬性

Background:背景色
BorderBrush:邊框色
BorderThickness:邊框大小

  

這里寫圖片描述

ClickMode:點擊模式,具體有3種:懸停(Hover)、按壓(Press)、釋放(Release)

Content:內容
FontFamily:字體
FontSize:字體大小
Foreground:字體顏色
FontStretch:字體在屏幕上的展開程度

 

相關TAG標簽
上一篇:臺積電:絕大多數7nm客戶都會轉向6nm_IT新聞_博客園
下一篇:最后一頁
相關文章
圖文推薦

關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

美女MM131爽爽爽毛片