因此,我刚刚开始重新使用Windows应用程序,有些事情我无法按我的要求进行(可能是因为我找不到任何示例,而Channel9视频也没有涵盖我的情况)。
从this article开始,我认为从大屏幕切换到小屏幕时,“重定位”技术非常适合我的应用程序。
我所做的是使用StackPanel
并使用两个AdaptiveTrigger
更改其方向(一个基于表here,表示0宽度,另一个表示720)。
这种方法行得通,但是我会用一些丑陋的油漆编辑的屏幕快照来说明一些问题。
当我处于BigScreen
情况下时,会发生这种情况,在这种情况下,有足够的空间将A和B放在同一行中。这里的问题是B应该占据全部剩余宽度,覆盖所有蓝色部分。
第二个问题与调整大小有关。如果没有足够的空间,绿色部分将被剪切而不是调整大小(您可以看到右边框消失了)。在使用StackPanel
使布局具有响应性之前,没有发生这种情况。
最后,当我们处于SmallScreen
情况下时,方向变为垂直,并且我们遇到的问题与第一个相同:绿色部分的高度没有填满屏幕。
这是该页面使用的XAML
:
<Page
x:Class="Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WifiAnalyzerFinal.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:mvvm="using:Mvvm"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SmallScreen">
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="StackPanel.Orientation"
Value="Vertical"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="BigScreen">
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="StackPanel.Orientation"
Value="Horizontal"/>
<Setter Target="Rect.Width"
Value="200"/>
<Setter Target="Rect.Height"
Value="Auto"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel Orientation="Vertical"
Background="Blue"
x:Name="StackPanel">
<Rectangle Fill="Red"
Height="50"
x:Name="Rect"
Width="Auto"/>
<ListView ItemsSource="{Binding Stuff}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Green"
Width="Auto"
BorderBrush="DarkGreen"
BorderThickness="5"
Padding="5">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Margin" Value="0,0,0,5"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
</StackPanel>
</Grid>
</Page>
请注意,没有
StackPanel
,绿色部分将适合页面,覆盖所有可用区域。不幸的是,我无法提出更好的解决方案,因为没有样本可以告诉我们该技术应如何实现。我也尝试过使用新的RelativePanel
,但是AdaptiveTrigger
的Setter
似乎无法与RelativePanel.RightOf
这样的附加属性一起使用。是否有成功的人在无需使用后台代码的情况下应用此技术?
编辑:
我通过使用带有2行2列的
Grid
来完成此工作,并且AdaptiveTrigger
将所有内容从行移动到列,反之亦然。
最佳答案
可以通过 setter 更改RelativePanel附加的属性值。语法如下:
<Setter Target="SomeXAMLObject.(RelativePanel.RightOf)" Value="SomeOtherXAMLObject" />
关于xaml - Windows Universal响应式设计重新定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31366327/