MetroStyleApp入門 vol41.TextBlockの改行について

月曜日 , 30, 7月 2012 Leave a comment

 (本記事は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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です