Xaml 使用RelativePanel构建自适应布局
您好,我想当视力低于720时,比如一部手机,我希望网格2低于网格1。我试过它的面板和自适应触发器,如下所示:Xaml 使用RelativePanel构建自适应布局,xaml,uwp,Xaml,Uwp,您好,我想当视力低于720时,比如一部手机,我希望网格2低于网格1。我试过它的面板和自适应触发器,如下所示: <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <RelativePanel > <VisualStateManager.VisualStateGroups> <VisualStateGroup x
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<RelativePanel >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="NarrowView">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Grid2.(RelativePanel.Below)" Value="Grid1"/>
<Setter Target="Grid1.(RelativePanel.Above)" Value="Grid2"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="WideView">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Grid2.(RelativePanel.RightOf)" Value="Grid1"/>
<Setter Target="Grid1.(RelativePanel.LeftOf)" Value="Grid2"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" x:Name="Grid1" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBox Grid.Row="0" FontSize="20" PlaceholderText="NOME" Style="{StaticResource ResourceKey=TextBoxStyle}"/>
</Grid>
<Grid Grid.Column="1" x:Name="Grid2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" FontSize="17" Text="Note" Foreground="#222222" Margin="20,15" ></TextBlock>
<TextBox Grid.Row="2" MaxLength="0" FontSize="17" Height="500" PlaceholderText="AGGIUNGI NOTA" Style="{StaticResource ResourceKey=TextBoxStyle}"></TextBox>
</Grid>
</Grid>
</RelativePanel>
</Grid>
但它不起作用。
谢谢有两件事需要解决: 1)要使VisualState正常工作,请将VisualStateManager放置在根网格的第一个子项下:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
......
</VisualStateManager.VisualStateGroups>
......
</Grid>
......
......
2)您不需要添加列,只需将两个网格放置在RelativePanel下即可:
<RelativePanel>
<Grid x:Name="Grid1">
......
</Grid>
<Grid x:Name="Grid2">
......
</Grid>
</RelativePanel>
......
......
已完成的xaml代码:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="NarrowView">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Grid2.(RelativePanel.Below)" Value="Grid1"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="WideView">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Grid2.(RelativePanel.RightOf)" Value="Grid1"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<RelativePanel>
<Grid x:Name="Grid1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBox Grid.Row="0" FontSize="20" PlaceholderText="NOME" />
</Grid>
<Grid x:Name="Grid2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" FontSize="17" Text="Note" Foreground="#222222" Margin="20,15" ></TextBlock>
<TextBox Grid.Row="2" MaxLength="0" FontSize="17" Height="500" PlaceholderText="AGGIUNGI NOTA" ></TextBox>
</Grid>
</RelativePanel>
</Grid>
如果有人关心,我找到了一个没有relativePanel的解决方案:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="NarrowView">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="text.(Grid.ColumnSpan)" Value="2" />
<Setter Target="text1.(Grid.ColumnSpan)" Value="2" />
<Setter Target="text2.(Grid.ColumnSpan)" Value="2" />
<Setter Target="text1.(Grid.Row)" Value="1" />
<Setter Target="text1.(Grid.Column)" Value="0" />
<Setter Target="text2.(Grid.Row)" Value="2" />
<Setter Target="text2.(Grid.Column)" Value="0" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="WideView">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="860" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="text.(Grid.ColumnSpan)" Value="1" />
<Setter Target="text1.(Grid.Row)" Value="0" />
<Setter Target="text1.(Grid.Column)" Value="1" />
<Setter Target="text2.(Grid.Row)" Value="1" />
<Setter Target="text2.(Grid.Column)" Value="1" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBox x:Name="text" PlaceholderText="NOME" />
<TextBlock x:Name="text1" Grid.Row="0" Grid.Column="1" Text="Note"></TextBlock>
<TextBox x:Name="text2" Grid.Row="1" Grid.Column="1" PlaceholderText="AGGIUNGI NOTA" ></TextBox>
</Grid>
完美。现在可以展开相对面板内的元素,就像在网格的列上一样?更改网格的Row and column属性是实现此效果的传统方法:)唯一的问题是每列的行布局相同。通过在每列中放置一个网格,我就有了一个独立的loyout,但我不能再通过statetrigger管理它们了?