このページは役に立ちましたか。
このページのコンテンツについての ご意見をお待ちしております
その他にご意見はありますか。
残り 1500 文字
エクスポート (0) 印刷
すべて展開
情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

Windows Phone 8 のレイアウト

2014/06/18

対象: Windows Phone 8 および Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

Windows Phone には、画面にコントロールを配置する方法を指定できるようにする、柔軟性の高いレイアウト システムが用意されています。このクイックスタートでは、さまざまな画面解像度に合わせて自動的にサイズを変更するユーザー インターフェイスをデザインする方法について説明します。

このトピックは、次のセクションで構成されています。

レイアウトとは、Windows Phone アプリのオブジェクトのサイズを変更し、配置するプロセスのことです。ビジュアル オブジェクトを配置するには、Panel またはその他のコンテナー オブジェクトに配置する必要があります。Windows Phone には、CanvasStackPanelGrid など、コンテナーとして機能し、コントロールを配置および整理できるようにするさまざまな Panel コントロールが用意されています。

Windows Phone レイアウト システムは、絶対レイアウトと動的レイアウトの両方をサポートしています。絶対レイアウトでは、コントロールは明示的な x/y 軸を使用して (たとえば、Canvas を使用して) 配置されます。動的レイアウトでは、ユーザー インターフェイスのサイズがさまざまな画面解像度に合わせて (たとえば、StackPanel または Grid を使用して) 自動的に変更されます。

絶対レイアウトとは、親要素を基準とした位置を指定してレイアウト パネルで子要素を配置することをいいます。絶対配置では、画面のサイズは考慮されません。アプリで UI 要素の絶対配置が必要な場合は、さまざまな画面解像度に合わせて別のページをデザインするか、代わりにスケーリングを使用できます。

Windows Phone には、絶対配置をサポートするために Canvas コントロールが用意されています。既定では、新しい Windows Phone アプリ プロジェクトを作成するときに、絶対配置に基づくレイアウトを作成するためのルート レイアウトは Grid になります。GridCanvas で置き換える必要があります。

コントロールを Canvas に配置するには、コントロールで次の添付プロパティを設定します。Visual Studio でデザイナーを使用する場合、デザイン サーフェスにコントロールをドラッグすると、これらのプロパティが更新されます。

動的レイアウトでは、さまざまな画像解像度でユーザー インターフェイスが正しく表示されます。子要素を配置するときには、親要素を基準として配置方法と折り返し方法を指定します。たとえば、コントロールをパネル上に配置し、水平方向に折り返すように指定することもできます。自動サイズ変更または比例サイズ変更を使用するには、Height プロパティおよび Width プロパティに特別な値を割り当てる必要があります。動的レイアウトの推奨設定は次のとおりです。

  • コントロールまたはレイアウトの Height と Width を Auto に設定します。これらの値を Grid レイアウトのコントロールに使用すると、コントロールは、それが含まれているセル全体に表示されます。自動サイズ変更がサポートされているのは、コントロール、Grid レイアウト、および StackPanel レイアウトです。

  • テキストが含まれているコントロールの場合は、Height プロパティおよび Width プロパティを削除し、MinWidth プロパティまたは MinHeight プロパティを設定します。これにより、テキストが読み取り不可能なサイズに縮小されなくなります。

  • Grid レイアウトの RowDefinition 要素および ColumnDefinition 要素に比例した値を設定するには、相対的な Height および Width の値を使用します。たとえば、1 つの列が別の列よりも 5 倍広いことを指定するには、ColumnDefinition 要素の Width プロパティに "*" および "5*" を使用します。

自動サイズ変更とスター (アスタリスク) によるサイズ変更

Auto によるサイズ変更では、コンテンツのサイズが変わっても、コンテンツ全体が表示されるようにコントロールのサイズが調整されます。Star によるサイズ変更では、使用可能なスペースをグリッドの行および列の間で加重比率に基づいて配分できます。XAML では、スターの値は * または 2* として表現されます。たとえば、4 列のグリッドでは、列の幅を次の表に示す値に設定できます。

Column_1

Auto

コンテンツに合わせて列のサイズが調整されます。

Column_2

*

Auto に設定された列が計算され、残った幅が列に割り当てられます。列 2 の幅は列 4 の半分になります。

Column_3

Auto

コンテンツに合わせて列のサイズが調整されます。

Column_4

2*

Auto に設定された列が計算され、残った幅が列に割り当てられます。列 4 の幅は列 2 の 2 倍になります。

自動サイズ変更およびスター (アスタリスク) によるサイズ変更の詳細については、GridUnitType 列挙体を参照してください。

Windows Phone の組み込みパネルには、CanvasStackPanel、および Grid があります。

Canvas

Canvas は、Canvas 領域に対する相対座標を使用して、子要素を明示的に配置できる領域を定義します。Canvas は、含まれている UI 要素が移動することがないシナリオで有効です。

x 座標と y 座標を指定することで、Canvas 内でのコントロールの位置を制御できます。x 座標と y 座標は、通常、Canvas.Left 添付プロパティと Canvas.Top 添付プロパティを使用して指定します。Canvas.Left は、格納されている Canvas (x 座標) の左端からのオブジェクトの距離を指定し、Canvas.Top は、格納されている Canvas (y 軸) の上端からのオブジェクトの距離を指定します。

Canvas の左端から 30 ピクセル、上端から 200 ピクセルの位置に四角形を配置する方法を次の XAML に示します。

<Canvas Background="Transparent">
    <Rectangle Canvas.Left="30" Canvas.Top="200"
        Fill="red" Width="200" Height="200" />
</Canvas>

StackPanel の後の LayoutRoot に、TitlePanel という名前で前述の XAML を追加した場合の出力を次の図に示します。

QS Layout Canvas

StackPanel

StackPanel は、子要素を水平方向または垂直方向の 1 つの行に配置する単純なレイアウト パネルです。Orientation プロパティを使用して、子要素の方向を指定できます。Orientation プロパティの既定値は Vertical です。プロパティの既定値は StackPanel です。通常、 は、ページに UI の小さなサブセクションを配置するシナリオで使用します。

項目の垂直方向の StackPanel を作成する方法を次の XAML に示します。

<StackPanel Margin="20">
    <Rectangle Fill="Red" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Blue" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Green" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Purple" Width="50" Height="50" Margin="5" />
</StackPanel>

前述の XAML では、次の Windows Phone の図に示すような出力が作成されます。

QS Layout StackPanel

Grid

Grid コントロールは最も柔軟性の高いレイアウト パネルであり、複数行レイアウトおよび複数列レイアウトでのコントロールの配置をサポートします。Grid の Row 定義および Column 定義を指定するには、Grid コントロール内で直接宣言される RowDefinitions プロパティおよび ColumnDefinitions プロパティを使用します。Grid の特定のセル内でオブジェクトを配置するには、Column 添付プロパティおよび Row 添付プロパティを使用します。自動サイズ変更またはスター サイズ変更を使用して、列または行内でスペースを配分できます。自動サイズ変更およびスター サイズ変更については、このクイックスタートで既に説明しました。複数の行や列にまたがるコンテンツを作成するには、RowSpan 添付プロパティおよび ColumnSpan 添付プロパティを使用します。

Grid の子要素は、マークアップやコードに出現する順序で描画されます。結果として、複数の要素が同じ座標を共有する場合には、レイヤー化された順序 (z オーダーとも呼ばれます) を実現できます。z オーダーの詳細については、「ZIndex」を参照してください。

3 つの行と 2 つの列を持つ Gridを作成する方法を、次の XAML に示します。最初の行および 3 つ目の行の高さは、テキストを格納するのに適したサイズです。2 つ目の行の高さにより、残ったスペースが使用されます。列の幅は、コンテナーの利用可能な幅内で均等に分割されます。

<Grid ShowGridLines="True" Margin="12,0,12,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition />
        <RowDefinition Height="auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <TextBox Text="1st row 1st column" TextWrapping="Wrap" Grid.Column="0" Grid.Row="0" />
    <TextBox Text="3rd row 1st column" TextWrapping="Wrap" Grid.Column="0" Grid.Row="2" />
    <Button Content="1st row 2nd column" FontSize="17" Grid.Column="1" Grid.Row="0" />
    <Button Content="3rd row 2nd column" FontSize="17" Grid.Column="1" Grid.Row="2" />
</Grid>

前述の XAML では、次の図に示すような出力が作成されます。

QS Layout GridPhone

カスタム パネルを作成すると、CanvasStackPanel、または Grid では実現できない複雑なレイアウトを作成することも可能です。カスタム パネルでは、パネルの子のレイアウト動作を定義できます。カスタム パネルを作成するには、Panel を継承し、その MeasureOverride メソッドと ArrangeOverride メソッドをオーバーライドします。

表示:
© 2015 Microsoft