日替わりでWP7に関することでBlog記事を書くというイベント、
Windows Phone Advent Calendarに参加してみました。私の担当は11日目で、この記事がそうです。
最初は本当に簡単な、「1へぇ」がもらえるかどうかレベルのこと書いて終わりにするつもりだったのですが、他の参加者の方々の記事が思いのほかレベルが高く、慌てて技術系の記事を用意した次第です。
では本題。
WP7アプリを作ったり使ったりしてて、たまに、Pivotヘッダーのタイトル部分が大きすぎるなぁと思うことがあります。下の画像で言うところの、「最初」「2番目」に該当する部分です。
デザインだと言われればそれまでなんですが、アプリによっては情報表示量が減ってしまってあまり嬉しくないこともあります。例えば私の「なな字引」なんかも最近、ちょっとヘッダのでかさが邪魔になってきました。
同様の問題が、Panoramaアプリでもいえます。
Panoramaなんかだと、タイトル自体（画像では マイ ...となって見切れてるやつ）もでかいですし、その下の各ページにあるリストのタイトル（最初の項目となってるやつ）も中々の大きさです。
しかしPanoramaの場合は、これらを簡単に修正してやることが出来ます。
ExpressionBlendなどでソリューションを開き、カスタムテンプレートとしてサイズをいじってやるだけなのです。例えばタイトルの文字の大きさは、Panoramaコントロール自体を右クリックし、[テンプレートの編集] ⇒ [コピーして編集] と選択します。
その後、TitleLayerを選択した後に、プロパティウィンドウからテキストの項目にある、フォントサイズを好きな値に変更してやるだけです。ついでに位置の調整も行えば、ほらこの通り。
リストのタイトルについてもほぼ同様。
PranoramaItemを選択して右クリックし、[テンプレートの編集] ⇒ [コピーして編集] と選択します。今度は header オブジェクトを選択し、またフォントサイズを変えてやるだけです。ね、簡単でしょう？
では、Pivotのヘッダーも同じようにササッと直しちゃいましょう。
やはりExpressionBlendでソリューションを開き、Pivotオブジェクトを選択して右クリック、、[テンプレートの編集] ⇒ [コピーして編集] と選択します。
オブジェクトを見ると……ふむ、この HeadersListElement というのが名前的にそれっぽいですね。こいつのフォントサイズを弄ってしまいましょう。
ところが、あれ、なんか変わってない……？
ならばPivotItemのほうだ、と思ってやってみても、そちらにも該当しそうな項目は見当たりません。ある程度調べてみましたが、どうやらPivotのヘッダ文字の大きさをExpressionBlendで簡単に変えることは出来ないようです。
また、
公式のPDFファイル(PDFが開きます)によれば、
Pivotのヘッダ高さは固定されており、変更できないとしっかり定義されておりました。
しかし現実には、Twitterアプリの「
Amelloides」や「
moTweet」のように、Pivotヘッダの文字サイズを変更しているものがあります。どうやっているのでしょう？
実際にこれらアプリがどうやっているのかは作者しか知りませんが、実は以下のような方法で変更する方法は存在します。XAMLファイルを自分自身で書いてやればいいのです。この方法はある程度XAMLについての知識がある人でないと厳しい方法です。
まず、以下にPivotの中に2つのPivotItemを持つ、標準的なソースを示します。
--------------------------------------------------------
<!--ピボット コントロール-->
<controls:Pivot Title="マイ アプリケーション">
<!--ピボット アイテム 1-->
<controls:PivotItem Header="最初">
<!--テキストの折り返しを行う 2 行リスト-->
<ListBox x:Name="FirstListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="78">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PivotItem>
<!--ピボット アイテム 2-->
<controls:PivotItem Header="2 番目">
<!--テキストの折り返しを行わない 3 行リスト-->
<ListBox x:Name="SecondListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17">
<TextBlock Text="{Binding LineOne}" TextWrapping="NoWrap" Margin="12,0,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineThree}" TextWrapping="NoWrap" Margin="12,-6,0,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PivotItem>
</controls:Pivot>
--------------------------------------------------------
うん、超絶見難いですね。
重要な場所だけ抜き取ります。それが以下です。
--------------------------------------------------------
<!--ピボット アイテム 1-->
<controls:PivotItem Header="最初">
<!--テキストの折り返しを行う 2 行リスト-->
<ListBox ...省略>
</ListBox>
</controls:PivotItem>
<!--ピボット アイテム 2-->
<controls:PivotItem Header="2番目">
<!--テキストの折り返しを行わない 3 行リスト-->
<ListBox ...省略>
</ListBox>
</controls:PivotItem>
--------------------------------------------------------
なんかここにFontSize属性とか追加してやればいけそうな気もするんですが、やっぱダメです。
この部分を思い切って、以下のように書き換えちゃってください。
--------------------------------------------------------
<!--ピボット アイテム 1-->
<controls:PivotItem>
<controls:PivotItem.Header>
<ContentControl>
<TextBlock Text="最初" FontSize="36" />
</ContentControl>
</controls:PivotItem.Header>
<!--テキストの折り返しを行う 2 行リスト-->
<ListBox ...省略>
</ListBox>
</controls:PivotItem>
<!--ピボット アイテム 2-->
<controls:PivotItem>
<controls:PivotItem.Header>
<ContentControl>
<TextBlock Text="2 番目" FontSize="36" />
</ContentControl>
</controls:PivotItem.Header>
<!--テキストの折り返しを行わない 3 行リスト-->
<ListBox ...省略>
</ListBox>
</controls:PivotItem>
--------------------------------------------------------
多分エラー扱いされると思いますが、問答無用でリビルドしてみましょう。エラーは消えたと思います。
こうすることでヘッダー部分をTextBlockに変えることが出来ます。
あとはこのTextBlockのフォントサイズを弄ってやると……。
こんな具合に文字サイズを小さくすることが出来ました。また、それぞれのヘッダのサイズを別々にすることも可能です。
あとは位置とかを適切に調整してやれば、OKです。
以下に、またえらく見難いですけど全体ソースを貼っておきます。
--------------------------------------------------------
<!--ピボット コントロール-->
<controls:Pivot Title="マイ アプリケーション">
<!--ピボット アイテム 1-->
<controls:PivotItem>
<controls:PivotItem.Header>
<ContentControl>
<TextBlock Text="最初" FontSize="36" />
</ContentControl>
</controls:PivotItem.Header>
<ListBox x:Name="FirstListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="78">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PivotItem>
<controls:PivotItem>
<controls:PivotItem.Header>
<ContentControl>
<TextBlock Text="2 番目" FontSize="36" />
</ContentControl>
</controls:PivotItem.Header>
<ListBox x:Name="SecondListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17">
<TextBlock Text="{Binding LineOne}" TextWrapping="NoWrap" Margin="12,0,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineThree}" TextWrapping="NoWrap" Margin="12,-6,0,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PivotItem>
</controls:Pivot>
--------------------------------------------------------
以上です、如何でしたでしょうか？
私自身もXAMLとかはまだ勉強不足で、解説できるほどの腕前は持っていないですが、少しでも皆さんに知識を共有していただければと思って書いてみました。
それと最後に、重要なことですが、この記事は 「
名前はまだない」様のメモのコンテンツを参考にして（というか
パクって）書かせていただきました。なので、知ってる人は既に知ってる内容だったかもしれません。
あんたのそのちっぽけな魂をぎゅっと絞ってやる。スポンジみたいにさ。
――アーボーグの妖術使い
