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

debugcn 发表于 Dev

列罗

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

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

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

左杰

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作品。但是如果你使用StackPanelas 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);
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。