UWP GridView 垂直滚动不起作用
UWP GridView Vertical scrolling is not working
我有一个带有图像的小 GridView。由于 VisualStates(小->1 列,中->2 列,大->3 列),GridView 更改了显示图像的方法。
我无法使用垂直滚动。
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;
}
有什么建议吗?
由于您发布的代码不完整,因此很难说出为什么您的垂直滚动不起作用。您发布的代码是正确的,下面是一个在我这边有效的完整示例。
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 in UWP Community Toolkit,它的行为与您想要的类似。
我有一个带有图像的小 GridView。由于 VisualStates(小->1 列,中->2 列,大->3 列),GridView 更改了显示图像的方法。
我无法使用垂直滚动。
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;
}
有什么建议吗?
由于您发布的代码不完整,因此很难说出为什么您的垂直滚动不起作用。您发布的代码是正确的,下面是一个在我这边有效的完整示例。
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 in UWP Community Toolkit,它的行为与您想要的类似。