さて、エミュレータ含め、普通のWindows Phone端末ではアプリ（Silverlightアプリ除く）のPageは横幅400として扱われます。ところがMADOSMAではこの値が600となっているため、文字や画像が小さく表示されるばかりか、アプリによっては全体が小さく縮んだ変なレイアウトになってしまうものもあります。
修正するとクイックアクションの設定可能数が5つから4つに減ってしまうなどもろもろの事情によりどうやらこのままで行くようで、ユーザ側では簡単操作の文字サイズ設定で小さい文字を大きく補整することもできるのですが、しかし文字以外のサイズは依然として小さいままとなります。
で、まあアプリの側で対応しちゃいましょうと登場するのがViewboxです。Viewboxは、そのContentを自身のサイズいっぱいまで拡大・縮小するコントロールで、単純にはViewbox直下にGridなりを置いてその横幅を400にしてしまえばMADOSMAとそれ以外とでスケーリングが揃うことになります。
それだけでも縦幅が十分に小さい場合はいいのですが、ここでViewboxの縦横比よりその中身の縦横比の方が縦の比率が大きくなってしまうと、縦幅を基準にスケーリングされるようになってしまうわけで、つまり縦幅が伸びるごとにどんどん小さくなっていってしまいます。解決するためには縦幅も指定してやれば良いのですが、画面の縦横比は端末によって異なるため縦幅は一様に定まりません。というわけで算出する必要があります。
自動調整してくれるコントロール
テンプレートコントロールとして作ってしまいましょう。新規作成でテンプレートコントロールを選んで……。
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace Sample01.Controls
{
public sealed class AdjustmentViewbox : ContentControl
{
private static readonly double BaseLength = 400;
public AdjustmentViewbox()
{
this.DefaultStyleKey = typeof(AdjustmentViewbox);
this.SizeChanged += AdjustmentViewbox_SizeChanged;
}
private void AdjustmentViewbox_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (e.NewSize.Height > e.NewSize.Width)
{
// 縦長
AdjustedWidth = BaseLength;
AdjustedHeight = e.NewSize.Height * BaseLength / e.NewSize.Width;
}
else
{
// 横長
AdjustedHeight = BaseLength;
AdjustedWidth = e.NewSize.Width * BaseLength / e.NewSize.Height;
}
}
public double AdjustedWidth
{
get
{
return (double)GetValue(AdjustedWidthProperty);
}
set
{
SetValue(AdjustedWidthProperty, value);
}
}
public double AdjustedHeight
{
get
{
return (double)GetValue(AdjustedHeightProperty);
}
set
{
SetValue(AdjustedHeightProperty, value);
}
}
public static readonly DependencyProperty AdjustedWidthProperty = DependencyProperty.Register("AdjustedWidth", typeof(double), typeof(AdjustmentViewbox), null);
public static readonly DependencyProperty AdjustedHeightProperty = DependencyProperty.Register("AdjustedHeight", typeof(double), typeof(AdjustmentViewbox), null);
}
}
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Sample01.Controls">
<Style TargetType="local:AdjustmentViewbox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Viewbox>
<ContentPresenter
Width="{Binding AdjustedWidth, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Height="{Binding AdjustedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
で、作ったらあとは使うPageのContentをまるまる覆う形にしてやればよし。
これでもう文字が小さいなんて言われずに済みますね。
注意点
- 計算誤差かわずかに隙間が生じることがある
- Viewboxの外側、上部ステータスバーや下部アプリバーのサイズは小さいまま