9

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?

Buju
  • 1,546
  • 3
  • 16
  • 27

4 Answers4

23

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>
Matt Lacey
  • 65,560
  • 11
  • 91
  • 143
  • "set style": do you mean set DataTemplate for HeaderTemplate? If so, do I need to create 4 DataTemplates for each of my 4 panorama items because each item header is different? Or can I somehow bind one single DataTemplate to the PanoramaItem.Header property? – Buju May 16 '11 at 15:11
  • ah thx. I was missing the part with Text="{Binding}" ... I didn't know how to access the header string from inside the DataTemplate. Is there a way to look it up which properties I can databind in the DataTemplate if something like this ever happens to me again? – Buju May 16 '11 at 17:12
5

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>
Bruce S
  • 51
  • 1
  • 1
2

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

Mohamed Moustafa
  • 279
  • 4
  • 11
1

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.

Maku
  • 389
  • 4
  • 15