UWP XAMLでスクロール可能なグリッドを作成する方法

Question

XAML（UWPアプリケーションで）でフォームを作成し、スクロール可能にする必要があります。私はこのようなコードを持っています

<Grid x:Name="MainGrid"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup> 
      <VisualState x:Name="WideState"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="720" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="MainGrid.Margin" Value="24"/> 
        <Setter Target="MainGrid.RowDefinitions[1].Height" Value="auto"/> 
        <Setter Target="MainGrid.ColumnDefinitions[1].Width" Value="*"/> 
        <Setter Target="FirstGrid.Margin" Value="0 0 12 0"/> 
        <Setter Target="SecondGrid.Margin" Value="12 0 0 0"/> 
        <Setter Target="SecondGrid.(Grid.Column)" Value="1"/> 
        <Setter Target="SecondGrid.(Grid.Row)" Value="0"/> 
       </VisualState.Setters> 
      </VisualState> 
      <VisualState x:Name="NarrowState"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="0" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="MainGrid.Margin" Value="12"/> 
        <Setter Target="FirstGrid.Margin" Value="0 0 0 0"/> 
        <Setter Target="SecondGrid.Margin" Value="0 0 0 0"/> 
        <Setter Target="MainGrid.RowDefinitions[0].Height" Value="auto"/> 
        <Setter Target="MainGrid.RowDefinitions[1].Height" Value="*"/> 
        <Setter Target="MainGrid.ColumnDefinitions[1].Width" Value="auto"/> 
        <Setter Target="SecondGrid.(Grid.Column)" Value="0"/> 
        <Setter Target="SecondGrid.(Grid.Row)" Value="1"/> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 

    <Grid.ColumnDefinitions> 
     <ColumnDefinition/> 
     <ColumnDefinition/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition/> 
     <RowDefinition/> 
    </Grid.RowDefinitions> 


    <Grid x:Name="FirstGrid" Grid.Column="0" Grid.Row="0"> 

     <Grid.ColumnDefinitions> 
      <ColumnDefinition/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="auto"/> 
     </Grid.RowDefinitions> 

     <Grid Grid.Column="0" Grid.Row="0"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="130"/> 
       <ColumnDefinition Width="*" MaxWidth="500"/> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition/> 
      </Grid.RowDefinitions> 
      <TextBlock Grid.Column="0" Grid.Row="0" x:Uid="lblName" /> 
      <my:SfTextBoxExt Grid.Column="1" Grid.Row="0" x:Uid="txtName" /> 
     </Grid> 

    </Grid> 
    <Grid x:Name="SecondGrid" Grid.Column="1" Grid.Row="0" > 

     <Grid.ColumnDefinitions> 
      <ColumnDefinition/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="auto"/> 
     </Grid.RowDefinitions> 

     <Grid Grid.Column="0" Grid.Row="0"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="130"/> 
       <ColumnDefinition Width="*" MaxWidth="500"/> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition/> 
      </Grid.RowDefinitions> 
      <TextBlock Grid.Column="0" Grid.Row="0" x:Uid="lblAge" /> 
      <my:SfTextBoxExt Grid.Column="1" Grid.Row="0" x:Uid="txtAge" /> 
     </Grid> 

    </Grid> 

</Grid> 

これは応答しますが、スクロールできません。私はScrollViewerがMainGridの上に追加するとき - どのように私はこのGridスクロールすることができます>これは、スクロール可能になりますが、応答は（<VisualState x:Name="WideState">）

はあなたがどんなのIDEを持っていますか動作していませんか？どうも。

Answer 1

ルートコンテナのメンバーとしてVisualStateGroupsが必要です。

構造は次のようになり：

<Grid Name=root> 
    VisualStateGroups here.... 
    <ScrollViewer> 
     <Grid Name=MainGrid> 
      ...First and Second grid... 
     </Grid> 
    </ScrollViewer> 
</Grid> 

Answer 2

ScrollViewer代わりにGrid

<ScrollViewer> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup> 
       <VisualState x:Name="WideState"> 
        <VisualState.StateTriggers> 
         <AdaptiveTrigger MinWindowWidth="720" /> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="MainGrid.Margin" Value="24"/> 
         <Setter Target="MainGrid.RowDefinitions[1].Height" Value="auto"/> 
         <Setter Target="MainGrid.ColumnDefinitions[1].Width" Value="*"/> 
         <Setter Target="FirstGrid.Margin" Value="0 0 12 0"/> 
         <Setter Target="SecondGrid.Margin" Value="12 0 0 0"/> 
         <Setter Target="SecondGrid.(Grid.Column)" Value="1"/> 
         <Setter Target="SecondGrid.(Grid.Row)" Value="0"/> 
        </VisualState.Setters> 
       </VisualState> 
       <VisualState x:Name="NarrowState"> 
        <VisualState.StateTriggers> 
         <AdaptiveTrigger MinWindowWidth="0" /> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="MainGrid.Margin" Value="12"/> 
         <Setter Target="FirstGrid.Margin" Value="0 0 0 0"/> 
         <Setter Target="SecondGrid.Margin" Value="0 0 0 0"/> 
         <Setter Target="MainGrid.RowDefinitions[0].Height" Value="auto"/> 
         <Setter Target="MainGrid.RowDefinitions[1].Height" Value="*"/> 
         <Setter Target="MainGrid.ColumnDefinitions[1].Width" Value="auto"/> 
         <Setter Target="SecondGrid.(Grid.Column)" Value="0"/> 
         <Setter Target="SecondGrid.(Grid.Row)" Value="1"/> 
        </VisualState.Setters> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
    <Grid x:Name="MainGrid" Background="Green"> 


     <Grid.ColumnDefinitions> 
      <ColumnDefinition/> 
      <ColumnDefinition/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition/> 
      <RowDefinition/> 
     </Grid.RowDefinitions> 


     <Grid x:Name="FirstGrid" Grid.Column="0" Grid.Row="0" Background="Yellow"> 

      <Grid.ColumnDefinitions> 
       <ColumnDefinition/> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="auto"/> 
      </Grid.RowDefinitions> 

      <Grid Grid.Column="0" Grid.Row="0" Height="500"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="130"/> 
        <ColumnDefinition Width="*" MaxWidth="500"/> 
       </Grid.ColumnDefinitions> 
       <Grid.RowDefinitions> 
        <RowDefinition/> 
       </Grid.RowDefinitions> 
       <TextBlock Grid.Column="0" Grid.Row="0" x:Uid="lblName" /> 

      </Grid> 

     </Grid> 
     <Grid x:Name="SecondGrid" Grid.Column="1" Grid.Row="0" Height="500" Background="Blue"> 

      <Grid.ColumnDefinitions> 
       <ColumnDefinition/> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="auto"/> 
      </Grid.RowDefinitions> 

      <Grid Grid.Column="0" Grid.Row="0"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="130"/> 
        <ColumnDefinition Width="*" MaxWidth="500"/> 
       </Grid.ColumnDefinitions> 
       <Grid.RowDefinitions> 
        <RowDefinition/> 
       </Grid.RowDefinitions> 
       <TextBlock Grid.Column="0" Grid.Row="0" x:Uid="lblAge" /> 

      </Grid> 

     </Grid> 

    </Grid> 
    </ScrollViewer> 

内部Putthe VisualStateコード