xaml – Windows通用响应式设计重新定位

前端之家收集整理的这篇文章主要介绍了xaml – Windows通用响应式设计重新定位前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以,我刚刚开始使用 Windows应用程序,有一些我无法按照自己的意愿工作(可能是因为我找不到任何样本,而且Channel9视频没有覆盖我的情况).

this article开始,我决定“重新定位”技术是适合我的应用程序从大屏幕移动到较小屏幕的技术.

我所做的是使用StackPanel并使用两个AdaptiveTriggers改变其方向(一个用于0宽度,另一个用于720,基于表here).

这种方法有效,但我会用一些丑陋的油漆编辑的截图来说明一些问题.

这就是当我处于BigScreen情况时会发生的情况,那里有足够的空间让A和B同时在同一行上.这里的问题是B应该占据剩余的全部宽度,覆盖所有蓝色部分.

第二个问题与调整大小有关.当没有足够的空间时,绿色部分会被切割而不是调整大小(您可以看到右侧边框消失).在使用StackPanel使布局响应之前,这没有发生.

最后,当我们处于SmallScreen情况时,方向变为垂直方向,我们遇到与第一个相同的问题:绿色部分的高度不会填满屏幕.

这是用于页面的XAML:

  1. <Page
  2. x:Class="Page"
  3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5. xmlns:local="using:WifiAnalyzerFinal.Views"
  6. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8. xmlns:mvvm="using:Mvvm"
  9. mc:Ignorable="d">
  10.  
  11. <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  12. <VisualStateManager.VisualStateGroups>
  13. <VisualStateGroup x:Name="SmallScreen">
  14. <VisualState>
  15. <VisualState.StateTriggers>
  16. <AdaptiveTrigger MinWindowWidth="0"/>
  17. </VisualState.StateTriggers>
  18. <VisualState.Setters>
  19. <Setter Target="StackPanel.Orientation"
  20. Value="Vertical"/>
  21. </VisualState.Setters>
  22. </VisualState>
  23. </VisualStateGroup>
  24. <VisualStateGroup x:Name="BigScreen">
  25. <VisualState>
  26. <VisualState.StateTriggers>
  27. <AdaptiveTrigger MinWindowWidth="720"/>
  28. </VisualState.StateTriggers>
  29. <VisualState.Setters>
  30. <Setter Target="StackPanel.Orientation"
  31. Value="Horizontal"/>
  32. <Setter Target="Rect.Width"
  33. Value="200"/>
  34. <Setter Target="Rect.Height"
  35. Value="Auto"/>
  36. </VisualState.Setters>
  37. </VisualState>
  38. </VisualStateGroup>
  39. </VisualStateManager.VisualStateGroups>
  40. <StackPanel Orientation="Vertical"
  41. Background="Blue"
  42. x:Name="StackPanel">
  43. <Rectangle Fill="Red"
  44. Height="50"
  45. x:Name="Rect"
  46. Width="Auto"/>
  47. <ListView ItemsSource="{Binding Stuff}"
  48. HorizontalAlignment="Stretch"
  49. HorizontalContentAlignment="Stretch"
  50. VerticalAlignment="Stretch"
  51. Background="Green"
  52. Width="Auto"
  53. BorderBrush="DarkGreen"
  54. BorderThickness="5"
  55. Padding="5">
  56. <ListView.ItemContainerStyle>
  57. <Style TargetType="ListViewItem">
  58. <Setter Property="HorizontalContentAlignment" Value="Stretch" />
  59. <Setter Property="Margin" Value="0,5"/>
  60. </Style>
  61. </ListView.ItemContainerStyle>
  62. </ListView>
  63. </StackPanel>
  64. </Grid>
  65. </Page>

请注意,如果没有StackPanel,绿色部分将适合页面,覆盖所有可用区域.不幸的是,我无法找到更好的解决方案,因为没有样本告诉我们应该如何实现这种技术.我也尝试使用新的RelativePanel,但似乎AdaptiveTrigger的Setter不能与RelativePanel.RightOf这样的附加属性一起使用.

是否有人成功应用这种技术而不必使用代码隐藏?

编辑:

我使用一个包含2行和2列的Grid工作,使用AdaptiveTrigger将所有内容从行移动到列,反之亦然.

可以通过setter更改RelativePanel附加属性值.语法如下:
  1. <Setter Target="SomeXAMLObject.(RelativePanel.RightOf)" Value="SomeOtherXAMLObject" />

猜你在找的Windows相关文章