Question

当我在GridView.ItemContainerStyle的ControlTemplate中替换ListItemPresenter时，ItemContainerTransitions停止工作。

使用自定义ItemContainerTemplate时，如何实现Staggering effect？

<GridView ItemsSource="{Binding Items}">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
       </ItemsPanelTemplate>
    </GridView.ItemsPanel>

    <GridView.ItemContainerTransitions>
        <TransitionCollection>
            <EntranceThemeTransition FromHorizontalOffset="50" IsStaggeringEnabled="True" />
        </TransitionCollection>
    </GridView.ItemContainerTransitions>

    <GridView.ItemContainerStyle>
        <Style TargetType="GridViewItem">
            <Setter Property="IsHoldingEnabled" Value="True"/>
            <Setter Property="Background" Value="White"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="Margin" Value="3,3,18,18"/>
            <Setter Property="MinWidth" Value="350"/>
            <Setter Property="MinHeight" Value="350"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GridViewItem">
                        <toolkit:DropShadowPanel x:Name="dropShadowPanel" OffsetY="2" BlurRadius="4"  ShadowOpacity="0.3" RenderTransformOrigin="0.5,0.5"
                                                 Transitions="{TemplateBinding Transitions}">
                            <Border x:Name="Root" Background="{TemplateBinding Background}">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition />
                                        <RowDefinition Height="100" />
                                    </Grid.RowDefinitions>
                                    <Path x:Name="Icon" Height="100" Width="100" HorizontalAlignment="Center" VerticalAlignment="Center"
                                          Data="{StaticResource PersonAddIconGeometry}" Stretch="Uniform"
                                          Stroke="{StaticResource HighlightBrush1}" StrokeThickness="2" />
                                    <TextBlock x:Name="textBlock" Grid.Row="1"
                                               Text="{Binding Title}" FontSize="42" FontWeight="Light" 
                                               HorizontalAlignment="Center"
                                               VerticalAlignment="Top" />
                                </Grid>
                            </Border>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                    </VisualState>
                                    <VisualState x:Name="PointerOver">
                                        <VisualState.Setters>
                                            <Setter Target="textBlock.Foreground" Value="White" />
                                            <Setter Target="Root.Background" Value="{ThemeResource GridViewItemBackgroundPointerOver}" />
                                            <Setter Target="Icon.Stroke" Value="White" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <VisualState.Setters>
                                            <Setter Target="textBlock.Foreground" Value="White" />
                                            <Setter Target="Root.Background" Value="{ThemeResource GridViewItemBackgroundPressed}" />
                                            <Setter Target="Icon.Stroke" Value="White" />
                                        </VisualState.Setters>
                                        <Storyboard>
                                            <PointerDownThemeAnimation TargetName="dropShadowPanel" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="PointerOverPressed"/>
                                    <VisualState x:Name="Disabled">
                                        <VisualState.Setters>
                                            <Setter Target="Icon.Stroke" Value="Gray" />
                                            <Setter Target="Root.Opacity" Value="0.5" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </toolkit:DropShadowPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </GridView.ItemContainerStyle>
<GridView/>

Answer 1

ItemContainerTransitions可以使用自定义项容器。此处的问题与您使用的自定义面板有关。您可以使用最简单的GridView进行测试，如下所示：

<GridView ItemsSource="{x:Bind Items}">
    <GridView.ItemContainerTransitions>
        <TransitionCollection>
            <EntranceThemeTransition FromHorizontalOffset="50" IsStaggeringEnabled="True"/>
        </TransitionCollection>
    </GridView.ItemContainerTransitions>

    <!--<GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>-->
</GridView>

public ObservableCollection<int> Items { get; set; } = new ObservableCollection<int>() { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 };

这里EntranceThemeTransition有效。但是，如果您使用StackPanel作为ItemsPanel，您会发现转换不再有效。

通常，在ItemsControl中使用数据绑定时，ItemContainerTransitions只能用于支持虚拟化的面板，例如ItemsWrapGrid或ItemsStackPanel。如果我们使用其他面板，例如StackPanel，则无法工作。

因此，要解决此问题，您可以将StackPanel替换为ItemsStackPanel。 ItemsStackPanel将子元素排列成一行，可以水平或垂直定向，与StackPanel相同。

如果您确实想使用StackPanel，则可以将项目添加到Items集合，而不是将ItemsSource属性设置为数据源。

<GridView x:Name="MyGridView" Loaded="MyGridView_Loaded">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>

    <GridView.ItemContainerTransitions>
        <TransitionCollection>
            <EntranceThemeTransition FromHorizontalOffset="50" IsStaggeringEnabled="True" />
        </TransitionCollection>
    </GridView.ItemContainerTransitions>
</GridView>

public ObservableCollection<int> Items { get; set; } = new ObservableCollection<int>() { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 };

private void MyGridView_Loaded(object sender, RoutedEventArgs e)
{
    foreach (var item in Items)
        MyGridView.Items.Add(item);
}

使用自定义GridViewItem模板时如何使用ItemContainerTransitions？

1 个答案: