Panorama Image doesn't move with title

Question

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.

Answer 1

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 ...