How to obtain full width in PivotItem

Question

In XAML, PivotItems don't have full width of the screen on a Windows Phone. This is good behavior and design, but for a single image I want it to fill the entire screenwidth.

Can this be accomplished?

Answer 1

The root cause is that default PivotItemMargin is set to 12,0,12,0. We can find the setting in generic.xaml.

So what we need to do is overridding the setting in App.xaml. Just like this:
<Thickness x:Key="PivotItemMargin">0</Thickness>

Answer 2

Please Use this code,

<phone:PhoneApplicationPage 
x:Class="NikhilSApp.DemoExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"     
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"  Orientation="Portrait"
shell:SystemTray.IsVisible="False">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <!--Pivot Control-->

    // You can specify the width here....
    <controls:Pivot Height="800" Width="480">
        <!--Pivot item one-->
        <controls:PivotItem Height="800" Margin="0,-130,0,0">
            <Grid Name="GridMediaQuestion">
                <Image HorizontalAlignment="Center" Source="Images/Guess.png" Margin="10,10,10,10" Name="imgReceived" Stretch="Fill" VerticalAlignment="Center" Height="790" Width="470" />
            </Grid>
        </controls:PivotItem>

        <!--Pivot item two-->
        <controls:PivotItem Height="800" >
            <Grid x:Name="GridPivot2" Background="#ffffc0">
                 // Place Your Second pivot's  Content here
             </Grid>
        </controls:PivotItem>
    </controls:Pivot>
</Grid>

It is Working.. I implemented already... :)

Answer 3

This is the solution, having a negative margin

<controls:Pivot>
    <controls:PivotItem Margin="-10,0,-10,0">
        <Grid />
    </controls:PivotItem>

    <controls:PivotItem Margin="-10,0,-10,0">
        <Grid />
    </controls:PivotItem>
</controls:Pivot>

Of course you can also use a regular pivot and only have the image margin set to -10,0,-10,0