UWP GridView垂直滾動不起作用

Question

我有一個小的GridView與圖像。由於VisualStates（小 - > 1列，中 - > 2列，大 - > 3列），GridView更改其顯示圖像的方法。

我不能讓垂直滾動工作。

的XAML：

<GridView x:Name="MyGridView" 
       Grid.Row="0" 
       IsItemClickEnabled="True" 
       ItemClick="MyGridView_ItemClick" 
       SizeChanged="MyGridView_SizeChanged" 
       ScrollViewer.VerticalScrollBarVisibility="Visible" 
       ScrollViewer.VerticalScrollMode="Enabled" 
       ScrollViewer.HorizontalScrollMode="Disabled"> 
     <GridView.Resources> 
      <Storyboard x:Name="EnterStoryboard"> 
       <FadeOutThemeAnimation TargetName="MyGridView" /> 
      </Storyboard> 
      <Storyboard x:Name="ExitStoryboard"> 
       <FadeInThemeAnimation TargetName="MyGridView" /> 
      </Storyboard> 
     </GridView.Resources> 
     <GridView.ItemTemplate> 
      <DataTemplate x:DataType="data:Element"> 
       <RelativePanel x:Name="idPanel"> 
        <Image Source="{x:Bind CoverImage}" /> 
       </RelativePanel> 
      </DataTemplate> 
     </GridView.ItemTemplate> 
    </GridView> 

和背景MyGridView_SizeChanged：

private void MyGridView_SizeChanged(object sender, Windows.UI.Xaml.SizeChangedEventArgs e) 
    { 
     var _panel = (ItemsWrapGrid)MyGridView.ItemsPanelRoot; 
     var _actual = VisualStateGroup.CurrentState; 
     int _gridColumnNumber; 
     switch (_actual.Name) { 
      case "medium": 
       { 
        _gridColumnNumber = 2; 
        break; 
       } 
      case "large": 
       { 
        _gridColumnNumber = 3; 
        break; 
       } 
      default: 
       { 
        _gridColumnNumber = 1; 
        break; 
       } 
     } 
     _panel.ItemWidth = e.NewSize.Width/_gridColumnNumber; 
     } 

有什麼建議？

Answer 1

由於您發佈的代碼不完整，因此很難說爲什麼您的垂直滾動不起作用。您發佈的代碼是正確的，以下是一個完整的示例，適用於我。

XAML：

<Page x:Class="UWPApp.MainPage" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:local="using:UWPApp" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     mc:Ignorable="d"> 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="auto" /> 
     </Grid.RowDefinitions> 

     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="VisualStateGroup"> 
       <VisualState x:Name="narrow"> 
        <VisualState.StateTriggers> 
         <AdaptiveTrigger MinWindowWidth="0" /> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="textBlock.Text" Value="NARROW" /> 
        </VisualState.Setters> 
       </VisualState> 
       <VisualState x:Name="medium"> 
        <VisualState.StateTriggers> 
         <AdaptiveTrigger MinWindowWidth="520" /> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="textBlock.Text" Value="MEDIUM" /> 
        </VisualState.Setters> 
       </VisualState> 
       <VisualState x:Name="large"> 
        <VisualState.StateTriggers> 
         <AdaptiveTrigger MinWindowWidth="1200" /> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="textBlock.Text" Value="LARGE" /> 
        </VisualState.Setters> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 

     <GridView x:Name="MyGridView" 
        Grid.Row="0" 
        IsItemClickEnabled="True" 
        ItemClick="MyGridView_ItemClick" 
        ScrollViewer.HorizontalScrollMode="Disabled" 
        ScrollViewer.VerticalScrollBarVisibility="Visible" 
        ScrollViewer.VerticalScrollMode="Enabled" 
        SizeChanged="MyGridView_SizeChanged"> 
      <GridView.Resources> 
       <Storyboard x:Name="EnterStoryboard"> 
        <FadeOutThemeAnimation TargetName="MyGridView" /> 
       </Storyboard> 
       <Storyboard x:Name="ExitStoryboard"> 
        <FadeInThemeAnimation TargetName="MyGridView" /> 
       </Storyboard> 
      </GridView.Resources> 
      <GridView.ItemTemplate> 
       <DataTemplate> 
        <RelativePanel x:Name="idPanel"> 
         <Image Source="{Binding}" /> 
        </RelativePanel> 
       </DataTemplate> 
      </GridView.ItemTemplate> 
     </GridView> 

     <TextBlock x:Name="textBlock" Grid.Row="1" Height="50" FontWeight="Bold" /> 
    </Grid> 
</Page> 

代碼隱藏：

public sealed partial class MainPage : Page 
{ 
    public List<string> ImageCollection = new List<string> { 
     "http://az619822.vo.msecnd.net/files/CanaryIslandsTurtle_EN-US8274101746_1366x768.jpg", 
     "http://az619822.vo.msecnd.net/files/ShanghaiElevatedWalkway_EN-US8623422930_1366x768.jpg", 
     "http://az619822.vo.msecnd.net/files/SkunkKit_EN-US10705950046_1366x768.jpg", 
     "http://az619519.vo.msecnd.net/files/RockyMtFox_EN-US11902018005_1366x768.jpg", 
     "http://az608707.vo.msecnd.net/files/Burano_EN-US12610622868_1366x768.jpg", 
     "http://az608707.vo.msecnd.net/files/SealionMom_EN-US13623871731_1366x768.jpg", 
     "http://az608707.vo.msecnd.net/files/Kestrel_EN-US10433052515_1366x768.jpg" 
    }; 

    public MainPage() 
    { 
     this.InitializeComponent(); 
     MyGridView.ItemsSource = ImageCollection; 
    } 

    private void MyGridView_SizeChanged(object sender, Windows.UI.Xaml.SizeChangedEventArgs e) 
    { 
     var _panel = (ItemsWrapGrid)MyGridView.ItemsPanelRoot; 
     var _actual = VisualStateGroup.CurrentState; 
     int _gridColumnNumber; 
     switch (_actual.Name) 
     { 
      case "medium": 
       { 
        _gridColumnNumber = 2; 
        break; 
       } 
      case "large": 
       { 
        _gridColumnNumber = 3; 
        break; 
       } 
      default: 
       { 
        _gridColumnNumber = 1; 
        break; 
       } 
     } 
     _panel.ItemWidth = e.NewSize.Width/_gridColumnNumber; 
    } 

    private void MyGridView_ItemClick(object sender, ItemClickEventArgs e) 
    { 
     //TODO 
    } 
} 

由於我不知道你data:Element的細節，所以我只用一個URL我樣本。垂直滾動運行良好。

你可以參考這個例子，如果你仍然有問題，請隨時告訴我。此外，我認爲你也可以在UWP Community Toolkit試試AdaptiveGridView XAML Control，它有類似你想要的行爲。