如何在 windows phone 8 中制作自适应 UI？

Question

我想让视图在小屏幕中显示较少，而在大屏幕中显示应该是完整的。例如，在下面给出的 480 × 800 电话视图中的图像中，应该到支持部分（其余部分可滚动），而在 wxga 中它应该覆盖人力资源部分。 xml代码是

 <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

Answer 1

对于自适应布局，请确保谨慎使用边距。并且每个元素或容器都是基于它的水平和垂直对齐放置的。在任何时候，如果无法使用对齐方式放置元素，请使用网格行和列定义来更好地放置元素。使用边距将元素放置在距行或列定义的准确距离处。尽量不要使用边距，因为它们是硬编码的，并且在运行时它们不会改变。在行和列定义中，使用 * 作为因子或划分网格（如代码所示），因为 * 会考虑屏幕布局大小，并在这种情况下将网格大小乘以因子 12。此外，如果您不想设置列的宽度或行的高度，您可以使用Auto 而不是*，并且在运行时，该列将被自动分配编辑您的代码并使其适用于所有屏幕类型。此外，在使用滚动查看器时，请确保避免给它一个高度（如您的代码中所示）。我添加了一个网格行并使滚动查看器占据整个屏幕。这是修改后的代码：

 <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 控件来组织您的支持内容。通过这种方式，用户可以浏览您需要提供的信息。如果有什么可以在 cmets 部分告诉我