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的详细信息，所以我只是在我的示例中使用了一个网址。垂直滚动效果很好。

您可以参考此示例，如果您仍有问题，请随时告诉我。此外，我认为你也可以在AdaptiveGridView XAML Control中尝试UWP Community Toolkit，它有类似你想要的行为。

UWP GridView垂直滚动无法正常工作

1 个答案: