UWP GridView Le défilement vertical ne fonctionne pas

Question

J'ai un peu de GridView avec des images. Le GridView change sa méthode pour afficher les images dues aux VisualStates (colonne small-> 1 column, medium-> 2, colonne large-> 3).

Je n'arrive pas à faire défiler le défilement vertical.

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> 

Et fond 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; 
     } 

Toutes les suggestions?

Answer 1

Comme le code que vous avez posté n'est pas complet, il est difficile de dire pourquoi votre défilement vertical ne fonctionne pas. Le code que vous avez posté est juste et suit est un exemple complet qui fonctionne dans mon côté.

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> 

code-behind:

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 
    } 
} 

Comme je ne connais pas les détails de votre data:Element, donc je viens d'utiliser une URL dans mon échantillon. Le défilement vertical fonctionne bien.

Vous pouvez vous référer à cet exemple et si vous avez encore un problème, n'hésitez pas à me le signaler. En outre, je pense que vous pouvez également essayer AdaptiveGridView XAML Control en UWP Community Toolkit, il a un comportement similaire à celui que vous voulez.