How to modify WP Panorama item to be full screen

问题

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

回答1:

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}"

回答2:

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

来源：https://stackoverflow.com/questions/9920375/how-to-modify-wp-panorama-item-to-be-full-screen

标签

silverlight

windows-phone-7

layout

panorama-control