制作可滚动的响应式网格视图
Making a scrollable responsive gridview
对于一个大学项目，我正在开发一个显示当前天气信息的 UWP 应用程序，并具有类似 Cortana 的界面来控制智能家居的某些部分。
该界面存在于桌面视图中的三列一行，这三列在移动设备上对齐为一列三行。这部分是我通过遵循教程并更改代码以满足我的特定需求而弄明白的。
我现在遇到的问题是，当列作为一行放置时，它们会按比例缩小以适合屏幕的 1/3。我将硬编码大小设置为 500 以查看是否可以使用固定值，因为内部元素的大小变化不大。但是，当我这样做时，视图不可滚动，并且第二行的大部分和整个第三行对用户不可见。
我尝试通过将下面的代码添加到主网格来解决这个问题，但没有结果。
<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>
界面概念：
UI 元素不会仅仅因为您设置了 ScrollViewer.VerticalScrollMode="Enabled" 附加的 属性 就可以滚动。这些附加属性仅对在其模板中包含 ScrollViewer 的元素有用（那个 ScrollViewer 将采用附加属性的值）。
如果您希望 MainGrid 可滚动，则需要将其包装在 ScrollViewer 中。您还需要将 VisualStateManager.VisualStateGroups 附加的 属性 从 MainGrid 提升到 ScrollViewer。 VisualStateManager.VisualStateGroups 必须附加到模板根目录，否则无效。
<Page>
<ScrollViewer>
<VisualStateManager.VisualStateGroups>
...
</VisualStateManager.VisualStateGroups>
<Grid x:Name="MainGrid">
...
</Grid>
</ScrollViewer>
</Page>
对于一个大学项目，我正在开发一个显示当前天气信息的 UWP 应用程序，并具有类似 Cortana 的界面来控制智能家居的某些部分。
该界面存在于桌面视图中的三列一行，这三列在移动设备上对齐为一列三行。这部分是我通过遵循教程并更改代码以满足我的特定需求而弄明白的。
我现在遇到的问题是，当列作为一行放置时，它们会按比例缩小以适合屏幕的 1/3。我将硬编码大小设置为 500 以查看是否可以使用固定值，因为内部元素的大小变化不大。但是，当我这样做时，视图不可滚动，并且第二行的大部分和整个第三行对用户不可见。 我尝试通过将下面的代码添加到主网格来解决这个问题，但没有结果。
<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>
界面概念：
UI 元素不会仅仅因为您设置了 ScrollViewer.VerticalScrollMode="Enabled" 附加的 属性 就可以滚动。这些附加属性仅对在其模板中包含 ScrollViewer 的元素有用（那个 ScrollViewer 将采用附加属性的值）。
如果您希望 MainGrid 可滚动，则需要将其包装在 ScrollViewer 中。您还需要将 VisualStateManager.VisualStateGroups 附加的 属性 从 MainGrid 提升到 ScrollViewer。 VisualStateManager.VisualStateGroups 必须附加到模板根目录，否则无效。
<Page>
<ScrollViewer>
<VisualStateManager.VisualStateGroups>
...
</VisualStateManager.VisualStateGroups>
<Grid x:Name="MainGrid">
...
</Grid>
</ScrollViewer>
</Page>