How to modify WP Panorama item to be full screen

Question

I'm trying to modify the PanoramaItem content size so that it has no margins and stretches the entire screen width/height. So far I've had no luck trying to modify a copy of the template. Negative margins can take care of the left/top but the next panorama item is always peeking from the right edge and even if I manage to stretch a panorama item the next one is overlapping in the right side of the screen.

Any ideas how to modify the panorama so that the actual panoramaitem takes the whole screen (800x480) and the following panorama items are always 480px from the left side of the previous panoramaitem so that you can't see part of the next item.

Why do I want to modify the panorama? Because the control has built-in functionality that does everything I want it to do (I'm building a full screen picture viewer with support for flick gesture). I would simply want the panoramaitem's to be full screen and then place images inside taking the entire size of the container (full screen)

Panorama architecture http://msdn.microsoft.com/en-us/library/ff941126%28v=vs.92%29.aspx

using pivotitem instead of panormaitem seems to be a better option. — TutuGeorge, Mar 29 '12 at 06:53
PivotItem transition animation is not as suitable and I would also like to create a separate view using a panorama where content peaks from both left and right symmetrically so figuring out how to modify the default layout/margins/sizes would be great. — Hardev, Mar 29 '12 at 07:58
Hardev please mark the answer below as the solution, it is a good one. — Robert McLaws, Jan 31 '14 at 18:23

score 8 · Accepted Answer · edited Mar 16 '14 at 02:48

C#

public class PanoramaFullScreen : Panorama
{
    protected override System.Windows.Size MeasureOverride(System.Windows.Size          availableSize)
    {
        availableSize.Width += 48;
        return base.MeasureOverride(availableSize);
    }
}

XAML

<Style x:Key="PanoramaItemStyle1" TargetType="phone:PanoramaItem">
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="phone:PanoramaItem">
                <Grid Background="{TemplateBinding Background}" Margin="0,0,0,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <ContentControl x:Name="header" CharacterSpacing="-35" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" FontSize="66" FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" Margin="12,-2,0,38">
                        <ContentControl.RenderTransform>
                            <TranslateTransform x:Name="headerTransform"/>
                        </ContentControl.RenderTransform>
                    </ContentControl>
                    <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

ItemContainerStyle="{StaticResource PanoramaItemStyle1}"

score 2 · Answer 2 · answered Mar 29 '12 at 17:32

2

You can try to use Pivot with null Header and Title and item headers instead of Panorama. And it will support flick too.

answered Mar 29 '12 at 17:32

Ponf

1,190
1
12
28

this is what I did in my app. – earthling Mar 29 '12 at 19:11
As I said previously, Pivot doesn't quite do what I want (fullscreen is fine, symmetrical peeking from left/right not doable). I would like to modify the panorama content template dimensions/layout but it seems that it's impossible or at least extremely difficult. – Hardev Mar 30 '12 at 07:04

How to modify WP Panorama item to be full screen

2 Answers2

Linked