Строительство адаптивный макет с 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

Изменение свойства Grid's Row and Column является традиционным способом достижения этого эффекта: –

Единственная проблема заключается в том, что каждый столбец имеет одинаковый макет строк. поместив сетку в каждый столбец, у меня есть независимая лояльность, но я больше не могу управлять ими через statetrigger? – Andrea485

Строительство адаптивный макет с RelativePanel

ответ

Смежные вопросы