スクロール可能なレスポンスグリッドビューの作成

Question

大学のプロジェクトでは、現在の気象情報を表示し、スマートホームの特定の部分を制御するためのCortanaのようなインターフェイスを持つUWPアプリケーションに取り組んでいます。

インターフェイスはデスクトップビューの1つの行で3つの列に存在し、これらの3つの列はモバイルデバイスの1つの列に3つの行として整列されます。この部分は、チュートリアルに従い、私の特定のニーズに合うようにコードを変更することでわかりました。

今は、列として配置すると列が画面の1/3に収まるように縮小されるという問題があります。内側の要素がサイズをあまり変えないので、固定値で作業できるかどうかを確認するために、ハードコードされたサイズを500に設定しました。しかし、私はこれを行うと、ビューはスクロール可能ではなく、2行目の大部分と3行目全体がユーザーに表示されません。 私はメイングリッドに以下のコードを追加することでこれを解決しようとしましたが、結果はありません。

<Grid x:Name="MainGrid" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.VerticalScrollBarVisibility="Visible"> 

TL; DR：グリッドが大きくなりすぎたときに、それがスクロール可能であるように、どのように私は私の応答グリッドレイアウトを作成します。

XAMLコード：

<Page 
x:Class="UWPWeather.MainPage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:UWPWeather" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d" Loaded="Page_Loaded"> 

<Grid x:Name="MainGrid" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.VerticalScrollBarVisibility="Visible"> 

    <Grid.Background> 
     <ImageBrush Stretch="Fill" ImageSource="Assets/blue-sea-horizon.jpg"/> 
    </Grid.Background> 

    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup> 
      <VisualState x:Name="WideState"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="1100" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="MainGrid.RowDefinitions[1].Height" Value="0*"/> 
        <Setter Target="MainGrid.RowDefinitions[2].Height" Value="0*"/> 
        <Setter Target="MainGrid.ColumnDefinitions[1].Width" Value="1*"/> 
        <Setter Target="MainGrid.ColumnDefinitions[2].Width" Value="1*"/> 
        <Setter Target="FirstGrid.Margin" Value="0 0 0 0"/> 
        <Setter Target="SecondGrid.Margin" Value="0 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="FirstGrid.Margin" Value="0 0 0 6"/> 
        <Setter Target="SecondGrid.Margin" Value="0 6 0 0"/> 
        <Setter Target="MainGrid.RowDefinitions[0].Height" Value="500"/> 
        <Setter Target="MainGrid.RowDefinitions[1].Height" Value="500"/> 
        <Setter Target="MainGrid.RowDefinitions[2].Height" Value="500"/> 
        <Setter Target="MainGrid.ColumnDefinitions[1].Width" Value="0*"/> 
        <Setter Target="MainGrid.ColumnDefinitions[2].Width" Value="0*"/> 
        <Setter Target="SecondGrid.(Grid.Column)" Value="0"/> 
        <Setter Target="SecondGrid.(Grid.Row)" Value="1"/> 
        <Setter Target="ThirdGrid.(Grid.Column)" Value="0"/> 
        <Setter Target="ThirdGrid.(Grid.Row)" Value="1"/> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 


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


     <Grid x:Name="FirstGrid" Grid.Column="0" Grid.Row="0" Background="Transparent"> 
      <Button x:Name="StartRecognition" HorizontalAlignment="Center" VerticalAlignment="Center" Height="200" Width="200" Click="StartVoiceRecog"> 
       <Button.Background> 
        <ImageBrush Stretch="Uniform" ImageSource="Assets/microphone.png"/> 
       </Button.Background> 
      </Button> 
     </Grid> 

     <Grid x:Name="SecondGrid" Grid.Column="1" Grid.Row="0" Background="Transparent"> 
      <StackPanel Orientation="Vertical" HorizontalAlignment="Center" Padding="0,50,0,0"> 
       <TextBlock x:Name="LocationTextBlock" FontSize="36" Foreground="White" HorizontalAlignment="Center" TextWrapping="Wrap" /> 

       <StackPanel Orientation="Horizontal" Padding="5"> 
        <Image x:Name="ResultImage" Width="200" Height="200" HorizontalAlignment="Left"/> 
        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" x:Name="TempTextBlock" FontSize="60" Foreground="White"/> 
       </StackPanel> 

       <TextBlock x:Name="DescriptionTextBlock" Padding="5" FontSize="36" Foreground="White" HorizontalAlignment="Center" /> 
       <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Padding="5"> 
        <Image x:Name="WindDirection" Width="20" Height="20" /> 
        <TextBlock x:Name="WindSpeed" FontSize="12" Foreground="White"/> 
       </StackPanel> 

       <TextBlock x:Name="Pressure" Padding="5" FontSize="12" Foreground="White" HorizontalAlignment="Center" /> 
       <TextBlock x:Name="Humidity" Padding="5" FontSize="12" Foreground="White" HorizontalAlignment="Center" /> 

       <StackPanel Orientation="Horizontal" Padding="5" HorizontalAlignment="Center"> 
        <Image x:Name="SunRiseImage" Width="20" Height="20"/> 
        <TextBlock x:Name="Sunrise" FontSize="12" Foreground="White" /> 
       </StackPanel> 

       <StackPanel Orientation="Horizontal" Padding="5" HorizontalAlignment="Center" > 
        <Image x:Name="SunsetImage" Width="20" Height="20"/> 
        <TextBlock x:Name="Sunset" FontSize="12" Foreground="White" /> 
       </StackPanel> 

       <Button x:Name="UpdateWeather" Padding="5" HorizontalAlignment="Center" VerticalAlignment="Center" Height="49" Width="39" Click="UpdateWeatherOnClick"> 
        <Button.Background> 
         <ImageBrush Stretch="Fill" ImageSource="Assets/012_restart-512.png"/> 
        </Button.Background> 
       </Button> 
      </StackPanel> 
     </Grid> 

    <Grid x:Name="ThirdGrid" Grid.Column="2" Grid.Row="0" Background="Transparent"> 

    </Grid> 
</Grid> 

インタフェースの概念：

Interface wide

Interface narrow

Answer 1

UI要素は、設定という理由だけでスクロール可能になることはありませんそれらに属性が添付されています。これらのアタッチされたプロパティは、テンプレートにScrollViewerを含む要素（アタッチされたプロパティの値をとる ScrollViewer）でのみ有効です。

MainGridをスクロール可能にする場合は、ScrollViewerでラップする必要があります。また、MainGridの添付プロパティをVisualStateManager.VisualStateGroupsからScrollViewerに呼び出す必要があります。 VisualStateManager.VisualStateGroupsをテンプレートルートに添付する必要があります。それ以外の場合は効果がありません。

<Page> 
    <ScrollViewer> 
     <VisualStateManager.VisualStateGroups> 
      ... 
     </VisualStateManager.VisualStateGroups> 
     <Grid x:Name="MainGrid"> 
      ... 
     </Grid> 
    </ScrollViewer> 
</Page>