如何在 windows phone 8 中制作自适应 UI？
How to make adaptive UI in windows phone 8?
我想让视图在小屏幕上显示较少，而在大屏幕上应该显示完整。例如，在下面给出的图像中，480 × 800 phone 视图应该显示到支持部分（其余部分可滚动），而在 wxga 中，它应该覆盖人力资源部分。
xaml 代码是
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0">
<StackPanel>
<TextBlock Text="Contact" FontSize="30" HorizontalAlignment="Center" Foreground="Black"></TextBlock>
<ScrollViewer x:Name="scroll" Height="650">
<StackPanel x:Name="stack">
<Border Background="#E66729" Padding="5">
<TextBlock Text="Email" HorizontalAlignment="Center" FontSize="25"></TextBlock>
</Border>
<HyperlinkButton Margin="0,10,0,0" Content="xxxxxxxx" Foreground="Blue"></HyperlinkButton>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Skype ID" HorizontalAlignment="Center" FontSize="25"></TextBlock>
</Border>
<TextBlock Text="xxxxxxxx" Foreground="Black" HorizontalAlignment="Center" FontWeight="SemiBold" FontSize="22"></TextBlock>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Numbers" HorizontalAlignment="Center" FontSize="25"></TextBlock>
</Border>
<StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="Sales:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="+91-xxxxxx" Foreground="Blue"></HyperlinkButton>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="Sales:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="+91-xxxxxx" Foreground="Blue"></HyperlinkButton>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="Care:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="+91-xxxxxxxx" Foreground="Blue"></HyperlinkButton>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="HR:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="+91-xxxxxxxxxx" Foreground="Blue"></HyperlinkButton>
</StackPanel>
</StackPanel>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Support" HorizontalAlignment="Center" FontSize="25"></TextBlock>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Care:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="xxxxxxx" Margin="0,5,0,0" Foreground="Blue"></HyperlinkButton>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Email:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="xxxxxxxxxxxx" Margin="0,5,0,0" Foreground="Blue"></HyperlinkButton>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Skype ID:" Margin="0,5,0,0" Foreground="Black" FontSize="22" ></TextBlock>
<TextBlock Text="xxxxxxxx" FontSize="22" Foreground="Black"></TextBlock>
</StackPanel>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Human Resource" HorizontalAlignment="Center" FontSize="25"></TextBlock>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Hr:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="xxxxxx" Foreground="Blue"></HyperlinkButton>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Email:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="xxxxxxxx" Foreground="Blue"></HyperlinkButton>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Skype ID:" Foreground="Black" FontSize="22" ></TextBlock>
<TextBlock Text="orangemantra" Foreground="Black"></TextBlock>
</StackPanel>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Grid>
请打开图片，因为我没有名声。
http://i.stack.imgur.com/lLQR7.png
对于自适应布局，请务必小心使用边距。每个元素或容器都是基于它的水平和垂直对齐方式放置的。在任何时候，如果无法使用对齐方式放置元素，请使用网格行和列定义来更好地放置元素。使用边距将元素放置在与行或列定义的准确距离处。尽量不要使用边距，因为它们是硬编码的，并且在运行时它们不会改变。在行和列定义中，使用 * 作为一个因素或划分网格（如代码所示），因为 * 将屏幕布局大小考虑在内，并在这种情况下将网格大小乘以因子 12。此外，如果您不想设置列的宽度或行的高度，您可以使用 Auto 而不是 * 并且在运行时，该列将自动分配编辑您的代码并制作它适用于所有屏幕类型。此外，在使用 scrollviewer 时，请确保避免给它一个高度（如代码中所示）。我添加了一个网格行并使滚动查看器占据了整个屏幕。这是修改后的代码：
<Grid x:Name="ContactGrid" Margin="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="12*"/>
</Grid.RowDefinitions>
<TextBlock Text="Contact" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Foreground="Black"/>
<ScrollViewer x:Name="scroll" IsEnabled="True" Grid.Row="1">
<Grid x:Name="ContentGrid">
<StackPanel x:Name="stack">
<Border Background="#E66729" Padding="5">
<TextBlock Text="Email" HorizontalAlignment="Center" FontSize="25"/>
</Border>
<HyperlinkButton Margin="0,10,0,0" Content="xxxxxxxx" Foreground="Blue"/>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Skype ID" HorizontalAlignment="Center" FontSize="25"/>
</Border>
<TextBlock Text="xxxxxxxx" Foreground="Black" HorizontalAlignment="Center" FontWeight="SemiBold" FontSize="22"/>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Numbers" HorizontalAlignment="Center" FontSize="25"/>
</Border>
<StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="Sales:" Foreground="Black" FontSize="22" />
<HyperlinkButton Content="+91-xxxxxx" Foreground="Blue"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="Sales:" Foreground="Black" FontSize="22" />
<HyperlinkButton Content="+91-xxxxxx" Foreground="Blue"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="Care:" Foreground="Black" FontSize="22" />
<HyperlinkButton Content="+91-xxxxxxxx" Foreground="Blue"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="HR:" Foreground="Black" FontSize="22" />
<HyperlinkButton Content="+91-xxxxxxxxxx" Foreground="Blue"/>
</StackPanel>
</StackPanel>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Support" HorizontalAlignment="Center" FontSize="25"/>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Care:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="xxxxxxx" Margin="0,5,0,0" Foreground="Blue"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Email:" Foreground="Black" FontSize="22" />
<HyperlinkButton Content="xxxxxxxxxxxx" Margin="0,5,0,0" Foreground="Blue"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Skype ID:" Margin="0,5,0,0" Foreground="Black" FontSize="22" />
<TextBlock Text="xxxxxxxx" FontSize="22" Foreground="Black"></TextBlock>
</StackPanel>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Human Resource" HorizontalAlignment="Center" FontSize="25"/>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Hr:" Foreground="Black" FontSize="22" />
<HyperlinkButton Content="xxxxxx" Foreground="Blue"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Email:" Foreground="Black" FontSize="22" />
<HyperlinkButton Content="xxxxxxxx" Foreground="Blue"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Skype ID:" Foreground="Black" FontSize="22" />
<TextBlock Text="orangemantra" Foreground="Black"/>
</StackPanel>
</StackPanel>
</Grid>
</ScrollViewer>
</Grid>
您还可以使用 Pivot 控件来组织您的支持内容。通过这种方式，用户可以轻扫您需要提供的信息。有什么可以评论区告诉我
我想让视图在小屏幕上显示较少，而在大屏幕上应该显示完整。例如，在下面给出的图像中，480 × 800 phone 视图应该显示到支持部分（其余部分可滚动），而在 wxga 中，它应该覆盖人力资源部分。 xaml 代码是
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0">
<StackPanel>
<TextBlock Text="Contact" FontSize="30" HorizontalAlignment="Center" Foreground="Black"></TextBlock>
<ScrollViewer x:Name="scroll" Height="650">
<StackPanel x:Name="stack">
<Border Background="#E66729" Padding="5">
<TextBlock Text="Email" HorizontalAlignment="Center" FontSize="25"></TextBlock>
</Border>
<HyperlinkButton Margin="0,10,0,0" Content="xxxxxxxx" Foreground="Blue"></HyperlinkButton>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Skype ID" HorizontalAlignment="Center" FontSize="25"></TextBlock>
</Border>
<TextBlock Text="xxxxxxxx" Foreground="Black" HorizontalAlignment="Center" FontWeight="SemiBold" FontSize="22"></TextBlock>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Numbers" HorizontalAlignment="Center" FontSize="25"></TextBlock>
</Border>
<StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="Sales:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="+91-xxxxxx" Foreground="Blue"></HyperlinkButton>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="Sales:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="+91-xxxxxx" Foreground="Blue"></HyperlinkButton>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="Care:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="+91-xxxxxxxx" Foreground="Blue"></HyperlinkButton>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="HR:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="+91-xxxxxxxxxx" Foreground="Blue"></HyperlinkButton>
</StackPanel>
</StackPanel>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Support" HorizontalAlignment="Center" FontSize="25"></TextBlock>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Care:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="xxxxxxx" Margin="0,5,0,0" Foreground="Blue"></HyperlinkButton>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Email:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="xxxxxxxxxxxx" Margin="0,5,0,0" Foreground="Blue"></HyperlinkButton>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Skype ID:" Margin="0,5,0,0" Foreground="Black" FontSize="22" ></TextBlock>
<TextBlock Text="xxxxxxxx" FontSize="22" Foreground="Black"></TextBlock>
</StackPanel>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Human Resource" HorizontalAlignment="Center" FontSize="25"></TextBlock>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Hr:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="xxxxxx" Foreground="Blue"></HyperlinkButton>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Email:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="xxxxxxxx" Foreground="Blue"></HyperlinkButton>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Skype ID:" Foreground="Black" FontSize="22" ></TextBlock>
<TextBlock Text="orangemantra" Foreground="Black"></TextBlock>
</StackPanel>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Grid>
请打开图片，因为我没有名声。 http://i.stack.imgur.com/lLQR7.png
对于自适应布局，请务必小心使用边距。每个元素或容器都是基于它的水平和垂直对齐方式放置的。在任何时候，如果无法使用对齐方式放置元素，请使用网格行和列定义来更好地放置元素。使用边距将元素放置在与行或列定义的准确距离处。尽量不要使用边距，因为它们是硬编码的，并且在运行时它们不会改变。在行和列定义中，使用 * 作为一个因素或划分网格（如代码所示），因为 * 将屏幕布局大小考虑在内，并在这种情况下将网格大小乘以因子 12。此外，如果您不想设置列的宽度或行的高度，您可以使用 Auto 而不是 * 并且在运行时，该列将自动分配编辑您的代码并制作它适用于所有屏幕类型。此外，在使用 scrollviewer 时，请确保避免给它一个高度（如代码中所示）。我添加了一个网格行并使滚动查看器占据了整个屏幕。这是修改后的代码：
<Grid x:Name="ContactGrid" Margin="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="12*"/>
</Grid.RowDefinitions>
<TextBlock Text="Contact" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Foreground="Black"/>
<ScrollViewer x:Name="scroll" IsEnabled="True" Grid.Row="1">
<Grid x:Name="ContentGrid">
<StackPanel x:Name="stack">
<Border Background="#E66729" Padding="5">
<TextBlock Text="Email" HorizontalAlignment="Center" FontSize="25"/>
</Border>
<HyperlinkButton Margin="0,10,0,0" Content="xxxxxxxx" Foreground="Blue"/>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Skype ID" HorizontalAlignment="Center" FontSize="25"/>
</Border>
<TextBlock Text="xxxxxxxx" Foreground="Black" HorizontalAlignment="Center" FontWeight="SemiBold" FontSize="22"/>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Numbers" HorizontalAlignment="Center" FontSize="25"/>
</Border>
<StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="Sales:" Foreground="Black" FontSize="22" />
<HyperlinkButton Content="+91-xxxxxx" Foreground="Blue"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="Sales:" Foreground="Black" FontSize="22" />
<HyperlinkButton Content="+91-xxxxxx" Foreground="Blue"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="Care:" Foreground="Black" FontSize="22" />
<HyperlinkButton Content="+91-xxxxxxxx" Foreground="Blue"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="HR:" Foreground="Black" FontSize="22" />
<HyperlinkButton Content="+91-xxxxxxxxxx" Foreground="Blue"/>
</StackPanel>
</StackPanel>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Support" HorizontalAlignment="Center" FontSize="25"/>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Care:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="xxxxxxx" Margin="0,5,0,0" Foreground="Blue"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Email:" Foreground="Black" FontSize="22" />
<HyperlinkButton Content="xxxxxxxxxxxx" Margin="0,5,0,0" Foreground="Blue"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Skype ID:" Margin="0,5,0,0" Foreground="Black" FontSize="22" />
<TextBlock Text="xxxxxxxx" FontSize="22" Foreground="Black"></TextBlock>
</StackPanel>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Human Resource" HorizontalAlignment="Center" FontSize="25"/>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Hr:" Foreground="Black" FontSize="22" />
<HyperlinkButton Content="xxxxxx" Foreground="Blue"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Email:" Foreground="Black" FontSize="22" />
<HyperlinkButton Content="xxxxxxxx" Foreground="Blue"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Skype ID:" Foreground="Black" FontSize="22" />
<TextBlock Text="orangemantra" Foreground="Black"/>
</StackPanel>
</StackPanel>
</Grid>
</ScrollViewer>
</Grid>
您还可以使用 Pivot 控件来组织您的支持内容。通过这种方式，用户可以轻扫您需要提供的信息。有什么可以评论区告诉我