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?

Yes, afaik I've set everything to margin="0", from Pivot to Grid, everything. — Dennis van der Stelt, Sep 05 '13 at 09:45
Post some piece of xaml code, it will be easier to help you. — anderZubi, Sep 05 '13 at 10:16

score 8 · Accepted Answer · answered Jul 20 '16 at 03:34

8

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>

answered Jul 20 '16 at 03:34

Plex

118
2
7

1

This is the real answer. Negative margins are the wrong way to go. – dex3703 Nov 05 '16 at 00:40
This answer was added quite a bit later, but I totally agree! Marked as answer! – Dennis van der Stelt Mar 19 '18 at 21:08

score 5 · Answer 2 · answered Sep 05 '13 at 13:14

5

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

answered Sep 05 '13 at 13:14

Dennis van der Stelt

2,203
16
22

See below for overriding the template. Negative margins are a bad practice. – dex3703 Nov 05 '16 at 00:49

score 0 · Answer 3 · answered Sep 05 '13 at 11:11

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

You can also specify the width to particular one Pivot Item only. — Nikhil Prajapati, Sep 05 '13 at 11:12
But according to this page, there are multiple resolutions available. Setting it to 480 width doesn't give full width on every device? http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj206974%28v=vs.105%29.aspx — Dennis van der Stelt, Sep 05 '13 at 11:26
then You can set it from back end like Pivot1.VerticalAlignment = System.Windows.VerticalAlignment.Stretch; Pivot1.HorizontalAlignment = System.Windows.HorizontalAlignment .Stretch; — Nikhil Prajapati, Sep 05 '13 at 11:41
Setting the width doesn't help, because there are margins coming from somewhere. I've tried setting the width to 1000 but it still has a margin on the left. Perhaps WPF or RT works differently, but in Windows Phone it didn't work. — Dennis van der Stelt, Sep 05 '13 at 13:15

How to obtain full width in PivotItem

3 Answers3