不同 XAML 中心内容在设计模式和模拟器中的对齐方式

Question

我有一个 StackPanel 代表顶部栏和一个 Hub 代表书籍项目。两者都包裹在两行的网格中。问题在于，在设计模式下，中心内容与顶部正确对齐，就在我的顶部栏下方。但在模拟器中，所有内容看起来都与中心对齐。
在设计时看起来像这样：

但在模拟器中它看起来像这样：

这是我的 XAML 代码：

<Page.Resources>
        <DataTemplate x:Key="HubSectionHeaderTemplate">
            <TextBlock Margin="0,0,0,-10" Text="{Binding}" FontSize="19" FontFamily="Open Sans" FontWeight="Light" FontStretch="ExtraExpanded" Foreground="#FF30323E">
                <!--<TextBlock.RenderTransform>
                    <CompositeTransform/>
                </TextBlock.RenderTransform>-->
            </TextBlock>
        </DataTemplate>

        <!-- Grid-appropriate item template as seen in section 2 -->
        <DataTemplate x:Key="Standard200x180TileItemTemplate">
            <Grid Margin="0,0,15,15" Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" VerticalAlignment="Top">
                <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" Height="165" Width="115"/>
                <!--<TextBlock Text="{Binding Title}" VerticalAlignment="Bottom" Margin="9.5,0,0,6.5" Style="{ThemeResource BaseTextBlockStyle}"/>-->
            </Grid>
        </DataTemplate>

    </Page.Resources>

    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="60"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Margin="0,-25,0,0">
            <StackPanel.Background>
                <ImageBrush ImageSource="Assets/CatalogTopBar.png" Stretch="UniformToFill"/>
            </StackPanel.Background>
            <Button x:Name="searchButton" Margin="0,25,-30,0" Height="15" Width="10" Content="" HorizontalAlignment="Right" VerticalAlignment="Center" BorderThickness="0" >
                <Button.Background>
                    <ImageBrush ImageSource="Assets/noun_23695_cc.png" Stretch="Uniform"/>
                </Button.Background>
            </Button>
        </StackPanel>

        <Hub x:Name="Hub" x:Uid="Hub" Grid.Row="1" Background="White" Margin="0,25,0,0"  VerticalContentAlignment="Top" VerticalAlignment="Top">
            <HubSection x:Uid="HubSection2" Header="Популярные книги" Width="Auto"
                         DataContext="{Binding Groups[0]}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}" >
                <DataTemplate>
                    <GridView
                        Margin="0,-10,0,0"
                        ItemsSource="{Binding Items}"
                        AutomationProperties.AutomationId="ItemGridView"
                        AutomationProperties.Name="Items In Group"
                        ItemTemplate="{StaticResource Standard200x180TileItemTemplate}"
                        SelectionMode="None"
                        IsItemClickEnabled="True"
                        ItemClick="ItemView_ItemClick"
                        ContinuumNavigationTransitionInfo.ExitElementContainer="True">
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <ItemsWrapGrid />
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                    </GridView>
                </DataTemplate>
            </HubSection>

        </Hub>

    </Grid>
</Page>

Answer 1

呵呵呵呵...终于找到问题所在了。花了几周后！几周了，卡尔！花了几个星期后，我偶然发现我的 <Grid> 上方有一个巨大的 "application name" <Hub.title>。由于文本的白色背景和白色字体颜色，它不可见。通过不小心更改 <RequestedTheme="Light"> 我终于能够看到这段文字，因为默认字体颜色更改为黑色。文本 "application name" 本身不在我的 XAML 源文件中，它是由本地化工具附加的 x:Uid ="Hub" 和 resources.resw 中的相应值。删除后 x:Uid 我的布局恢复正常...

不同 XAML 中心内容在设计模式和模拟器中的对齐方式

Different XAML Hub content aligment in design mode and in emulator

xaml

blend

winrt-xaml

visual-studio-2015

windows-10-mobile