(本記事は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プロパティを指定してあげましょう。
文字サイズより少し大きめの値にします。
はい、これでちゃんと表示されました。
Please give us your valuable comment