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에서 시도해 볼 수 있다고 생각합니다. 원하는 동작과 비슷합니다.