6 乙個簡單可用的「漢堡包」應用

2022-02-02 05:39:17 字數 4303 閱讀 8500

首先看目標：

我們要做乙個類似上圖的應用，通過左側的「漢堡包」導航可以切換右邊的內容（只是而已），同時更新頂部的標題，以及當切換到food內容時出現返回按鈕，而頂部右邊的搜尋是沒有作用的。

1. 介面布局

首先可以看到，應用主要分為兩部分，分別是標題欄和內容欄，所以我們用 grid 作為主體，row 將他們分開：

<


grid.rowdefinitions


>


<


rowdefinition 


height


="auto"


/>


<


rowdefinition


/>


grid.rowdefinitions


>
頂部標題欄因為有控制項分別位於兩側，所以我們可以用到 relativepanel：

<


relativepanel 


grid.row


="0"


>


<


button 


name


="togglepanebutton"


fontfamily


="segoe mdl2 assets"


fontsize


="30"


content


=""


click


="togglepanebutton_click"


/>


<


button 


name


="backbutton"


relativepanel.rightof


="togglepanebutton"


fontfamily


="segoe mdl2 assets"


fontsize


="30"


visibility


="collapsed"


content


=""


click


="backbutton_click"


/>


<


textblock 


name


="titletextblock"


relativepanel.rightof


="backbutton"


fontsize


="30"


/>


<


button 


name


="searchbutton"


relativepanel.alignrightwithpanel


="true"


fontfamily


="segoe mdl2 assets"


fontsize


="30"


content


=""


/>


<


textbox 


name


="searchkeytextbox"


relativepanel.leftof


="searchbutton"


fontsize


="20"


height=""


width


="200"


placeholdertext


="search"


/>


relativepanel


>
這裡有三點值得注意，一是控制項使用了 relativepanel 的定位屬性，比如 alignrightwithpanel，rightof 等；二是 segoe mdl2 assets 字型的使用，可以通過系統自帶的「字元對映表」查詢使用；三是使用了資料繫結，如 searchkeytextbox 的 height 屬性我將它繫結成了 searchbutton 的 actualheight 上，這樣就能保證文字框的高度和右邊按鈕的高度一致了。

底部的「漢堡包」導航則使用了 splitview：

<


splitview 


name


="splitview"


grid.row


="1"


compactpanelength=""


displaymode


="compactoverlay"


>


<


splitview.pane


>


<


listbox 


name


="listbox"


selectionchanged


="listbox_selectionchanged"


>


<


listboxitem 


tag="financial"


isselected


="true"


>


<


stackpanel 


orientation


="horizontal"


>


<


textblock 


fontfamily


="segoe mdl2 assets"


fontsize


="30"


verticalalignment


="center"


text


=""


/>


<


textblock 


fontsize


="30"


margin


="10,0,0,0"


text


="financial"


/>


stackpanel


>


listboxitem


>


<


listboxitem 


tag="food"


>


<


stackpanel 


orientation


="horizontal"


>


<


textblock 


fontfamily


="segoe mdl2 assets"


fontsize


="30"


verticalalignment


="center"


text


=""


/>


<


textblock 


fontsize


="30"


margin


="10,0,0,0"


text


="food"


/>


stackpanel


>


listboxitem


>


listbox


>


splitview.pane


>


<


splitview.content


>


<


frame 


name


="contentframe"


/>


splitview.content


>


splitview


>
splitview.pane 是指左邊可彈出的視窗，splitview.content 則是右邊的主體內容。其中 compactpanelength 是指 pane 縮起來時的寬度，同樣的，這裡使用了資料繫結使得它和頂部的按鈕寬度一致；displaymode 是設定 pane 的展示形式，大家可以逐一試試。

2. 新增導航頁面

<


image 


source


="/assets/financial.png"


/>
3. 處理事件

當我們點選導航的 listbox 時，需要將右邊的 frame 導航至對應的頁面：

if (contentframe != null


) titletextblock.text =tag;


}
可看出，當我們點選不同 listboxitem 時，根據它的 tag 屬性進行判斷跳轉，同時更新返回按鈕的可見性和標題的內容。

返回返回按鈕的事件則是：

listbox.selectedindex = 0;
因為我們手動將 listbox 的選中項改為第乙個，所以會觸發 selectionchange 的事件。

uwp24

用漢堡包的方式評價一下自己的合作夥伴

用漢堡包的方式評價一下自己的合作夥伴 漢堡包是什麼呢，看了書上的解釋，具體有以下幾點 漢堡包一般是指合作中某一方的反饋方式，反饋方式可以分為三層 最外層 行為和後果 中間層 習慣和動機 最內層 本質和基本屬性 那麼怎樣反饋才是比較令人接受呢，下面是用做漢堡的方式來模擬反饋的方式，1.先來一片麵包,做...

乙個簡單可用的C 日誌類

少廢話，直接看東西。pragma once include define log buffer size 1024 class logwriter include logwriter.h include include include include logwriter logwriter cons...

python logging 的乙個簡單的包裝

logfile os.path.join log dir,logroot log hdlr logging.handlers.rotatingfilehandler logfile,maxbytes 10240000,backupcount 5 formatter logging.formatter...