Howdy,
I would like to generate in my application several PivotItems in a pivotelement. The generation is proceeding fine, however I don't know how I can apply a template to those Pivot Elements.
I thought I would need to use:
pivotItem.ContentTemplate = (DataTemplate)Ressources["KantinenUebersicht"];
But that is only producing an empty page.
My code in the ressource file looks the following:
inserted my whole ressources File
<.ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DataTemplate x:Key="KantinenTemplate">
<StackPanel VerticalAlignment="Top">
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding name}" FontSize="{StaticResource PhoneFontSizeLarge}" Margin="8,0,0,0" VerticalAlignment="Top"/>
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding entfernung}" Margin="24,0,0,0" FontSize="{StaticResource PhoneFontSizeSmall}" VerticalAlignment="Bottom"/>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="KantinenUebersicht">
<Grid>
<TextBlock x:Name="KantinenName" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Text="" RenderTransformOrigin="0.566,0.407" Margin="0,0,8,0" Height="55" VerticalAlignment="Top">
<TextBlock.Foreground>
<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
</TextBlock.Foreground>
</TextBlock>
<TextBlock x:Name="sdfsdf" HorizontalAlignment="Left" Height="40" Margin="8,59,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="196"/>
<TextBlock x:Name="lblGeoefsdfsdffnet" Height="40" Margin="208,59,8,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
</Grid>
</DataTemplate></ResourceDictionary.>
Had to insert . in the first tags...
What you're trying to do is correct.
In your question you have an extra "S" in "Resources" which could be the issue.
If I take the code from your question, I can add it to the page:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="KantinenUebersicht">
<Grid>
<TextBlock x:Name="KantinenName" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Text="" RenderTransformOrigin="0.566,0.407" Margin="0,0,8,0" Height="55" VerticalAlignment="Top">
<TextBlock.Foreground>
<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
</TextBlock.Foreground>
</TextBlock>
<TextBlock x:Name="lblEntfernung" HorizontalAlignment="Left" Height="40" Margin="8,59,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="196"/>
<TextBlock x:Name="lblGeoeffnet" Height="40" Margin="208,59,8,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
and then use it when creating a new item:
var newItem = new PivotItem { Header = "Added" };
newItem.ContentTemplate = (DataTemplate)Resources["KantinenUebersicht"];
MyPivot.Items.Add(newItem);
Works on my machine (emulator).
Update:
If you want to add the resource to a separate file you can do so like:
ResourceDictionary.xaml:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<DataTemplate x:Key="KantinenUebersicht">
<Grid>
<TextBlock x:Name="KantinenName" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Text="" RenderTransformOrigin="0.566,0.407" Margin="0,0,8,0" Height="55" VerticalAlignment="Top">
<TextBlock.Foreground>
<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
</TextBlock.Foreground>
</TextBlock>
<TextBlock x:Name="lblEntfernung" HorizontalAlignment="Left" Height="40" Margin="8,59,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="196"/>
<TextBlock x:Name="lblGeoeffnet" Height="40" Margin="208,59,8,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
</Grid>
</DataTemplate>
</ResourceDictionary>
Then you must reference this external file in the page which wishes to use this file.
<phone:PhoneApplicationPage.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="\ResourceDictionary.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</phone:PhoneApplicationPage.Resources>
Related
I am trying to build a 4 column list view to display some data in the Windows Universal App. I have the following Listview but the list view is not scrolling vertically in spite of data being there for scroll. I am not sure what I am doing wrong. Any pointers or help is appreciated..
XAML Code
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ChennaiTrains"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ViewModel="using:ChennaiTrains.ViewModel"
xmlns:Model="using:ChennaiTrains.Model"
x:Class="ChennaiTrains.MainPage"
xmlns:c="using:ChennaiTrains.Controls"
mc:Ignorable="d" Loaded="Page_Loaded">
<Page.BottomAppBar>
<CommandBar>
<AppBarButton Icon="Find" Click="AppBarButton_Click"/>
</CommandBar>
</Page.BottomAppBar>
<Page.Background>
<ImageBrush ImageSource="..\Assets\Images\marina.jpg" Stretch="UniformToFill"></ImageBrush>
</Page.Background>
<Grid>
<Grid x:Name="body">
<StackPanel>
<Grid x:Name="titlebar">
<StackPanel Orientation="Horizontal" Background="Transparent">
<Button x:Name="menu"
VerticalAlignment="{x:Bind VerticalContentAlignment}"
HorizontalAlignment="{x:Bind HorizontalContentAlignment}"
FontSize="30"
FontFamily="Segoe MDL2 Assets"
Content="" Click="HamburgerButton_Click"
Background="Transparent" Height="42" Visibility="Visible"/>
<TextBlock x:Name="content"
FontSize="25"
Text="Chennai Compass" Height="42" Visibility="Visible"
VerticalAlignment="{x:Bind VerticalContentAlignment}"
HorizontalAlignment="{x:Bind HorizontalContentAlignment}" Margin="0"/>
</StackPanel>
</Grid>
<SplitView x:Name="MySplitView"
DisplayMode="Inline"
OpenPaneLength="150"
CompactPaneLength="50"
IsPaneOpen="False" Background="Transparent" BorderBrush="Black">
<SplitView.Pane>
<StackPanel Background="Transparent">
<!-- <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click" /> -->
<StackPanel Orientation="Horizontal" Background="Transparent">
<Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Visibility="Collapsed"/>
<TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" Visibility="Collapsed" />
</StackPanel>
<StackPanel Orientation="Horizontal" Background="Transparent">
<Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Visibility="Collapsed"/>
<TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" Visibility="Collapsed" />
</StackPanel>
<StackPanel Orientation="Horizontal" Background="Transparent">
<Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Visibility="Collapsed"/>
<TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" Visibility="Collapsed" />
</StackPanel>
</StackPanel>
</SplitView.Pane>
<Grid>
<AutoSuggestBox AllowDrop="True" x:Name="fromTextBox"
PlaceholderText="Enter the starting point"
QueryIcon="Find" TextChanged="DestinationBox_TextChanged"
SuggestionChosen="AutoSuggestBox_SuggestionChosen"
QuerySubmitted="AutoSuggestBox_QuerySubmitted"
TextMemberPath="StationName"
>
<AutoSuggestBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="2">
<TextBlock Text="{Binding StationName}" />
</StackPanel>
</DataTemplate>
</AutoSuggestBox.ItemTemplate>
<AutoSuggestBox.DataContext>
<ViewModel:AutoSuggestBoxVM/>
</AutoSuggestBox.DataContext>
</AutoSuggestBox>
<AutoSuggestBox x:Name="DestinationBox"
QueryIcon="Find"
DisplayMemberPath="{Binding StationList.StationName}"
TextMemberPath="StationName"
TextChanged="DestinationBox_TextChanged"
SuggestionChosen="DestinationBox_SuggestionChosen"
PlaceholderText="Enter the destination" Margin="0,60,0,0">
<AutoSuggestBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="2">
<TextBlock Text="{Binding StationName}" />
</StackPanel>
</DataTemplate>
</AutoSuggestBox.ItemTemplate>
<AutoSuggestBox.DataContext>
<ViewModel:AutoSuggestBoxVM/>
</AutoSuggestBox.DataContext>
</AutoSuggestBox>
<Grid x:Name="resultGrid" Margin="0,140,2,0">
<ListView x:Name="resultsList" ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollMode="Enabled" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Margin" Value="5"/>
<Setter Property="Padding" Value="15"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.Resources>
<DataTemplate x:Key="TimeTemplate">
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Grid.Row="0">
<TextBlock Text="Start at:" Margin="0,0,5,0"></TextBlock>
<TextBlock x:Name="startAt" Text="{Binding Time}" />
<TextBlock FontFamily="Segoe MDL2 Assets" Margin="20,0,5,0" Text="">
</TextBlock>
<TextBlock x:Name="duration" Text="{Binding Duration}"/>
<TextBlock Text="Reach by:" Margin="-212,35,0,0"></TextBlock>
<TextBlock x:Name="EndPoint" Margin="-145,35,0,0" Text="{Binding DestinationTime}" />
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
Margin="-75,35,0,0"></TextBlock>
<TextBlock x:Name="trainType" Margin="-55,35,0,0" Text="{Binding TrainType}" />
</StackPanel>
</Grid>
</DataTemplate>
</ListView.Resources>
<ListView.HeaderTemplate>
<DataTemplate>
<TextBlock x:Name="headerText" Text="Next available Trains"/>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<StaticResource ResourceKey="TimeTemplate"/>
</ListView.ItemTemplate>
<ListView.DataContext>
<Model:ResultListModel/>
</ListView.DataContext>
</ListView>
</Grid>
</Grid>
</SplitView>
</StackPanel>
</Grid>
</Grid>
</Page>
Your problem is the StackPanel that contains the titlebar and SplitView. Content inside of a StackPanel is not confined to any space and it will stretch on forever. In your case this means the SplitView and therefore the ListView inside it are stretching forever. Without being confined the ListView doesn't believe it needs to scroll.
The fix is to use a Grid with Rows instead. I would add Grid RowDefinitions into your body Grid with the titlebar in row 0 and the SplitView in row 1 and remove the StackPanel just inside the body Grid. That will get your scrolling working. Paraphrasing your code, the row definitions would look like this
<Grid x:Name="body">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid x:Name="titlebar" Grid.Row="0">
</Grid>
<SplitView x:Name="MySplitView" Grid.Row="1">
</SplitView>
</Grid>
I am using ListPicker from windows phone toolkit. My options are pretty lengthy so my ItemTemplate is,
<DataTemplate>
<TextBlock TextWrapping="Wrap"/>
</DataTemplate>
Now, when I select a lengthy option(say three lines) in Expansion Mode (less then 5 options) it is working good as expected, but when I Use FullMode(more than 5 items) it is not wrapped in the ListPicker.
To be more clear, It is wrapped as expected in the FullModePage but it is not within the control.
<toolkit:ListPicker Margin="0" MinHeight="70" toolkit:TiltEffect.SuppressTilt="True" Template="{StaticResource ListPickerControlCustomTemplate}" HorizontalAlignment="Stretch" VerticalAlignment="Top" FontFamily="{StaticResource RegularFont}"
SelectionChanged="SharedAppsCategoryListPicker_OnSelectionChanged" Name="SharedAppsCategoryListPicker"
LayoutUpdated="SharedAppsCategoryListPicker_OnLayoutUpdated" >
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,20,0">
<TextBlock TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="20,15,120,15" FontSize="20" Text="{Binding groupname}" Foreground="{StaticResource ListPickerForegroundColor}"></TextBlock>
<Rectangle Margin="20,10,0,-11" Height="0.5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Stroke="{StaticResource ListPickerDividerColor}" StrokeThickness="0.5" />
</Grid>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<Grid Margin="0,0,20,0">
<TextBlock MaxWidth="250" Width="250" TextWrapping="Wrap" FontSize="20" Margin="0,0,120,0" VerticalAlignment="Center" Text="{Binding groupname}" Foreground="{StaticResource ListPickerForegroundColor}" FontFamily="{StaticResource RegularFont}"></TextBlock>
</Grid>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
you would be needed to give width for the Textblock after then Text Would be Wrapped if content is larger than the width of the Textblock.
try this :
<DataTemplate>
<TextBlock TextWrapping="Wrap" width=200/>
</DataTemplate>
Edit:
I have Implemeted it this way
XAML:
<toolkit:ListPicker Margin="0" MinHeight="70" toolkit:TiltEffect.SuppressTilt="True" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="SharedAppsCategoryListPicker" >
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,20,0">
<TextBlock Width="300" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="20,15,120,15" FontSize="20" Text="{Binding}" ></TextBlock>
</Grid>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<Grid Margin="0,0,20,0">
<TextBlock Width="400" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" VerticalAlignment="Center" Text="{Binding}" ></TextBlock>
</Grid>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
Images of O/P:
I have this code:
<ListBox x:Name="lisbox1" Margin="-24,0,-9,0" CacheMode="BitmapCache" ItemsSource="{Binding Teacher}" HorizontalAlignment="Right" MouseLeftButtonUp="lisbox1_MouseLeftButtonUp" SelectionChanged="lisbox1_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,-35">
<Image x:Name="image1" Stretch="Fill" Source="ticket.png" Margin="-15,-16,3,21"/>
<TextBlock x:Name="asda" Margin="56,50,0,0" TextWrapping="Wrap" TextAlignment="Left" Text="{Binding lastname}" Style="{StaticResource PhoneTextLargeStyle}" Height="50" VerticalAlignment="Top" HorizontalAlignment="Left" Width="264" />
<TextBlock Margin="56,106,43,90" TextWrapping="Wrap" TextAlignment="Left" Text="{Binding firstname}" Style="{StaticResource PhoneTextLargeStyle}" />
<TextBlock Margin="0,50,43,147" Text="{Binding auditnumb}" Style="{StaticResource PhoneTextLargeStyle}" RenderTransformOrigin="0.515,-1.286" HorizontalAlignment="Right" Width="98" />
<Border Background="Silver" BorderThickness="1,1,1,1" Height="40" CornerRadius="20,20,20,20" Margin="56,3,60,0" VerticalAlignment="Top">
<TextBlock TextWrapping="Wrap" Text="{Binding subname}" TextAlignment="Center" VerticalAlignment="Top" Style="{StaticResource PhoneTextTitle3Style}"/>
</Border>
<Border BorderThickness="1" Height="40" Background="Green" Width="69" CornerRadius="25,25,25,25" Margin="316,154,61,41" Name="border1" >
<TextBlock Text="{Binding End}" TextWrapping="Wrap" TextAlignment="Center" Style="{StaticResource PhoneTextTitle3Style}" Width="69" Margin="-2,1,-3,-1"/>
</Border>
<Border BorderThickness="1" Background="Red" CornerRadius="25,25,25,25" Name="border2" Height="40" Width="69" Margin="230,154,147,41" >
<TextBlock TextAlignment="Center" TextWrapping="Wrap" Text="{Binding Start}" Style="{StaticResource PhoneTextTitle3Style}" Width="69" Margin="-2,1,-3,1"/>
</Border>
<Border Background="WhiteSmoke" CornerRadius="40" BorderThickness="1" Height="40" HorizontalAlignment="Left" Margin="16,88,0,0" Name="border3" VerticalAlignment="Top" Width="40" >
<TextBlock Margin="5" Foreground="Black" TextAlignment="Center" TextWrapping="Wrap" Text="{Binding PairNumber}" Width="28" RenderTransformOrigin="0.304,-0.462" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" Height="28" VerticalAlignment="Top"/>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
How to change the image when you select an item from the listbox? I have tried using VisualStateManager, but nothing happens.
It's hard to tell the best way without more code, but one way to do this is to add a property for the image path to the 'Teacher' class and bind the image source to it. Then when the item is clicked, change the image path in the Teacher object. (make sure your teacher class correctly supports OnPropertyChanged() for the image path property).
Use the following code to change the image source in C# (just put it after the desired event handler)
var image = (Image)sender;
image.Source = new Uri("/AppName;component/Images/imageName.png", UriKind.Relative)
Make sure that the image you want to use is saved to your Image folder
(Replace spaces in your app name with %20)
Im currently trying to add some Style to my Hyperlinkbutton, but cannot get it to work.
After some searching, I found this Tutorial, but even after copying the whole code (and only changing the picture) it doesnt work for me. My SDK-Target is 7.5.
Here my Code:
<ScrollViewer>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<HyperlinkButton NavigateUri="/Views/PanoramaPage.xaml" Content="Panorama" Foreground="{StaticResource PhoneAccentBrush}"/>
<HyperlinkButton NavigateUri="/Views/PanoramaPage.xaml" Content="Pivot" Foreground="{StaticResource PhoneAccentBrush}"/>
<HyperlinkButton Name="hyperlinkButton1" NavigateUri="/Views/PanoramaPage.xaml" >
<Border BorderBrush="White" BorderThickness="5" Padding="10">
<StackPanel Orientation="Horizontal">
<Image Width="60" Source="/Presentation;component/Images/refresh.png" />
<TextBlock VerticalAlignment="Center" Text="Go to View.xaml"/>
</StackPanel>
</Border>
</HyperlinkButton>
</StackPanel>
</ScrollViewer>
Tutorial-Url:
http://www.imaginativeuniversal.com/blog/post/2010/07/05/Navigating-around-windows-phone-7.aspx
The default control template for the HyperlinkButton is a TextBlock, so all it can handle is text!
One way to go around this is to change the control template, like this:
<HyperlinkButton Name="hyperlinkButton1" NavigateUri="/Views/PanoramaPage.xaml">
<HyperlinkButton.Template>
<ControlTemplate TargetType="HyperlinkButton">
<Border BorderBrush="White" BorderThickness="5" Padding="10">
<StackPanel Orientation="Horizontal">
<Image Width="60" Source="/Presentation;component/Images/refresh.png" />
<TextBlock VerticalAlignment="Center" Text="Go to View.xaml"/>
</StackPanel>
</Border>
</ControlTemplate>
</HyperlinkButton.Template>
</HyperlinkButton>
my problem is how can i set listbox which has itemtemplate ,and it also itemteplate of pivot
.i don't have any idea to doing this but it is a need of my project .one another is how to set pivot header . i m trying to do something like that
<controls:Pivot Height="779" Name="m" >
<controls:Pivot.Background>
<ImageBrush ImageSource="/WindowsPhoneApplication7;component
/Images/S.jpeg" />
</controls:Pivot.Background>
<!--<controls:PivotItem Name="all" >-->
<controls:Pivot.ItemTemplate>
<DataTemplate>
<ListBox Height="450" HorizontalAlignment="Stretch" Margin="8,6,0,0" Name="listBox1" VerticalAlignment="Stretch" Background="#00537393" Width="445" >
<ListBox.ItemTemplate >
<DataTemplate >
<Border BorderBrush="Black" CornerRadius="8" BorderThickness="1" HorizontalAlignment="Stretch" Name="border">
<Grid HorizontalAlignment="Stretch" Name="grid1" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="0*" />
<RowDefinition Height="100*" />
</Grid.RowDefinitions>
<Image Height="78" HorizontalAlignment="Left" Margin="13,12,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="92" Grid.Row="1" Source="{Binding ImageSource}" />
<TextBlock Foreground="White" Height="80" HorizontalAlignment="Left" Margin="111,12,0,0" Name="textBlock1" Text="{Binding Title}" VerticalAlignment="Top" Width="280" TextWrapping="Wrap" Grid.Row="1" />
<Image Grid.Row="1" Height="75" HorizontalAlignment="Left" Margin="380,12,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="73" Source="/WindowsPhoneApplication7;component/Images/appbar.transport.play.rest.png" />
<TextBlock Foreground="White" Grid.Row="1" Height="20" HorizontalAlignment="Left" Margin="111,88,0,0" Name="textBlock2" Text="{Binding date}" VerticalAlignment="Top" Width="190" FontSize="11" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DataTemplate>
</controls:Pivot.ItemTemplate>
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="hiii" TextWrapping="Wrap" FontSize="0" Foreground="White" />
</DataTemplate>
</controls:Pivot.HeaderTemplate>
</controls:Pivot>
You can set the header of a Pivot control to pretty much anything since it is an object. To set it to an image instead of a default title set the Title to "" and do this in the constructor of your page:
YourPivotControl.Title = new Image { Width = 400, Source = new BitmapImage(new Uri("/someImage.png", UriKind.Relative)) };
Did you take a look at the default pivot page setup by visual studio? They do exactly what you're looking for:
<!--Pivot Control-->
<controls:Pivot Title="MY APPLICATION">
<!--Pivot item one-->
<controls:PivotItem Header="first">
<!--Double line list with text wrapping-->
<ListBox x:Name="FirstListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="78">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PivotItem>