[Windows ストア アプリ] コンテントを改行表示する

ButtonコントロールやCheckBoxコントロールでコンテント(テキスト)を改行表示する方法について説明します。

まず、エスケープシーケンス \n による改行はできません。

ではどうすればよいのか、というと <LineBreak>を使用します。

ただし、下記のような記述をした場合は、複数のコンテントがあると見なされるためエラーとなってしまいます。

<LineBreak>の誤った使用例

<Button>
    複数行<LineBreak />表示
</Button>

この問題を解決するには <Button>の中に<TextBlock>を配置し、その中で<LineBreak>を使用するようにします。

下記に正しい改行の例を示します。

<LineBreak>による改行例

<Button>
    <TextBlock>複数行で<LineBreak />表示します</TextBlock>
</Button>

&lt;LineBreak&gt;による改行例

[Windows ストア アプリ] コンテントの配置位置を設定する

Windows ストア アプリで使用できるコントロールにはContentプロパティを持つものがあります(ButtonやCheckBoxなど)。

水平方向の配置位置は HorizontalContenAlignmentプロパティで、垂直方向の配置位置は VerticalContentAlignmentプロパティで指定することができます。

指定可能な値は下記の通りです。

HorizontalContenAlignment
説明
Left 左寄せ
Center 中央
Right 右寄せ
Stretch 親要素のレイアウト スロット全体に引き伸ばして配置された要素。
VerticalContenAlignment
説明
Bottom 下寄せ
Center 中央
Top 上寄せ
Stretch  親要素のレイアウト スロット全体に引き伸ばして配置された要素。

HorizontalContentAlignmentとVerticalContentAlignmentの使用例は下記の通りです。

コンテントを配置する例

XAMLの例

<Button Content="Left"   HorizontalContentAlignment="Left" />
<Button Content="Center" HorizontalContentAlignment="Center"/>
<Button Content="Right"  HorizontalContentAlignment="Right"/>
<Button Content="Bottom" VerticalContentAlignment="Bottom"/>
<Button Content="Center" VerticalContentAlignment="Center"/>
<Button Content="Top"    VerticalContentAlignment="Top"/>

[Windows ストア アプリ] スタイルを作成して再利用する

Windows ストア アプリではスタイルをリソースに登録して再利用(使い回す)ことができます。

たとえば、同じ幅と高さ、同じフォントサイズを持つButtonコントロールをいくつも作成したい場合などに有効です。

通常、幅が350、高さが80、フォントサイズが30のButtonを作成する場合のXAMLは下記のようになります。

<Button Content="FlipView02" Width="350" Height="80" FontSize="30" />

今度はスタイルを作成して再利用する方法について見てみましょう。

スタイルはリソースとして準備します。

XAMLは下記のようになります。

この例では、リソースを<Page.Resources>〜</Page.Resources>として準備しています。

<Page
    x:Class="WindowsStore1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WindowsStore1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <!-- ★★★リソース ここから★★★ -->
    <Page.Resources>
        <!-- ★★★ここにスタイルを作成★★★ -->
    </Page.Resources>
    <!-- ★★★リソース ここまで★★★ -->

</Page>

次にスタイル部分です。

スタイルは<Style>を使用します。スタイルを適用したいコントロールはTagetType属性で指定することができます。また、x:key属性を使用して名前を付けることができます。

たとえば、MyButtonという名前でButtonコントロールのスタイルを定義する場合は下記のようにします。

<Style TargetType="Button" x:Key="MyButton">

</Style>

次に、コントロールのスタイル(要するにプロパティです)を定義していきます。

スタイルは<Setter>で定義し、プロパティはProperty属性で、プロパティ値はValue属性に指定します。

たとえば、Buttonコントロールの幅(Width)、高さ(Height)、フォントサイズ(FontSize)を設定するには下記のようにします。

<Style TargetType="Button" x:Key="MyButton">
    <Setter Property="Width" Value="350" />
    <Setter Property="Height" Value="80" />
    <Setter Property="FontSize" Value="30" />
</Style>

以上のようにして定義したリソースを使うには、コントロールのStyle属性を使用します。先ほど作成したリソースは静的リソースなのでStaticResourceとなります。また、リソースの名称はMyButtonとしていたので、XAMLは下記のようになります。

<Button Content="ボタン1" Style="{StaticResource MyButton}"/>

以上で説明は終わりです。

上記のようにStyle属性を使用することで、同じスタイルを持つコントロールをいくつも作成することができます。

最後に、全体のXAMLを以下に示します。

<Page
    x:Class="WindowsStore1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WindowsStore1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Style TargetType="Button" x:Key="MyButton">
            <Setter Property="Width" Value="350" />
            <Setter Property="Height" Value="80" />
            <Setter Property="FontSize" Value="30" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
        </Style>
    </Page.Resources>
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel Orientation="Vertical">
            <Button Content="ボタン1" Style="{StaticResource MyButton}"/>
            <Button Content="ボタン2" Style="{StaticResource MyButton}"/>
            <Button Content="ボタン3" Style="{StaticResource MyButton}"/>
        </StackPanel>
    </Grid>
</Page>