CODEWITHSUNDEEP
windows-phone-8windows-phone-8.1
ericosg
ericosg

Reputation: 4965

Windows Phone UI defaults to 19 margin on the left

I've noticed that all guidelines, guides and blogs explain that the standard margin on the left (leading) for Windows Phone is 12.

Yet, when I go "File > New Project in VS2013" for any type of Windows Phone app, I'm met with a margin of 19, which looks really good.

<!-- Title Panel -->
<StackPanel Grid.Row="0" Margin="19,0,0,0">
    <TextBlock x:Uid="Header" Text="application name" Style="{ThemeResource TitleTextBlockStyle}" Margin="0,12,0,0" />
    <TextBlock Text="{Binding Title}" Style="{ThemeResource HeaderTextBlockStyle}" Margin="0,-6.5,0,26.5" CharacterSpacing="{ThemeResource PivotHeaderItemCharacterSpacing}"/>
</StackPanel>

It looks good, as in the bar at the top with the signal indication, aligns perfectly with 19 in the simulator, yet in designer view it aligns with the number 12 instead.

Simulator running with 19

Design view looking miss-aligned with 19

Why is this? I keep editing my every XAML to match Margin="19,0,0,0" when I thought they should all be Margin="12,0,12,0". Is that right?

Upvotes: 1

Views: 143

Answers (1)

Rob Caplan - MSFT
Rob Caplan - MSFT

Reputation: 21919

It's the difference between Windows Phone Silverlight and Windows Phone Runtime app scaling. Silverlight apps always scale to 480 virtual pixels wide. Runtime apps scale based on pixel density at specific plateaus (multiples of 20% for Windows Phone 8.1 and of 25% for Windows 10).

The 12 pixel guidelines you saw were for probably for Silverlight apps on Windows 8.

That said, the scaling documentation for Windows 10 appears to contradict itself and says 12 pixels for narrow modes in Responsive design 101 for Universal Windows Platform (UWP) apps and 20 pixels in Guidelines for resizing to narrow layouts. I'll file a doc bug to synchronize these.

Upvotes: 3

Related Questions