// 潛水多年來第一次寫這么多字^_^
看見你出剪刀我再出石頭
由於之前Windows Phone OS 7.1只有一個分辨率,所以我們無須擔心我們的應用在這台手機運行ok在其他機型上會出問題.
我常聽到同事抱怨,人類已經無法阻止android的分辨率了.蘋果的開發者是幸福的^_^.
單一的分辨率,也意味着單一的機型.
不能給用戶提供多樣化的體驗,也不是一件好事.作為后來者,微軟在這兩者間做出了權衡.要多分辨率.但不要泛濫!
WP8支持的分辨率
下面是WP8 開發者預覽版所支持的分辨率,及比例
| 分辨率 |
分辨率 |
長寬比 |
Delta from Windows Phone OS 7.1 |
縮放結果 |
| WVGA |
480 × 800 |
15:9 |
None |
480 × 800 |
| WXGA |
768 × 1280 |
15:9 |
1.6x scale |
480 × 800 |
| 720p |
720 × 1280 |
16:9 |
1.5x scale, 80 pixels taller (53 pixels, before scaling) |
480 × 853 |
如何以最小的成本,適應這三款分辨率.是我們接下來要思考的話題.
在布局上最好是使用Grid
使用Grid,我們可以使用*和auto.來自適應分辨率.
比如:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="14,0,10,0">
<ScrollViewer HorizontalAlignment="Left" Height="540" VerticalAlignment="Top" Width="456">
<Grid HorizontalAlignment="Center" Height="618" VerticalAlignment="Top" Width="456">
<Grid.RowDefinitions>
<RowDefinition Height="98*"/>
<RowDefinition Height="13*"/>
</Grid.RowDefinitions>
<TextBlock TextWrapping="Wrap" Margin="22,20,10,0" Text="fasdfasdfasd"/>
</Grid>
</ScrollViewer>
</Grid>
這里
<RowDefinition Height="98*"/>
<RowDefinition Height="13*"/>
不要寫死數值硬編碼. 要使用*或auto.
像canvas那種絕對定位,布局的控件盡量少的使用.
根據不同的分辨率加載圖像
[注意]這里的圖像不是我們想像的所有圖片.只是像背景圖像,應用初始化圖.
由於分辨率的比例不同.我們需要做一些適配的工作.至於其他的如瓦片,應用圖標.我們只需要按着WXGA的分辨率做一套就可以了.
系統會自動縮放合適的大小.
下面是如何動態加載[應用初始化圖]
- 把圖像的Copy to Output Directory屬性值設成copy always.
2.
public enum Resolutions { WVGA, WXGA, HD720p };
public static class ResolutionHelper
{
private static bool IsWvga
{
get
{
return Application.Current.Host.Content.ActualHeight == 800
&& Application.Current.Host.Content.ScaleFactor == 100;
}
}
private static bool IsWxga
{
get
{
return Application.Current.Host.Content.ScaleFactor == 160;
}
}
private static bool Is720p
{
get
{
return Application.Current.Host.Content.ScaleFactor == 150;
}
}
public static Resolutions CurrentResolution
{
get
{
if (IsWvga) return Resolutions.WVGA;
else if (IsWxga) return Resolutions.WXGA;
else if (Is720p) return Resolutions.HD720p;
else throw new InvalidOperationException("Unknown resolution");
}
}
}
3.
public class MultiResImageChooser
{
public Uri BestResolutionImage
{
get
{
switch (ResolutionHelper.CurrentResolution)
{
case Resolutions.HD720p:
return new Uri("Assets/MyImage.screen-720p.jpg", UriKind.Relative);
case Resolutions.WXGA:
return new Uri("Assets/MyImage.screen-wxga.jpg", UriKind.Relative);
case Resolutions.WVGA:
return new Uri("Assets/MyImage.screen-wvga.jpg", UriKind.Relative);
default:
throw new InvalidOperationException("Unknown resolution type");
}
}
}
}
4.xaml中
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Image Source="{Binding BestResolutionImage, Source={StaticResource MultiResImageChooser}}"/>
</Grid>
5.在app.xaml
xmlns:h="clr-namespace:MultiResSnippet"
6.
App.xaml
<!--Application Resources-->
<Application.Resources>
<h:MultiResImageChooser x:Key="MultiResImageChooser"/>
</Application.Resources>
瓦片和圖標
前面說過,對於瓦片和圖標我們只需要制作一套WXGA的資源.
不過官方的說法很奇怪.用了[必須只有一套]…
下面是瓦片的尺寸
| Tile size |
WXGA |
| App list |
100 × 100 |
| Small |
159 × 159 |
| Medium |
336 × 336 |
| Large |
691 × 336 |
關於從7.1升級到8.0
基於7.1的應用,基本上是不需要任何改動,就能運行於wp8.0的.
至於分辨率.如果是7.1的應用運行於8.0的WXGA的話.應用會像是一張480*800的圖片放大成768*1280的樣子.
在模擬器中100%顯示的時候會有寫模糊.
如果可以的話,推薦首先把7.1的應用打開轉換成8.0
這樣就可以使用8.0的新api了.
對於不同分辨率的邏輯上的處理.
我們可以使用條件編譯來解決.
#if WP8
#end if
這里只是舉例,條件編譯用法請查一下相關資料 .
另外.如果不能使一個項目實現就實現多辨率.可以再建一個項目.
不過維護起來要麻煩不少了.
覺得對您有用,請點支持謝謝!
轉載請注明出處.
作者:蝗蟲的大腿
http://www.cnblogs.com/beyoung/archive/2012/08/07/2627448.html