UWP GridView垂直スクロールが機能していません

Question

画像付きのGridViewがあります。 GridViewは、VisualStates（小> 1列、中→2列、大3列）によるイメージの表示方法を変更します。

垂直スクロールを機能させることができません。

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を使用しているため。垂直スクロールはうまくいきます。

このサンプルを参考にしても問題が解決しない場合は、私に教えてください。また、AdaptiveGridView XAML ControlをUWP Community Toolkitに試してみるといいでしょう。