How to change font size of Panorama item header?

Question

What is the easiest way to set the font size of the panorama item header once so it can be used for all item headers in my app?

Answer 1

There isn't a way to automatically do it for all headers in your app yet. You'll need to set the style for each one.

Implicit styling is coming in the Mango update and that should allow this to be done then.

Update
Here's what you can do now.

Create a global template style for the FontSzie you want. Something like:

<Application.Resources>
    <DataTemplate x:Key="MyItemHeaderTemplate">
        <Grid>
            <ContentPresenter>
                <TextBlock Text="{Binding}" FontSize="20" />
            </ContentPresenter>
        </Grid>
    </DataTemplate>
</Application.Resources>

Then in every PanoramaItem that I wish to have styled this way I set the HeaderTemplate:

<controls:PanoramaItem Header="first" HeaderTemplate="{StaticResource MyItemHeaderTemplate}">
    // ...
</controls:PanoramaItem>

Answer 2

This had been a difficult issue for me as well. However I have found a pretty simple solution to take care of this for each head item you wantto resize/fontweight/font...so-on. I have inserted a snippet from a current project I have been working on. Take notice to the xaml portion for controls:PanoramaItem.HeaderTemplate. This is where the templete is modified for the header item. Good Luck!

<!--Panorama item one-->
        <controls:PanoramaItem Header="Locations">   
            <Grid>
                <ListBox Height="498" HorizontalAlignment="Left" Margin="2,0,0,0" Name="listBox1" VerticalAlignment="Top" Width="424" />
            </Grid>

            <controls:PanoramaItem.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" FontSize="55" FontFamily="Segoe WP Bold" Foreground="Black" TextAlignment="Left" FontWeight="Normal" FontStyle="Italic" />
                </DataTemplate>
            </controls:PanoramaItem.HeaderTemplate>


        </controls:PanoramaItem>

Answer 3

Maybe you could try putting this in under the <controls:Panorama> :

<controls:Panorama.TitleTemplate>
  <DataTemplate>
     <TextBlock Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" FontSize="150" Margin="0,20,0,0" FontWeight="Bold" />
  </DataTemplate>
</controls:Panorama.TitleTemplate>

Found here: http://www.jstawski.com/archive/2010/10/25/change-windows-phone-7-panoramarsquos-control-title.aspx

Answer 4

You can create your own PanoramaItem Control and use generic.xaml to apply your custom PanoramaItem style.

public class MyPanoramaItem : Microsoft.Phone.Controls.PanoramaItem

    {
        public MyPanoramaItem()
        {
            DefaultStyleKey = typeof(MyPanoramaItem); 
        }
    }

Then you create Themes\Generic.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:YourProjectNamespace"> 

    <Style TargetType="local:MyPanoramaItem">
        <!—your custom PanoramaItem style-->    
    </Style> 
</ResourceDictionary>

And then use your custom Panorama like this:

xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
xmlns:local="clr-namespace:YourProjectNamespace"

<Grid x:Name="LayoutRoot" Background="Transparent"> 
        <!--Panorama control-->
        <controls:Panorama Title="my application">
            <controls:Panorama.Background>
                <ImageBrush ImageSource="PanoramaBackground.png"/>
            </controls:Panorama.Background>

            <!--Panorama item one-->
            <local:MyPanoramaItem Header="first item">
            </ local:MyPanoramaItem >
        </controls:Panorama>

More about generic.xaml and its usage you can find here.