[心得]如何讓 Panorama 的中文標題對齊頂端

相信很多人第一次開發 Windows Phone App 的 Panorama 檢視頁面時

都會遇到中文字太大，超出頂端，被切掉的窘境

但是，卻又不知道應該怎樣修改，才能讓標題有預期中的效果

史萊姆在這邊提供其中一種方法：「使用 Data Template」



網路上流傳的方法相當多，不過我覺得這會比較接近根本上的解決辦法

各位可以先新增一個空白的 Panorama 專案

執行之後，會看到最上方「我的應用程式」會被很漂亮地切掉

 

接著，請打開 xaml 的原始檔

找到註解的 "Panorama 控制項"

這邊會看到 controls:Panorama Title="我的應用程式"

在這個的下方，加上以下程式碼

<controls:Panorama.TitleTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" FontSize="144" Margin="0,48,0,0" />
    </DataTemplate>
</controls:Panorama.TitleTemplate>

大約是這樣的結果



這時候你會發現，預覽畫面的中文已經不會被切掉了



這邊的原理是這樣

我先在 Panorama 的 control 加上 TitleTemplate

接著宣告 DataTemplate

在其中只加上了一個 TextBlock

設定 Text 內容是原本的 Binding 內容

字型大小為 144

對齊上方的距離為 48

這樣就可以自由設定你所想要的字型大小，以及距離上方的數值了

另外，如果你有興趣，還可以嘗試使用圖片當作標題

原理是一樣的，只是插入的 Template 不是 Textblock 而是 Image

例如將原本的 TextBlock 置換成以下程式碼

<Image Source="Background.png" Margin="0,80,0,0" />

這樣標題就會被指定的圖樣取代囉，很有趣對吧？

找個時間自己實作一下吧 ^_^ 這次我就不提供專案檔囉~~