Reputation: 79033
In my Phone 7 application, I'm using a pivot control. Now I'd like to change the background of its title and header area. How can I achieve this?
Is there an overall template for the pivot control that can be customized?
I've already tried to set the background of the grid containing the pivot control to the header color and then to set the background of each pivot item to the original background color. It looks good on first sight. But when you wipe the pivot item to the left to display the second item, an area colored in the header color appears between the two pivot items. So that approach is not working.
Furthermore I've tried to customize the template of the title and the header item. But these templates only cover the area of the text itself, not the whole header and template area.
Upvotes: 2
Views: 7235
Reputation: 5808
Here's the variant with changing the control's template. Change the Background="Red" to whatever brush you want.
<Style x:Key="PivotStyle1" TargetType="controls:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="Red" CacheMode="BitmapCache" Grid.RowSpan="2" />
<Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache"
Grid.Row="2" />
<ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}"
Content="{TemplateBinding Title}" Margin="24,17,0,-7"/>
<controlsPrimitives:PivotHeadersControl x:Name="HeadersListElement"
Grid.Row="1"/>
<ItemsPresenter x:Name="PivotItemPresenter"
Margin="{TemplateBinding Padding}" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
....
<controls:Pivot Title="MY APPLICATION" Style="{StaticResource PivotStyle1}">
....
Upvotes: 10
Reputation: 16826
You could modify the header template, which is usually a better option since you won't have to worry about custom positioning and alignment:
<controls:Pivot>
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<Grid Background="White"><TextBloc>Your Header Here</TextBlock></Grid>
</DataTemplate>
</controls:Pivot.HeaderTemplate>
</controls:Pivot>
That being said, you are applying the background to an auto-resizing grid - of course, you can resize it on your own to adjust it to the right size. Same applies to each PivotItem, if that's where you want to change the title - just bind those to a similar DataTemplate.
Upvotes: 2
Reputation: 5808
You're right that the Title and Header templates are only the actual text areas. It might be possible to override the whole template of the Pivot control, but an easier way would be to just add a colored rectangle behind it.
<Grid x:Name="LayoutRoot" Background="Transparent">
<Rectangle
VerticalAlignment="Top" HorizontalAlignment="Stretch"
Height="150" Fill="Red" />
<controls:Pivot Title="MY APPLICATION">
<controls:PivotItem Header="item1">
<Grid/>
</controls:PivotItem>
<controls:PivotItem Header="item2">
<Grid/>
</controls:PivotItem>
</controls:Pivot>
</Grid>
Upvotes: 2