I've added an Image to the Panorama title in an app.
XAML:
<phone:Panorama Title="MSFT Insider" Background="#FFD8D8D8" Foreground="Black" Style="{StaticResource PanoramaStyle1}">
PanoramaStyle1:
<phone:PhoneApplicationPage.Resources>
<Style x:Key="PanoramaStyle1" TargetType="phone:Panorama">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Primitives:PanoramaPanel x:Name="panel"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:Panorama">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Primitives:PanningBackgroundLayer x:Name="BackgroundLayer" HorizontalAlignment="Left" Grid.RowSpan="2">
<Border x:Name="background" Background="{TemplateBinding Background}"/>
</Primitives:PanningBackgroundLayer>
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Horizontal">
<Image Height="100" Source="Assets/Logos/Logo_transparente.png" Stretch="Fill" Margin="20,0,0,0" VerticalAlignment="Center"/>
<Primitives:PanningTitleLayer x:Name="TitleLayer" CharacterSpacing="-35" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" FontSize="80" FontFamily="{StaticResource PhoneFontFamilyLight}" HorizontalAlignment="Left" Height="128" VerticalAlignment="Center" Margin="10,0,0,0"/>
</StackPanel>
<Primitives:PanningLayer x:Name="ItemsLayer" HorizontalAlignment="Left" Grid.Row="1">
<ItemsPresenter x:Name="items"/>
</Primitives:PanningLayer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The problem is that the image does not move with the text when i slide left or right.
This is what i mean:
What I can do to make it move? I have found anything searching.
Instead of putting PanningTitleLayer in StackPanel together with your image like :
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Horizontal">
<Image Height="100" Source="Assets/Logos/Logo_transparente.png" Stretch="Fill" Margin="20,0,0,0" VerticalAlignment="Center"/>
<Primitives:PanningTitleLayer x:Name="TitleLayer" CharacterSpacing="-35" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" FontSize="80" FontFamily="{StaticResource PhoneFontFamilyLight}" HorizontalAlignment="Left" Height="128" VerticalAlignment="Center" Margin="10,0,0,0"/>
</StackPanel>
You should try putting your image in StackPanel together with TextBlock in PanningTitleLayer's ContentPresenter like this :
<Primitives:PanningTitleLayer x:Name="TitleLayer" CharacterSpacing="-35" ContentTemplate="{TemplateBinding TitleTemplate}" FontSize="80" FontFamily="{StaticResource PhoneFontFamilyLight}" HorizontalAlignment="Left" Height="128" VerticalAlignment="Center" Margin="10,0,0,0">
<ContentPresenter>
<StackPanel Orientation="Horizontal">
<Image Height="100" Source="Assets/Logos/Logo_transparente.png" Stretch="Fill" Margin="20,0,0,0" VerticalAlignment="Center"/>
<TextBlock Text="{TemplateBinding Title}"/>
</StackPanel>
</ContentPresenter>
</Primitives:PanningTitleLayer>
Note that <Primitives:PanningTitleLayer>
does not have Content
attribute defined anymore. Instead it have <ContentPresenter></ContentPresenter>
, and that TextBlock is now bounded to Title (<TextBlock Text="{TemplateBinding Title}"/>
)
I hope this helps ...