UWP GridView Vertikales Scrollen funktioniert nicht

Question

Ich habe ein kleines GridView mit Bildern. Die GridView ändert seine Methode, um die Bilder anzuzeigen, die auf VisualStates zurückzuführen sind (klein-> 1 Spalte, mittel-> 2 Spalte, groß-> 3 Spalte).

Ich kann das vertikale Scrollen nicht funktionieren.

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> 

Und Hintergrund 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; 
     } 

Irgendwelche Vorschläge?

Answer 1

Da der Code, den Sie gepostet haben, nicht vollständig ist, ist es schwer zu sagen, warum Ihr vertikales Scrollen nicht funktioniert. Der Code, den Sie gepostet haben, ist richtig und folgendes ist ein vollständiges Beispiel, das auf meiner Seite funktioniert.

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

Wie ich weiß nicht, die Details Ihrer data:Element, so dass ich nur eine URL in meiner Probe. Das vertikale Scrollen funktioniert gut.

Sie können auf dieses Beispiel verweisen, und wenn Sie noch ein Problem haben, zögern Sie nicht, mir zu sagen. Außerdem denke ich, dass Sie auch AdaptiveGridView XAML Control in UWP Community Toolkit versuchen können, es hat ein ähnliches Verhalten wie Sie wollen.