建設適應佈局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

回答

相關問題