如何在 Windows Phone 8 中制作自适应 UI? [英] How to make adaptive UI in windows phone 8?

问题描述

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

I want to make view such that in small screens the view comes less and in large it should come full. for example in the image given below in 480 × 800 phone view should come till support section(with rest of it scrollable) whereas in wxga it should cover the human resource section. the xaml code is

 <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

please open the image as i dont have the reputation. http://i.stack.imgur.com/lLQR7.png

推荐答案

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

For adaptive layout make sure you use the margins carefully. And each element or container is placed based on it horizontal and vertical alignment. At any point if the element is not being able to be placed using the alignments, use grid row and column definitions to better place your elements. use margins to place elements at accurate distance from the row or column definitions. Try not using Margins because they are hardcoded and at runtime they would not change. In Row and Column definitions use * as a factor or dividing your grids (as shown in the code.) as the * keeps the screen layout size into consideration and multiplies the grid size with the factor 12 in this case. Also if you don't want to set the width of a column or height of a row, you can use Auto instead of * and during runtime, the column would be allocated automatically edited your code and made it work on all screentypes. Also while using scrollviewer make sure you avoid giving it a height (as in your code). I've added a grid row and made the scrollviewer to take full stretch of the screen. Here is the modified code:

 <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 控件来组织您的支持内容.通过这种方式，用户可以浏览您需要提供的信息.有什么不懂的可以在评论区告诉我

Also you can make use of Pivot control to organize your support content. This way a user can swipe through the information you need to provide. If there is anything let me know on the comments section

这篇关于如何在 Windows Phone 8 中制作自适应 UI?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！