眠るシーラカンスと水底のプログラマー

　（本記事はVisualStudio2012RC＋Windows8RP環境で確認しております。製品版では動作が異なる可能性があるのでご注意ください。）

　Metroスタイルアプリケーションで縦持ち(Portrait)の際に、ヘッダーのタイトル部分の文字数が多すぎて欠けてしまうことがあります。

画面右端で文字が欠けて…と表示されている

　TextBlockの文字の折り返しはTextWrappingプロパティをWrapに設定すると良いのでした。

            <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" TextWrapping="Wrap" Grid.Column="1" Style="{StaticResource PageHeaderTextStyle}"/>

　しかしこれでは、うまく改行されません・・・。

　TextBlockの幅が指定されていないために折り返しが発生しません。

　とはいえ、縦持ち(Portrait)と横持ち(Landscape)とでは横幅が異なるので、プログラムで動的に設定することにします。

　幅の設定はSizeChangedイベント時に行います。

        public GroupedItemsPage()
        {
            this.InitializeComponent();

            this.SizeChanged += GroupedItemsPage_SizeChanged;
        }

        void GroupedItemsPage_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            this.pageTitle.Width = this.ActualWidth - 100;
        }

　これで改行が行われました・・・がTextWrappingSampleという文字が3つ表示されるはずが2つしか表示されません。

　これはTextBlockを囲むGridの高さが今回の場合140ピクセルに設定されているからでした。

　高さを増やしてあげるか、Autoに設定しましょう。

　3行表示されましたが、高さの値によってや、Auto指定の場合は間隔が詰めすぎになります。

　この場合LineHeightプロパティを指定してあげましょう。

　文字サイズより少し大きめの値にします。

　はい、これでちゃんと表示されました。

Tweet