Win10系列 UWP介面布局高階1

2021-09-07 10:12:07 字數 2196 閱讀 8097

全新的windows 10 作業系統支援多種檢視模式,使用者可以根據需要選擇不同的檢視模式顯示應用。當使用者同時瀏覽或操作多個應用程式時,可以將應用檢視調整為輔屏檢視或填充檢視,這樣在乙個螢幕中可以同時對兩個應用進行操作,並且兩個應用之間不會相互受到影響。除此之外當使用者在使用平板電腦閱讀電子書時,可以選擇使用全屏豎直檢視以獲得更加真實的閱讀體驗。在圖5-1中列出了windows 10系統中幾種常用的檢視模式。

(1)全屏水平檢視 (2)輔屏檢視

(3)填充檢視 (4)全屏豎直檢視

圖5-1 四種不同的檢視模式

其中,輔屏檢視和填充檢視對螢幕的解析度有一定的要求,輔屏檢視的水平寬度為320畫素,其餘的空間需要分配給拆分器(22畫素)和填充檢視,所以顯示屏的水平解析度應在1366畫素以上,這樣填充檢視才能具有至少1024畫素的水平解析度。當檢視模式發生變化時,需要重新調整應用介面中元素的布局,以確保使用者可以正常的瀏覽和操作應用介面。下面通過乙個示例來介紹如何判斷當前應用的檢視模式以及根據不同的檢視模式來調整應用介面的布局,在本示例中將為頁面新增兩個圖形,當檢視模式發生變化時調整圖形在頁面中的位置。

啟動visual studio 2012,新建乙個windows應用商店的空白應用程式專案並將其命名為viewmode。開啟mainpage.xaml檔案,在grid元素中新增rectangle(矩形)元素和ellipse(橢圓)元素,分別設定兩個元素的name屬性值為viewrectangle與viewellipse,通過height、width及margin屬性設定圖形大小並調整圖形到頁面的中間位置,完成後的**如下所示:

介面效果如圖5-2所示。

圖5-2 圖形效果

接下來編寫後台**實現當檢視發生改變時調整介面元素的位置,開啟mainpage.xaml.cs檔案,在mainpage構造方法中為sizechanged事件註冊事件處理方法,將其命名為mainpage_sizechanged,當檢視尺寸發生變化時會呼叫這個方法。mainpage構造方法**如下所示:

public mainpage()

下面定義mainpage_sizechanged方法,在方法中通過對當前檢視模式進行判斷,並根據不同的檢視模式重新調整圖形在頁面中的位置。mainpage_sizechanged方法**如下所示:

private void mainpage_sizechanged(object sender, sizechangedeventargs e)

//檢視模式為輔屏檢視

//檢視模式為填充檢視

//檢視模式為全屏豎直檢視

} 在模擬器中執行程式,並調整不同的檢視模式,可以看到介面中的圖形顯示方式會隨著檢視模式的改變而發生變化,顯示效果如圖5-3所示。

(1)全屏水平檢視 (2)輔屏檢視

(3)填充檢視 (4)全屏豎直檢視

圖5-3不同檢視模式下圖形的顯示效果

當檢視模式發生變化,尤其是當使用者選擇輔屏檢視或填充檢視時,應用介面中的原有內容可能無法完整的顯示出來,這時就需要暫時隱藏次要內容。如果無法保證應用程式在不同檢視模式下提供相同的功能與互動,可以為使用者提供乙個出口點,比如新增乙個按鈕,當使用者單擊按鈕時通過程式設計方式將應用調整至合適的檢視模式。另外,填充檢視和輔屏檢視只是將介面布局進行調整,並不會影響使用者原有的工作狀態。

Win10系列 UWP介面布局基礎5

2 編寫後台 訪問資源 xmlns xmlns x xmlns d xmlns mc mc ignorable d 執行後啟用樣式 fontsize 20 margin 169,345,0,378 接下來,在mainpage構造方法中引用鍵為 buttonstyle 的樣式資源為samplebutt...

Win10系列 UWP介面布局基礎8

路由事件 xaml不僅繼承了傳統的事件處理方式,還引入了乙個增強型事件處理機制 路由事件 routedevent 路由事件和傳統事件的不同是 路由事件允許乙個物件觸發事件後,可以同時擁有多個事件接收者。也就是說,路由事件可以針對多個物件 而不是僅針對觸發該事件的物件 呼叫事件處理程式。在xaml檔案...

Win10系列 UWP介面布局高階1

全新的windows 10 作業系統支援多種檢視模式,使用者可以根據需要選擇不同的檢視模式顯示應用。當使用者同時瀏覽或操作多個應用程式時,可以將應用檢視調整為輔屏檢視或填充檢視,這樣在乙個螢幕中可以同時對兩個應用進行操作,並且兩個應用之間不會相互受到影響。除此之外當使用者在使用平板電腦閱讀電子書時,...