CODEWITHSUNDEEP
c#.netwinrt-xamlwindows-phone-8.1
Rico Suter
Rico Suter

Reputation: 11858

Pivot overlapping other elements in WP 8.1 Universal app (and automatically changing margin)

The following XAML shows the content of a Windows Phone 8.1 Universal app page. The idea is to have a bar on top of a pivot. But the pivot is overlapping the bar whereas the sample grid in blue is working as expected. 

<Grid>        
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid Background="{StaticResource PhoneAccentBrush}" Height="50" />
    <Pivot Grid.Row="1" Background="Green" Width="200" HorizontalAlignment="Left" />
    <Grid Grid.Row="1" Background="Blue" Width="200" HorizontalAlignment="Right" />
</Grid>

The resulting Page looks like this:

enter image description here

Where is this "negative margin" coming from?

How can it be avoided?

BTW: Just setting a margin is not a solution as it introduces other problems, for example a jumping GUI when using a SemanticZoom control, I need to know the root cause of the problem to solve it...

Info: It seems that the Windows Phone Pivot automatically changes the margin depending on the current screen settings (status bar shown/hidden). So if your app changes the state of the status bar in some circumstances you will end up having a jumping/changing pivot control.

Upvotes: 3

Views: 690

Answers (2)

Rico Suter
Rico Suter

Reputation: 11858

I've found a solution and created a simple attached property for the Pivot control.

The attached property can be used this way: 

<Pivot controls:PivotExtensions.DisableAutoMargin="True">
    <PivotItem Header="A">
        ...
    </PivotItem>
    <PivotItem Header="B">
        ...
    </PivotItem>
</Pivot>

The class with the attached property can be found here: http://mytoolkit.codeplex.com/SourceControl/latest#MyToolkit.Extended.WinRT/Controls/PivotExtensions.cs

Downside: You cannot override the template anymore as the attached property changes the template already...

Upvotes: 2

RandomEngy
RandomEngy

Reputation: 15413

Overriding the control template doesn't seem to work; there is some code in the control that's setting the margin after construction. Also setting the Margin on the offending grid on the Loaded event doesn't work either, the negative margin code runs after that.

The only way I found to make the odd behavior go away was to ask your UI to overlap the status bar:

ApplicationView.GetForCurrentView()
  .SetDesiredBoundsMode(ApplicationViewBoundsMode.UseCoreWindow);

Then the Pivot control figures that it doesn't need to try and cover the status bar. Note that you'll now have to give room in your page layout to prevent overlap with the status bar.

Upvotes: 1

Related Questions