I struggled with this problem for hours. I want to use the control Pivot as a Pager in Windows Phone, so I want to remove the Header of each PivotItem. What I have done is to create a DataTemplage for the Pivot's HeaderTemplate, as below:
<DataTemplate x:Name="DataTemplateScrollTestItemHeader"
x:Key="DataTemplateScrollTestItemHeader">
<TextBlock
Height="0"
Width="0"
Margin="0,0,0,0"
Padding="0,0,0,0"
Text=""/>
</DataTemplate>
In code, I set the HeaderTemplate to this DataTemplate:
PivotTestType.HeaderTemplate = DataTemplateScrollTestItemHeader;
What happened is the header text is disappeared, but the header still occupied some space. I have read this：
Windows Phone 8: remove pivot header
But it's the same with my method. It can't remove the space of the Header.
Anyone know how to handle this?
I think the best would be to underdstand how the pivot is constructed (with this you will be able to do whatever you want with your pivot), I wrote a small example which may help you:
<phone:Pivot Name="myPivot" VerticalAlignment="Stretch" Title="myPivot">
<phone:Pivot.Template>
<ControlTemplate TargetType="phone:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}"
Content="{TemplateBinding Title}" Margin="10,0,0,0"/>
<primitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1" Margin="0,5,0,5"/>
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</phone:Pivot.Template>
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<Grid Height="30">
<TextBlock Text="{Binding}" FontSize="{StaticResource PhoneFontSizeMediumLarge}" Margin="0,0,10,0"/>
</Grid>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:PivotItem Margin="0">
</phone:PivotItem>
</phone:Pivot>
With the code above you can change height, background color etc. of pivot title, header itempresenter and so on.
And don't forget to add xmlns-primitives at the beginning of xaml:
xmlns:primitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone"
You can also find more on this site or MSDN: this, MSDN.
Remove all Headers from PivotItems and build (F6) the application.
<phone:Pivot Title="MY APPLICATION">
<phone:PivotItem>
// Some code
</phone:PivotItem>
<phone:PivotItem>
// Some code
</phone:PivotItem>
</phone:Pivot>
Hy, Here is my solution to remove the header and title :
<phone:PhoneApplicationPage.Resources>
<Style x:Key="PivotWithoutHeaderTitleStyle" TargetType="phone:Pivot">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="Transparent"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentControl ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" HorizontalAlignment="Left" Margin="0" Height="0"/>
<Primitives:PivotHeadersControl x:Name="HeadersListElement" Margin="0" Height="0"/>
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ImagePivotItemStyle" TargetType="phone:PivotItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:PivotItem">
<Grid Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Pivot">
<VisualState x:Name="Right"/>
<VisualState x:Name="Left"/>
<VisualState x:Name="Center"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources> <phone:Pivot Name="ImagesPivot" Margin="0,0,0,0" Style="{StaticResource PivotWithoutHeaderTitleStyle}" ItemContainerStyle="{StaticResource ImagePivotItemStyle}">
<phone:Pivot.TitleTemplate>
<DataTemplate/>
</phone:Pivot.TitleTemplate>
<phone:Pivot.HeaderTemplate>
<DataTemplate/>
</phone:Pivot.HeaderTemplate>
<phone:Pivot.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Grid>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
Hope that will help
Related
Some functions change the value of a TextBlock in the ListView. I want to access TextBlock value at the end of these functions. How can I do it?
ListView code :
<ListView BorderThickness="0" x:Name="OrderList">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Grid Background="{TemplateBinding Background}">
<Border BorderBrush="{StaticResource MenuluxRedBrush}" BorderThickness="0,0,0,1" Height="30">
<local:OrderPopUpItem/>
</Border>
<GridViewRowPresenter Grid.RowSpan="2"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
OrderPopUpItem.xaml code :
<Grid Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding productName}"
VerticalAlignment="Center"
Margin="15,0,0,0"
FontSize="20"/>
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Source="/Images/PopUp/icon_minus_red.png"
MouseLeftButtonUp="azalt"
Name="minusIcon"
Height="30"/>
<TextBlock Text="0"
Grid.Column="1"
Name="amountText"
VerticalAlignment="Center"
HorizontalAlignment="Center"
FontSize="20"/>
<Image Source="/Images/PopUp/icon_plus_red.png"
MouseLeftButtonUp="arttir"
Name="plusIcon"
Grid.Column="2"
Height="30"/>
</Grid>
If i understand your question correctly, You can achieve this behind code with C#. You should add the code below to your source code.
//Get ListViewItem
ListViewItem item = (ListViewItem)OrderList.Items.GetItemAt(SatirIndex);
//Get Content from item (use if you want read items value)
string deger = item.content;
//Set items content (use if you want set items value)
item.content = amountText.Text;
Is it possible to create some sort of base expander style and override the background color of the header in a derived style?
In my application I'm using expanders a lot and I would like to change the background color of the header. I know I could just copy&paste my style and edit the color, but it would be nicer to just create a new style based on the "base style" and setting the header's background color.
But I do not know how to access this color.
It's the color of this line: below I'd like to change (the border in the header): Border Name="border"... I cannot access "border" in the setter of the derived style...
This is my (base) style:
<Style TargetType="Expander" x:Key="ExpanderStyle">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextColor}}"/>
<Setter Property="Template">
<Setter.Value>
<!-- Control template for expander -->
<ControlTemplate TargetType="Expander" x:Name="exp">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Name="ContentRow" Height="0"/>
</Grid.RowDefinitions>
<Border Name="border" Grid.Row="0" Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" BorderThickness="1" CornerRadius="4,4,0,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<ToggleButton x:Name="tb" FontFamily="Marlett" FontSize="9.75" Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" Foreground="Black" Grid.Column="1" Content="u" IsChecked="{Binding Path=IsExpanded,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" />
<ContentPresenter x:Name="HeaderContent" Grid.Column="0" Margin="4" ContentSource="Header" RecognizesAccessKey="True" />
</Grid>
</Border>
<Border x:Name="Content" Grid.Row="1" BorderThickness="1,0,1,1" CornerRadius="0,0,4,4" >
<ContentPresenter Margin="4" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=Content,Path=Height}" />
<Setter Property="Content" TargetName="tb" Value="t"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I would like to do something like this:
<Style x:Key="ExpanderStyleRed" BasedOn="{StaticResource ExpanderStyle}" TargetType="Expander">
<Setter Property="???" Value="Red"/>
<Style>
Use TemplateBinding:
<Style TargetType="Expander" x:Key="ExpanderStyle">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextColor}}"/>
<Setter Property="Template">
<Setter.Value>
<!-- Control template for expander -->
<ControlTemplate TargetType="Expander" x:Name="exp">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Name="ContentRow" Height="0"/>
</Grid.RowDefinitions>
<Border Name="border" Grid.Row="0" Background="{TemplateBinding Background}" BorderThickness="1" CornerRadius="4,4,0,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<ToggleButton x:Name="tb" FontFamily="Marlett" FontSize="9.75" Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" Foreground="Black" Grid.Column="1" Content="u" IsChecked="{Binding Path=IsExpanded,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" />
<ContentPresenter x:Name="HeaderContent" Grid.Column="0" Margin="4" ContentSource="Header" RecognizesAccessKey="True" />
</Grid>
</Border>
<Border x:Name="Content" Grid.Row="1" BorderThickness="1,0,1,1" CornerRadius="0,0,4,4" >
<ContentPresenter Margin="4" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=Content,Path=Height}" />
<Setter Property="Content" TargetName="tb" Value="t"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ExpanderStyleRed" BasedOn="{StaticResource ExpanderStyle}" TargetType="Expander">
<Setter Property="Background" Value="#2fff0000"/>
</Style>
And then:
<Grid>
<Expander x:Name="expander1" Style="{DynamicResource ExpanderStyle}" Header="Expander" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="7,10,0,0" Height="108">
<TextBlock Width="250" Height="150" TextWrapping="Wrap">
asklsaklsa saaskklsaklas alsaklalkjd
asklsaklsaklsa saklsaklsakl jsajkjska
saklsaklsakl sasa
</TextBlock>
</Expander>
<Expander x:Name="expander2" Style="{DynamicResource ExpanderStyleRed}" Header="Expander" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="12,126,0,0" Height="133">
<TextBlock Width="250" Height="150" TextWrapping="Wrap">
asklsaklsa saaskklsaklas alsaklalkjd
asklsaklsaklsa saklsaklsakl jsajkjska
saklsaklsakl sasa
</TextBlock>
</Expander>
</Grid>
I have a resource defined in a resource dictionary that looks like this:
<x:Int32 x:Key="HubSectionHeaderCharacterSpacing">-10</x:Int32>
<x:Double x:Key="HubSectionHeaderFontSize">19</x:Double>
<Thickness x:Key="HubSectionHeaderMarginThickness">-1,5,0,31.5</Thickness>
<Thickness x:Key="HubSectionMarginThickness">19,0,0,0</Thickness>
<Style x:Key="MainMenuHubSectionStyle2" TargetType="HubSection">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HubSection">
<Grid Background="WhiteSmoke">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.RenderTransform>
<CompositeTransform x:Name="WrappingTransform"/>
</Grid.RenderTransform>
<Viewbox HorizontalAlignment="Center" Margin="0">
<Image Source="ms-appx:///Assets/Logos/Logo.png" Stretch="Fill"/>
</Viewbox>
<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="0" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And I have a HubSection that uses this style. How to programatically access this resource and replace the
<Viewbox HorizontalAlignment="Center" Margin="0">
<Image Source="ms-appx:///Assets/Logos/Logo.png" Stretch="Fill"/>
</Viewbox>
with some other image?
That's a dirty hack, but since you have only one property to replace, you can take advantage of the Tag property to store your image url:
<Style x:Key="MainMenuHubSectionStyle2" TargetType="HubSection">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HubSection">
<Grid Background="WhiteSmoke">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.RenderTransform>
<CompositeTransform x:Name="WrappingTransform"/>
</Grid.RenderTransform>
<Viewbox HorizontalAlignment="Center" Margin="0">
<Image Source="{TemplateBinding Tag}" Stretch="Fill"/>
</Viewbox>
<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="0" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then you can use it like this:
<HubSection Tag="ms-appx:///Assets/Logos/Logo.png">
</HubSection>
Otherwise, you probably would have to make your own type, inheriting from HubSection and adding the necessary properties.
Alternatively, you could use good ol' databinding, as suggested by RenDishen. For instance:
<Style x:Key="MainMenuHubSectionStyle2" TargetType="HubSection">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HubSection">
<Grid Background="WhiteSmoke">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.RenderTransform>
<CompositeTransform x:Name="WrappingTransform"/>
</Grid.RenderTransform>
<Viewbox HorizontalAlignment="Center" Margin="0">
<Image Source="{Binding Path=Logo}" Stretch="Fill"/>
</Viewbox>
<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="0" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then you would have to assign to the DataContext property of your HubSection an object that has a Logo property, and fill it accordingly.
I've try to make the header of pivot stay at center (in image, head1 was align left). I try to change the style of pivot but it didn't work.
Here's the custom style ( I tried to add HorizontalAlignment="Center" to every where related to the header of pivot, but neither of them worked )
<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
<Canvas HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
<Style x:Key="PivotHeaderItemStyle1" TargetType="Primitives:PivotHeaderItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="21,0,1,0"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Primitives:PivotHeaderItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="Center" Margin="{TemplateBinding Padding}" Opacity="{StaticResource PhonePivotUnselectedItemOpacity}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="PivotStyle1" TargetType="phone: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 HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="{TemplateBinding Background}" Grid.RowSpan="3"/>
<ContentControl ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" HorizontalAlignment="Left" Margin="24,17,0,-7" Style="{StaticResource PivotTitleStyle}"/>
<Primitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1" ItemsPanel="{StaticResource ItemsPanelTemplate1}" ItemContainerStyle="{StaticResource PivotHeaderItemStyle1}" />
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And in Page.xaml:
<phone:Pivot Style="{StaticResource PivotStyle1}">
<phone:PivotItem x:Name="head1">
<phone:PivotItem.Header>
<TextBlock Text="head1" FontSize="30" HorizontalAlignment="Center" TextAlignment="Center"/>
</phone:PivotItem.Header>
<Grid/>
</phone:PivotItem>
<phone:PivotItem x:Name="head2">
<phone:PivotItem.Header>
<TextBlock Text="head2" FontSize="30" HorizontalAlignment="Center" TextAlignment="Center"/>
</phone:PivotItem.Header>
</phone:PivotItem>
<phone:PivotItem x:Name="head3">
<phone:PivotItem.Header>
<TextBlock Text="head3" FontSize="30" HorizontalAlignment="Center" TextAlignment="Center"/>
</phone:PivotItem.Header>
</phone:PivotItem>
<phone:PivotItem x:Name="head4">
<phone:PivotItem.Header>
<TextBlock Text="head4" FontSize="30" HorizontalAlignment="Center" TextAlignment="Center"/>
</phone:PivotItem.Header>
</phone:PivotItem>
<phone:PivotItem x:Name="head5">
<phone:PivotItem.Header>
<TextBlock Text="head5" FontSize="30" HorizontalAlignment="Center" TextAlignment="Center"/>
</phone:PivotItem.Header>
</phone:PivotItem>
</phone:Pivot>
I have a style
<Style x:Key="PivotStyle1" TargetType="phone: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="phone:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache" Grid.RowSpan="3"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image
Height="45"
HorizontalAlignment="Left"
Margin="12,0,0,0"
VerticalAlignment="Bottom"
Source="/Assets/Icons/MyTasks.png" />
<ContentControl
ContentTemplate="{TemplateBinding TitleTemplate}"
Content="{TemplateBinding Title}"
Grid.Column="1"
HorizontalAlignment="Left"
Margin="10,0,0,-7"
VerticalAlignment="Center"
Style="{StaticResource PivotTitleStyle}"/>
<Image
Grid.Column="2"
Height="55" Margin="0,10,20,0"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Source="/Assets/Icons/Settings.png"/>
</Grid>
<Primitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1"/>
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}"
Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This is my pivot code:
<phone:Pivot Title="MY TASKS" Style="{StaticResource PivotStyle1}" >
<!--Pivot item one-->
<phone:PivotItem Header="all">
</phone:PivotItem>
<phone:PivotItem Header="assigned">
</phone:PivotItem>
<phone:PivotItem Header="overdue">
</phone:PivotItem>
</phone:Pivot>
I want to change the color of pivot items. pivot item header "all" in red color, pivot item "assigned" in green color. I have tried to change the background, but that changes the full background. please suggest.
This one worked for me.
<phone:PivotItem>
<phone:PivotItem.Header>
<TextBlock Text="assigned" Foreground="#FF145377"></TextBlock>
</phone:PivotItem.Header>
</phone:PivotItem>