xaml – 如何在Windows Phone 8中制作自适应UI？

2020-06-06 原文

我想制作一个视图,在小屏幕中视图变得越来越少,而且它应该很大.例如,在下面给出的480×800电话视图中的图像应该到达支持部分(其余部分可滚动),而在wxga中它应该覆盖人力资源部分.
xaml代码是

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="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"  Content="xxxxxxxx" Foreground="Blue"></HyperlinkButton>
                 <Border Margin="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,0" Background="#E66729" Padding="5">
                     <TextBlock  Text="Numbers" HorizontalAlignment="Center" FontSize="25"></TextBlock>
                 </Border>
                 <StackPanel>
                     <StackPanel Orientation="Horizontal" Margin="0,5,0" HorizontalAlignment="Center">
                         <TextBlock Text="Sales:" Foreground="Black" FontSize="22" ></TextBlock>
                         <HyperlinkButton Content="+91-xxxxxx" Foreground="Blue"></HyperlinkButton>
                     </StackPanel>
                     <StackPanel Orientation="Horizontal"  Margin="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,0" HorizontalAlignment="Center">
                         <TextBlock Text="HR:" Foreground="Black" FontSize="22" ></TextBlock>
                         <HyperlinkButton Content="+91-xxxxxxxxxx" Foreground="Blue"></HyperlinkButton>
                     </StackPanel>
                 </StackPanel>
                 <Border Margin="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,0" Foreground="Blue"></HyperlinkButton>
                 </StackPanel>
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                     <TextBlock Text="Email:" Foreground="Black" FontSize="22" ></TextBlock>
                     <HyperlinkButton Content="xxxxxxxxxxxx"  Margin="0,0" Foreground="Blue"></HyperlinkButton>
                 </StackPanel>
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                     <TextBlock Text="Skype ID:"  Margin="0,0" Foreground="Black" FontSize="22" ></TextBlock>
                     <TextBlock Text="xxxxxxxx" FontSize="22" Foreground="Black"></TextBlock>
                 </StackPanel>
                 <Border Margin="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而不是*,并且在运行时,将分配列自动编辑代码并使其适用于所有screentype.使用scrollviewer时,请确保避免给它一个高度(如代码中所示).我添加了一个网格行,并使滚动查看器完全伸展屏幕.这是修改后的代码：

<Grid x:Name="ContactGrid" Margin="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,0"  Content="xxxxxxxx" Foreground="Blue"/>
                 <Border Margin="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,0" Background="#E66729" Padding="5">
                     <TextBlock  Text="Numbers" HorizontalAlignment="Center" FontSize="25"/>
                 </Border>
                 <StackPanel>
                     <StackPanel Orientation="Horizontal" Margin="0,0" HorizontalAlignment="Center">
                         <TextBlock Text="Sales:" Foreground="Black" FontSize="22" />
                         <HyperlinkButton Content="+91-xxxxxx" Foreground="Blue"/>
                     </StackPanel>
                     <StackPanel Orientation="Horizontal"  Margin="0,0" HorizontalAlignment="Center">
                         <TextBlock Text="Care:" Foreground="Black" FontSize="22" />
                         <HyperlinkButton Content="+91-xxxxxxxx" Foreground="Blue"/>
                     </StackPanel>
                     <StackPanel Orientation="Horizontal"  Margin="0,0" HorizontalAlignment="Center">
                         <TextBlock Text="HR:" Foreground="Black" FontSize="22" />
                         <HyperlinkButton Content="+91-xxxxxxxxxx" Foreground="Blue"/>
                     </StackPanel>
                 </StackPanel>
                 <Border Margin="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,0" Foreground="Blue"/>
                 </StackPanel>
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                     <TextBlock Text="Email:" Foreground="Black" FontSize="22" />
                     <HyperlinkButton Content="xxxxxxxxxxxx"  Margin="0,0" Foreground="Blue"/>
                 </StackPanel>
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                     <TextBlock Text="Skype ID:"  Margin="0,0" Foreground="Black" FontSize="22" />
                     <TextBlock Text="xxxxxxxx" FontSize="22" Foreground="Black"></TextBlock>
                 </StackPanel>
                 <Border Margin="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控件来组织支持内容.这样,用户可以轻扫您需要提供的信息.如果有任何问题,请在评论部分告诉我

xaml – 如何在Windows Phone 8中制作自适应UI？的更多相关文章

html5视频自动横过来自适应页面且点击播放功能的实现

这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
使用Html5多媒体实现微信语音功能

这篇文章主要介绍了使用Html5多媒体实现微信语音功能,需要的朋友可以参考下
简洁自适应404页面HTML好看的404源码

这篇文章主要介绍了简洁自适应404页面HTML好看的404源码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片功能

这篇文章主要介绍了基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片功能,需要的朋友可以参考下
html5中canvas图表实现柱状图的示例

本篇文章主要介绍了html5中canvas图表实现柱状图的示例，本文使用canvas来实现一个图表，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
有关HTML5页面在iPhoneX适配问题

这篇文章主要介绍了有关HTML5页面在iPhoneX适配问题,需要的朋友可以参考下
前端实现背景虚化但内容清晰且自适应的实例代码

这篇文章主要介绍了前端实现背景虚化但内容清晰且自适应的实例代码,需要的朋友可以参考下
Html5 页面适配iPhoneX(就是那么简单)

这篇文章主要介绍了Html5 页面适配iPhoneX(就是那么简单),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
HTML5 移动页面自适应手机屏幕四类方法总结

这篇文章主要介绍了HTML5 移动页面自适应手机屏幕四类方法总结,非常具有实用价值，需要的朋友可以参考下
HTML5 图片悬停放大的实现代码示例

这篇文章主要介绍了HTML5 图片悬停放大的实现代码示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

随机推荐

static – 在页面之间共享数据的最佳实践

我想知道在UWP的页面之间发送像’selectedItem’等变量的最佳做法是什么？创建一个每个页面都知道的静态全局变量类是一个好主意吗？
.net – 为Windows窗体控件提供百分比宽度/高度

WindowsForm开发的新手,但在Web开发方面经验丰富.有没有办法为Windows窗体控件指定百分比宽度/高度,以便在用户调整窗口大小时扩展/缩小？当窗口调整大小时,可以编写代码来改变控件的宽度/高度,但我希望有更好的方法,比如在HTML/CSS中.在那儿？
使用Windows Azure查询表存储数据

我需要使用特定帐户吗？>将应用程序部署到Azure服务后,如何查询数据？GoogleAppEngine有一个数据查看器/查询工具,Azure有类似的东西吗？>您可以看到的sqlExpressintance仅在开发结构中,并且一旦您表示没有等效,所以请小心使用它.>您可以尝试使用Linqpad查询表格.看看JamieThomson的thispost.
windows – SetupDiGetClassDevs是否与文档中的设备实例ID一起使用？

有没有更好的方法可以使用DBT_DEVICEARRIVAL事件中的数据获取设备的更多信息？您似乎必须指定DIGCF_ALLCLASSES标志以查找与给定设备实例ID匹配的所有类,或者指定ClassGuid并使用DIGCF_DEFAULT标志.这对我有用：带输出：
Windows Live ID是OpenID提供商吗？

不,WindowsLiveID不是OpenID提供商.他们使用专有协议.自从他们的“测试版”期结束以来,他们从未宣布计划继续它.
如果我在代码中进行了更改,是否需要重新安装Windows服务？

我写了一个Windows服务并安装它.现在我对代码进行了一些更改并重新构建了解决方案.我还应该重新安装服务吗？不,只需停止它,替换文件,然后重新启动它.
带有双引号的字符串回显使用Windows批处理输出文件

我正在尝试使用Windows批处理文件重写配置文件.我循环遍历文件的行并查找我想要用指定的新行替换的行.我有一个’函数’将行写入文件问题是％Text％是一个嵌入双引号的字符串.然后失败了.可能还有其他角色也会导致失败.如何才能使用配置文件中的所有文本？尝试将所有“在文本中替换为^”.^是转义字符,因此“将被视为常规字符你可以尝试以下方法：其他可能导致错误的字符是：
.net – 将控制台应用程序转换为服务？

我正在寻找不同的优势/劣势,将我们长期使用的控制台应用程序转换为Windows服务.我们为ActiveMQ使用了一个叫做java服务包装器的东西,我相信人们告诉我你可以用它包装任何东西.这并不是说你应该用它包装任何东西;我们遇到了这个问题.控制台应用程序是一个.NET控制台应用程序,默认情况下会将大量信息记录到控制台,尽管这是可配置的.任何推荐？我们应该在VisualStudio中将其重建为服务吗？我使用“-install”/“-uninstall”开关执行此操作.例如,seehere.
windows – 捕获外部程序的STDOUT和STDERR *同时*它正在执行(Ruby)

哦,我在Windows上:-(实际上,它比我想象的要简单,这看起来很完美：…是的,它适用于Windows！
windows – 当我试图批量打印变量时,为什么我得到“Echo is on”

我想要执行一个简单的批处理文件脚本：当我在XP中运行时,它给了我预期的输出,但是当我在Vista或Windows7中运行它时,我在尝试打印值时得到“EchoisOn”.以下是程序的输出：摆脱集合表达式中的空格.等号(=)的两侧可以并且应该没有空格BTW：我通常在@echo关闭的情况下启动所有批处理文件,并以@echo结束它们,所以我可以避免将代码与批处理文件的输出混合.它只是使您的批处理文件输出更好,更清洁.