建设适应布局RelativePanel

你好，我想，当视力小于720，如电话，我想格栅2跑到电网1.我通过它的面板和自适应触发这样的尝试下面：建设适应布局RelativePanel

<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>

但它不起作用。谢谢

来源

2015-10-19 Andrea485

有两件事情你需要修复：

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>

来源

2015-10-20 01:35:34

完美。现在可以展开相关面板内的元素，就像在网格的一列上发生的那样？ – Andrea485

我发现了一个解决方案，而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>

来源

2015-10-20 10:36:16 Andrea485

更改网格的行和列属性是实现此效果的传统方法:) –

唯一的问题是每列都具有相同的行布局。通过在每列中放置一个网格我有一个独立的loyout，但是我不能再通过statetrigger来管理它们吗？ – Andrea485

建设适应布局RelativePanel

回答

相关问题