We Keep Coding

How to customize Pivot headers?

I am new to Windows phone 8.1 app development, I want to know how to customize the pivot header with properties like Font, Foreground Colour, Size, etc. I can't find any of these properties. So, hope someone will help me.

Create a Resource Dictionary ( if you don't have one )
Add-New Item-Resource Dictionary
Apply it on your App.XAML
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!--
Styles that define common aspects of the platform look and feel
Required by Visual Studio project and item templates
-->
<ResourceDictionary Source="Assets/Style/CustomStyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Add this template to your Resource Dictionary
<Style x:Key="CustomPivotStyle" TargetType="Pivot">
<Setter Property="Margin" Value="0,0,0,0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="#FF1F1F1F"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Pivot">
<Grid x:Name="RootElement"
Background="{TemplateBinding Background}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Orientation">
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Style="{StaticResource PivotTitleContentControlStyle}"/>
<ScrollViewer x:Name="ScrollViewer" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="{TemplateBinding Padding}" Grid.Row="1" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" VerticalSnapPointsType="None" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalContentAlignment="Center" ZoomMode="Disabled">
<PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
<PivotHeaderPanel x:Name="Header"
Background="{TemplateBinding BorderBrush}">
<PivotHeaderPanel.RenderTransform>
<CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0"/>
</PivotHeaderPanel.RenderTransform>
</PivotHeaderPanel>
<ItemsPresenter x:Name="PivotItemPresenter">
<ItemsPresenter.RenderTransform>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0"/>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</PivotPanel>
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="TextBlock"
x:Key="CustomPivotHeader">
<Setter Property="FontSize" Value="20"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="Margin" Value="10,10,0,0"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
</Style>
Apply it to your pivot
<Pivot x:Name="pivot"
Margin="0,0,0,0"
Style="{StaticResource CustomPivotStyle}">
<Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Style="{StaticResource CustomPivotHeader}"/>
</DataTemplate>
</Pivot.HeaderTemplate>
</Pivot>

I'm using following code for my windows phone app, Brain Lightener. It should work :)
<phone:Pivot Foreground="#4b240a" FontFamily="Comic Sans MS">
<phone:Pivot.Title>
<TextBlock Text="Brain Lightener" FontFamily="Comic Sans MS" FontWeight="Bold"></TextBlock>
</phone:Pivot.Title>
<!--Pivot item one-->
<phone:PivotItem>
<phone:PivotItem.Header>
<TextBlock Text="Test" FontFamily="Comic Sans MS"></TextBlock>
</phone:PivotItem.Header>
</phone:PivotItem>
</phone:Pivot>
You don't have to change/code much for decorating your pivot page ;)

Changing background color of Windows Phone Listpicker in FullScreen Mode

I am trying to change background of my listpicker to some image. I was searching and I guess for do this I must implement my own version of listpicker, am I right? So I downloaded code from Windows Phone toolkit and get code for listpicker from it and other necessary things. I build my project and It's working but the problem is that I don't have rectangle where can I click to see choices in listpicker but I have list with choices in place where should be just that rectangle. What I am doing wrong? How can I fix this problem. Then I guess I could change ListPickerPage.xaml and use PickerPageUri property. Is it right? Thanks
Edit:
Code in xaml page with listpicker:
<customControls:ListPicker x:Name="LpkViolations" BorderBrush="{StaticResource PhoneForegroundBrush}"
SelectionChanged="LpkViolations_OnSelectionChanged"
FullModeItemTemplate="{StaticResource LpkFullItemTemplate}"
ItemTemplate="{StaticResource LpkItemTemplate}"
PickerPageUri="/Design/CustomControls/ListPickerPage.xaml">
and resources:
<phone:PhoneApplicationPage.Resources>
<converters:UpperConverter x:Key="upperConverter"></converters:UpperConverter>
<DataTemplate x:Name="LpkItemTemplate">
<TextBlock Text="{Binding Path=AppResources.add_user_violation_title, Source={StaticResource LocalizedStrings}}" />
</DataTemplate>
<DataTemplate x:Name="LpkFullItemTemplate">
<Grid Margin="0,0,0,36">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Points}" FontSize="48"
Foreground="DarkBlue"
VerticalAlignment="Top"
HorizontalAlignment="Center"
Width="50"
Visibility="{StaticResource PhoneLightThemeVisibility}"/>
<TextBlock Text="{Binding Points}" FontSize="48"
Foreground="SkyBlue"
VerticalAlignment="Top"
HorizontalAlignment="Center"
Width="50"
Visibility="{StaticResource PhoneDarkThemeVisibility}"/>
<StackPanel Grid.Column="1" VerticalAlignment="Top" >
<TextBlock Text="{Binding Label}" TextWrapping="Wrap"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
HorizontalAlignment="Left"
VerticalAlignment="Top" FontSize="{StaticResource PhoneFontSizeMedium}" FontWeight="Bold"
Foreground="{StaticResource PhoneForegroundBrush}"/>
<StackPanel Orientation="Horizontal">
<Image Source="/Assets/Images/List/ic_fine.png" Visibility="{Binding FineVisibility}"
Margin="12,4" />
<TextBlock Text="{Binding FineToView}" TextWrapping="Wrap"
Opacity="0.65" FontSize="{StaticResource PhoneFontSizeNormal}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
HorizontalAlignment="Left"
Foreground="{StaticResource PhoneForegroundBrush}"
VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Image Source="/Assets/Images/List/ic_administrative_fine.png" Visibility="{Binding AdministrativeFineVisibility}"
Margin="12,4" />
<TextBlock Text="{Binding AdministrativeFineToView}" TextWrapping="Wrap"
Opacity="0.65" FontSize="{StaticResource PhoneFontSizeNormal}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
VerticalAlignment="Center"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
ListPickerPage.xaml is exact same as in toolkit:
<phone:PhoneApplicationPage
x:Class="BodovySystem.Design.CustomControls.ListPickerPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
shell:SystemTray.IsVisible="True"
shell:SystemTray.BackgroundColor="{StaticResource PhoneChromeColor}"
toolkit:TiltEffect.IsTiltEnabled="True">
<phone:PhoneApplicationPage.Resources>
<Style x:Key="ListBoxItemCheckedStyle" TargetType="ListBoxItem" >
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Margin" Value="-6 0 0 -1"/>
<Setter Property="Padding" Value="12 0 0 0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyLight}"/>
<Setter Property="FontSize" Value="43"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<CheckBox IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected, Mode=TwoWay}"
Content="{TemplateBinding Content}"
x:Name="ContentContainer"
ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="{TemplateBinding Foreground}"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Margin}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Padding="{TemplateBinding Padding}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
<Grid Background="{StaticResource PhoneChromeBrush}" x:Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!-- Header Title -->
<TextBlock
x:Name="HeaderTitle"
Grid.Row="0"
FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeMedium}"
Foreground="{StaticResource PhoneForegroundBrush}"
Margin="24 12 12 12">
<TextBlock.Projection>
<PlaneProjection RotationX="-90"/>
</TextBlock.Projection>
</TextBlock>
<!-- List of Items -->
<ListBox
x:Name="Picker"
Grid.Row="1"
ItemsSource="{Binding}"
Opacity="0"
toolkit:TiltEffect.IsTiltEnabled="True"
Margin="24 12 0 0"
Tap="OnPickerTapped"/>
</Grid>
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="False">
<shell:ApplicationBarIconButton
IconUri="/Toolkit.Content/ApplicationBar.Check.png"
Text="DONE"/>
<shell:ApplicationBarIconButton
IconUri="/Toolkit.Content/ApplicationBar.Cancel.png"
Text="CANCEL"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>
Here is how looks result:
.

Use this style, This colors the fullModeGrid in Green. You can customize that by putting an image as the background-
<Style TargetType="toolkit:ListPicker" x:Key="customStyle123">
<Setter Property="Background" Value="White"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Margin" Value="{StaticResource PhoneTouchTargetOverhang}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:ListPicker">
<StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PickerStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneTextBoxEditBackgroundColor}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Foreground="{StaticResource PhoneSubtleBrush}"
FontSize="{StaticResource PhoneFontSizeNormal}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="0 0 0 8"/>
<Grid>
<Border
x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding Background}"
BorderThickness="2">
<Canvas x:Name="ItemsPresenterHost" MinHeight="46">
<ItemsPresenter x:Name="ItemsPresenter">
<ItemsPresenter.RenderTransform>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform"/>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</Canvas>
</Border>
<Popup x:Name="FullModePopup">
<Border Background="{StaticResource PhoneChromeBrush}">
<!-- Popup.Child should always be a Border -->
<!-- Set the background of this grid to any image, I am setting it to GREEN -->
<Grid Background="Green">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<ContentControl
Grid.Row="0"
Content="{TemplateBinding FullModeHeader}"
Foreground="{StaticResource PhoneForegroundBrush}"
FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeMedium}"
HorizontalAlignment="Left"
Margin="24 12 0 0"/>
<ListBox
x:Name="FullModeSelector"
Grid.Row="1"
ItemTemplate="{TemplateBinding FullModeItemTemplate}"
FontSize="{TemplateBinding FontSize}"
Margin="{StaticResource PhoneMargin}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
<!-- Ensures Sall containers will be available during the Loaded event -->
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
</Border>
</Popup>
</Grid>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
also, ListPicker UI Declaration
<toolkit:ListPicker ItemCountThreshold="1" Background="White" Width="180" Foreground="Black" Style="{StaticResource customStyle123}" Name="lpkCategories" Height="67" VerticalAlignment="Top">
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<TextBlock FontSize="28" Text="{Binding}" HorizontalAlignment="Left" />
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<TextBlock FontSize="36" Text="{Binding}" HorizontalAlignment="Left" />
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
Hope this helps.

Windows Phone 8, remove the Header of each PivotItem

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

Changing color of inner element in ControlTemplate

I have a template for Combobox, code is mostly from msdn documentation.
I want to change the color of the arrow to gray, when the combo box is disabled.
any ideas?
here's the code:
<!--ComboBoxStyle-->
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid DataContext="{Binding}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="0" BorderThickness="1" BorderBrush="{StaticResource AlpmGray}" Background="Transparent" />
<Border Grid.Column="0" CornerRadius="0" Margin="1" Background="White"/>
<ContentControl Content="{Binding ComboPath}"/>
<Path x:Name="Arrow" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z" Fill="{StaticResource AlpmRed}"/>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox"
TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
</ControlTemplate>
<Style x:Key="{x:Type ComboBox}" TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="MinWidth" Value="30" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="EditStates">
<VisualState x:Name="Editable">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="PART_EditableTextBox">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="ContentSite">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Uneditable" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ToggleButton x:Name="ToggleButton" Template="{StaticResource ComboBoxToggleButton}" Grid.Column="2"
Focusable="false"
ClickMode="Press"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay,
RelativeSource={RelativeSource TemplatedParent}}" DataContext="{Binding}" />
<ContentPresenter x:Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,23,3"
VerticalAlignment="Stretch"
HorizontalAlignment="Left">
</ContentPresenter>
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Margin="3,3,23,3"
Focusable="True"
Background="Transparent"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}" />
<Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True"
Focusable="False" PopupAnimation="Slide">
<Grid x:Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder" BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="{StaticResource AlpmColorLightGray}" />
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush Color="White" />
</Border.Background>
</Border>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border x:Name="Border" Padding="2" SnapsToDevicePixels="true" Background="White">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource AlpmColorLightGray}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource AlpmColorLightGray}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

I think the best way is to bind the Fill on the shape to the foreground of the toggle button, which you can either do per-instance, or for all combo boxes using this control template; this solution uses the latter:
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid DataContext="{Binding}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="0" BorderThickness="1" BorderBrush="{StaticResource AlpmGray}" Background="Transparent" />
<Border Grid.Column="0" CornerRadius="0" Margin="1" Background="White"/>
<ContentControl Content="{Binding ComboPath}"/>
<Path x:Name="Arrow" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z" Fill="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}">
</Path>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource TemplatedParent}}" Value="False">
<Setter Property="Foreground" Value="{StaticResource AlpmGray}"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource TemplatedParent}}" Value="True">
<Setter Property="Foreground" Value="{StaticResource AlpmRed}"></Setter>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
This binds the Fill to the TemplatedParent (in this case the ToggleButton), and thus the enabled state of the button (generally tied to the parent control).

How to get Specific Element of Style by code in Wpf c#

Hi I'm trying to use a template item into the code behind c#
I'm trying to access the PictureBox which is WindowsFormHost.
And then set it to what I want.
<Style x:Key="ScreenListBox" TargetType="{x:Type ToggleButton}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Padding" Value="2,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true" Margin="-0.001,0" Background="#FFABABAB" Width="120" Height="117">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="stackPanel">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected"/>
<VisualState x:Name="SelectedUnfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="InvalidFocused"/>
<VisualState x:Name="InvalidUnfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel Orientation="Vertical" Name="TestStackPanel" d:LayoutOverrides="Height">
<Grid Margin="3" Height="85" Name="TestGrid" Background="White">
<WindowsFormsHost Name="wrapper" Margin="0,0,0,0" Background="{x:Null}">
<Forms:PictureBox Name="Picture"></Forms:PictureBox>
</WindowsFormsHost>
<StackPanel x:Name="stackPanel" Margin="0" Width="Auto" Opacity="0">
<DockPanel Margin="0" Width="Auto" Height="45">
<Rectangle Fill="#FFD8D8D8" Margin="0" Width="16" HorizontalAlignment="Left"/>
<Rectangle Fill="#FFEBE77A" Margin="0" Width="17" HorizontalAlignment="Left"/>
<Rectangle Fill="#FF60CDE9" Margin="0" Width="16" HorizontalAlignment="Left"/>
<Rectangle Fill="#FF60E98E" Margin="0" Width="16" HorizontalAlignment="Left"/>
<Rectangle Fill="#FFC65F9C" Margin="0" Width="16" HorizontalAlignment="Left"/>
<Rectangle Fill="#FFC43232" Margin="0" Width="17" HorizontalAlignment="Left"/>
<Rectangle Fill="#FF0A37A5" Margin="0" Width="16" HorizontalAlignment="Left"/>
</DockPanel>
<DockPanel HorizontalAlignment="Stretch" Height="5" Width="Auto">
<Rectangle Fill="#FF0A37A5" Margin="0" Width="16" HorizontalAlignment="Left" Height="Auto"/>
<Rectangle Fill="Black" Margin="0" Width="16" HorizontalAlignment="Left" Height="Auto"/>
<Rectangle Fill="#FFC65F9C" Margin="0" Width="17" HorizontalAlignment="Left" Height="Auto"/>
<Rectangle Fill="Black" Margin="0" Width="16" HorizontalAlignment="Left" Height="Auto"/>
<Rectangle Fill="#FF60CDE9" Margin="0" Width="16" HorizontalAlignment="Left" Height="Auto"/>
<Rectangle Fill="Black" Margin="0" Width="16" HorizontalAlignment="Left" Height="Auto"/>
<Rectangle Fill="#FFD8D8D8" Margin="0" Width="17" HorizontalAlignment="Left" Height="Auto"/>
</DockPanel>
<DockPanel HorizontalAlignment="Stretch" Height="15" VerticalAlignment="Bottom">
<TextBlock x:Name="textBlock" TextWrapping="Wrap" Opacity="0" FontWeight="Bold" Width="60" TextAlignment="Center" FontSize="9.333"/>
</DockPanel>
</StackPanel>
</Grid>
<Grid Margin="5,0" Height="20" VerticalAlignment="Bottom">
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Bottom" Margin="15,0" HorizontalAlignment="Center">
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource WrappingStyle}"/>
</ContentPresenter.Resources>
</ContentPresenter>
<Button Content="Button" Margin="0" VerticalAlignment="Top" HorizontalAlignment="Right" Style="{DynamicResource Edit}"/>
<Path x:Name="path" Data="F1M29.2007,72.9482L25.9947,75.2372L25.9947,73.7922L18.5627,73.7922L18.5627,78.9302L25.9947,78.9302L25.9947,77.4862L29.2007,79.7752z" Fill="#FF231F20" Height="9.327" Stretch="Fill" Width="14.534" HorizontalAlignment="Left" Margin="0" VerticalAlignment="Top" Opacity="0"/>
<Rectangle x:Name="rectangle" Fill="#FF231F20" Margin="0" Width="20" Height="20" Opacity="0" VerticalAlignment="Top" d:LayoutOverrides="Width, Height, VerticalMargin" HorizontalAlignment="Left"/>
</Grid>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
<Setter Property="Opacity" TargetName="path" Value="1"/>
<Setter Property="Background" TargetName="Bd" Value="#FF26A1E5"/>
</Trigger>
<Trigger Property="Selector.IsSelected" Value="False"/>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Whenever I use this style in C# I do :
var listboxitem = new ToggleButton();
listboxitem.Style = (Style)FindResource("ScreenListBox");
VideoListBox.Items.Add(listboxitem);
//Here I want to be able to use the PictureBox in ScreenListBox.
To pass it to another function.
I've been trying with Template.FindName and it didn't work.
Could anyone have a look and try to bring me into the right direction.
Thanks.

Hi I guess only one way to implement this will be to create a custom Control which you can inherit form ToggleButton. Somewhere you should define control template for your control (like generic.xaml or App.xaml). In your custom control you should override OnApplyTemplate method, where you can get access at least to the WindowsFormsHost (but maybe to PictureBox as well) with FindName method.
You can also try to use your code, before you will try to get access to PictureBox - try to invoke ApplyTemplate, maybe this will force ToggleButton to load everything and it will give you access to it's children.