當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

博客园客户端UAP开发随笔 -- 适配不同尺寸的屏幕

發布時間：2025/3/17 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了博客园客户端UAP开发随笔 -- 适配不同尺寸的屏幕小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Windows 8誕生之初，Modern apps被設計在運行于全屏模式下。為了讓Windows在運行Modern app時繼續擁有前臺多任務能力，Windows引入了一種全新的分屏技術“SnapView”。它允許將支持這種視圖的Modern app貼在屏幕一邊，以1/4 （實際上是邏輯分辨率寬度333左右）屏幕尺寸運行。這種視圖特別適于工具類應用（如詞典）和即時通訊類應用（如QQ）。分屏多任務也成了Windows 8區別于iPad和安卓Pad系統的重要特征。

當時程序員在考慮Modern App適配不同視圖和屏幕分辨率時，一般主要考慮Landscape View (FullScreenSize, Fill)、Portriat View和SnapView，以及一些常見的分辨率如1366*768、1920*1080等。

可能是Windows的開發者們覺得僅僅是SnapView還不夠，也可能是再次感悟到“Windows”的真諦，自Windows 10開始，Modern app允許以窗口形式運行。因此Modern app的窗口幾乎可以是任何尺寸，Windows Store App的顯示適配問題就需要再次拿出來聊聊了。

一般來說，Modern app尺寸變化的判斷和適配有以下4個時機：

· VisualStateManager

· DetermineVisualState

· Window.SizeChanged

· OnApplyTheme

1. VisualStateManger 是最常用的方法，也是最方便的方法。它的用法也相對簡單。先看一段XAML代碼：

VisualStateManager代碼位于Page的LayoutGrid下，以Storageboard的形式給出了不同視圖下需要做的適配性變化。以“SnapView”為例，我們通常給予SnapView更多關照，如container寬度的調整，ScrollView方向的調整，一些輔助的顯示控件的隱藏等等。值得欣慰的是，使用VisualStateManager的XAML代碼，你只需要考慮怎么來的，不需要考慮怎么回去。當VisualState發生變化時，StateManager會先讓視圖回到初始狀態，然后再執行新的變化。

必應詞典的SnapView就是用這種方式實現的:

2. DetermineVisualState

DetermineVisualState像是VisualStateManager的C#版本，它是一個重載函數，用于繼承了LayoutAwarePage的Page。來看一段代碼：

protected override string DetermineVisualState(ApplicationViewState viewState){if (viewState == ApplicationViewState.Snapped){if (_DefinitionControl != null){_DefinitionControl.SetToSnapStyle();}Grid_Layout.RowDefinitions[0].Height = new GridLength(60); …… ……}else{if (_DefinitionControl != null){_DefinitionControl.SetToLandscapeStyle();}Grid_Layout.RowDefinitions[0].Height = new GridLength(80);// semanticZoom.IsZoomOutButtonEnabled = true; } ……. ……return viewState.ToString();}

在DetermineVisualState中，可以手動添加一些代碼，做一些特殊處理，或者用VisualStateManager不容易表達的變化。但DetermineVisualState用起來就沒有VisualStateManager那么方便了，要知道怎么來的，還要知道怎么回去。這里的代碼應該盡可能的少一些。

3. Window.Current.SizeChanged

如果想更精細的控制窗口變化時的界面效果，可以抓住在Window. Current .SizeChanged這個時機:

protected override void OnNavigatedTo(NavigationEventArgs e) {Window.Current.SizeChanged += Current_SizeChanged; } Protected override void OnNavigatedFrom(NavigationeventArgs e) {Window.Current.SizeChanged-=Current_SizeChanged; }void Current_SizeChanged(object sender, WindowSizeChangedEventArgs e) { //do something here }

4. OnApplyTheme

在自定義控件顯示前，OnApplyTheme是一個比較常用的函數用來靈活的給頁面元素賦值、修改控件外觀。舉個”栗“子：

protected override void OnApplyTemplate(){Grid layoutGrid = GetTemplateChild("Grid_Layout") as Grid;if (_counter % 2 == 0)layoutGrid.Background = Application.Current.Resources["HomepageDataContainerBackground1"] as SolidColorBrush;elselayoutGrid.Background = Application.Current.Resources["HomepageDataContainerBackground2"] as SolidColorBrush;StackPanel SP_KeyWords = GetTemplateChild("SP_KeyWords") as StackPanel;int counter = 1;foreach (KeyWord keyWord in _DailyNews.KeyWords){KeyWordTile keyWordTile = new KeyWordTile(keyWord, counter);keyWordTile.KeyWordClicked += dailyNewsTile_KeyWordTileClicked;SP_KeyWords.Children.Add(keyWordTile);counter++;} …. Do other things.base.OnApplyTemplate();}

掌握了以上四點，相信大家都能做出看起來很美、適配廣泛的的Modern App。

分享代碼，改變世界！

Windows Phone Store App link:

http://www.windowsphone.com/zh-cn/store/app/博客園-uap/500f08f0-5be8-4723-aff9-a397beee52fc

Windows Store App link:

http://apps.microsoft.com/windows/zh-cn/app/c76b99a0-9abd-4a4e-86f0-b29bfcc51059

GitHub open source link:

https://github.com/MS-UAP/cnblogs-UAP

MSDN Sample Code:

https://code.msdn.microsoft.com/CNBlogs-Client-Universal-477943ab

總結

以上是生活随笔為你收集整理的博客园客户端UAP开发随笔 -- 适配不同尺寸的屏幕的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： jqGrid编辑—公共规则【附视频、pp
下一篇： SJTU OJ 3046 足球题解