AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

UWP Composition API - GroupListView（二）

2018-03-12 1291
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:UWP Composition API - GroupListView（二）还是先上效果图： 看完了上一篇UWP Composition API - GroupListView（一）的童鞋会问，这不是跟上一篇一样的吗？？？ 骗点击的？？ No，No，其实相对上一个有更简单粗暴的方案，因为上篇是为了研究Composition API，所以含着泪都要做完（有没有被骗的赶脚）。
原文: UWP Composition API - GroupListView（二）

还是先上效果图：

看完了上一篇UWP Composition API - GroupListView（一）的童鞋会问，这不是跟上一篇一样的吗？？？ 骗点击的？？

No，No，其实相对上一个有更简单粗暴的方案，因为上篇是为了研究Composition API，所以含着泪都要做完（有没有被骗的赶脚）。。( ╯□╰ )

那是有没有简单点的方法呢？？ 嗯，看到这篇，那答案肯定是Yes。

我再啰嗦下需求：

1.Group中的集合需要支持增量加载ISupportIncrementalLoading

2.支持UI Virtualization

这个简单的方案就是改ListViewItem的模板，其实我在UWP VirtualizedVariableSizedGridView 支持可虚拟化可变大小Item的View（二）有讲过ListViewItem有2套模板-官方地址

看一下我修改之后的模板：

        <Style TargetType="local:GroupListViewItem" >
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="TabNavigation" Value="Local"/>
        <Setter Property="IsHoldingEnabled" Value="True"/>
        <Setter Property="Margin" Value="0,0,18,2"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:GroupListViewItem">
                    <Border x:Name="OuterContainer">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="PointerOverBorder"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionBackground"
                                                                    Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedBorder"
                                                                    Storyboard.TargetProperty="Stroke">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedEarmark"
                                                                   Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <PointerDownThemeAnimation TargetName="ContentContainer" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="PointerOverPressed">
                                    <Storyboard>
                                        <PointerDownThemeAnimation TargetName="ContentContainer" />
                                        <DoubleAnimation Storyboard.TargetName="PointerOverBorder"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionBackground"
                                                                    Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedBorder"
                                                                    Storyboard.TargetProperty="Stroke">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedEarmark"
                                                                   Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="contentPresenter"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="{ThemeResource ListViewItemDisabledThemeOpacity}" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused"/>
                                <VisualState x:Name="PointerFocused"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionHintStates">
                                <VisualState x:Name="VerticalSelectionHint">
                                    <Storyboard>
                                        <SwipeHintThemeAnimation TargetName="SelectionBackground" ToVerticalOffset="15" ToHorizontalOffset="0" />
                                        <SwipeHintThemeAnimation TargetName="ContentBorder" ToVerticalOffset="15" ToHorizontalOffset="0" />
                                        <SwipeHintThemeAnimation TargetName="SelectedBorder" ToVerticalOffset="15" ToHorizontalOffset="0" />
                                        <SwipeHintThemeAnimation TargetName="SelectedCheckMark" ToVerticalOffset="15" ToHorizontalOffset="0" />
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="HintGlyph"
                                                                   Storyboard.TargetProperty="Opacity"
                                                                   Duration="0:0:0.500">
                                            <DiscreteDoubleKeyFrame Value="0.5" KeyTime="0:0:0" />
                                            <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.500" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="HorizontalSelectionHint">
                                    <Storyboard>
                                        <SwipeHintThemeAnimation TargetName="SelectionBackground" ToHorizontalOffset="-23" ToVerticalOffset="0" />
                                        <SwipeHintThemeAnimation TargetName="ContentBorder" ToHorizontalOffset="-23" ToVerticalOffset="0" />
                                        <SwipeHintThemeAnimation TargetName="SelectedBorder" ToHorizontalOffset="-23" ToVerticalOffset="0" />
                                        <SwipeHintThemeAnimation TargetName="SelectedCheckMark" ToHorizontalOffset="-23" ToVerticalOffset="0" />
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="HintGlyph"
                                                                   Storyboard.TargetProperty="Opacity"
                                                                   Duration="0:0:0.500">
                                            <DiscreteDoubleKeyFrame Value="0.5" KeyTime="0:0:0" />
                                            <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.500" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="NoSelectionHint" />
                                <VisualStateGroup.Transitions>
                                    <VisualTransition To="NoSelectionHint" GeneratedDuration="0:0:0.65"/>
                                </VisualStateGroup.Transitions>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselecting">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unselected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="UnselectedPointerOver">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
                                                                   Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="UnselectedSwiping">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="SelectingGlyph"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="0.5" />
                                        <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Selecting">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="SelectionBackground"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                                        <DoubleAnimation Storyboard.TargetName="SelectedBorder"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                                        <DoubleAnimation Storyboard.TargetName="SelectingGlyph"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                                        <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
                                                                   Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="SelectionBackground"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                                        <DoubleAnimation Storyboard.TargetName="SelectedBorder"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                                        <DoubleAnimation Storyboard.TargetName="SelectedCheckMark"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
                                                                   Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedSwiping">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="SelectionBackground"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                                        <DoubleAnimation Storyboard.TargetName="SelectedBorder"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                                        <DoubleAnimation Storyboard.TargetName="SelectedCheckMark"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
                                                                   Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedUnfocused">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="SelectionBackground"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                                        <DoubleAnimation Storyboard.TargetName="SelectedBorder"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                                        <DoubleAnimation Storyboard.TargetName="SelectedCheckMark"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
                                                                   Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="DragStates">
                                <VisualState x:Name="NotDragging" />
                                <VisualState x:Name="Dragging">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="InnerDragContent"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="{ThemeResource ListViewItemDragThemeOpacity}" />
                                        <DragItemThemeAnimation TargetName="InnerDragContent" />
                                        <FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter" />
                                        <FadeOutThemeAnimation TargetName="SelectedBorder" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="DraggingTarget">
                                    <Storyboard>
                                        <DropTargetItemThemeAnimation TargetName="OuterContainer" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MultipleDraggingPrimary">
                                    <Storyboard>
                                        <!-- These two Opacity animations are required - the FadeInThemeAnimations
                                         on the same elements animate an internal Opacity. -->
                                        <DoubleAnimation Storyboard.TargetName="MultiArrangeOverlayBackground"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                                        <DoubleAnimation Storyboard.TargetName="MultiArrangeOverlayText"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />

                                        <DoubleAnimation Storyboard.TargetName="ContentBorder"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="{ThemeResource ListViewItemDragThemeOpacity}" />
                                        <FadeInThemeAnimation TargetName="MultiArrangeOverlayBackground" />
                                        <FadeInThemeAnimation TargetName="MultiArrangeOverlayText" />
                                        <DragItemThemeAnimation TargetName="ContentBorder" />
                                        <FadeOutThemeAnimation TargetName="SelectionBackground" />
                                        <FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter" />
                                        <FadeOutThemeAnimation TargetName="SelectedBorder" />
                                        <FadeOutThemeAnimation TargetName="PointerOverBorder" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MultipleDraggingSecondary">
                                    <Storyboard>
                                        <FadeOutThemeAnimation TargetName="ContentContainer" />
                                    </Storyboard>
                                </VisualState>
                                <VisualStateGroup.Transitions>
                                    <VisualTransition To="NotDragging" GeneratedDuration="0:0:0.2"/>
                                </VisualStateGroup.Transitions>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ReorderHintStates">
                                <VisualState x:Name="NoReorderHint"/>
                                <VisualState x:Name="BottomReorderHint">
                                    <Storyboard>
                                        <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Bottom" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="TopReorderHint">
                                    <Storyboard>
                                        <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Top" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="RightReorderHint">
                                    <Storyboard>
                                        <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Right" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="LeftReorderHint">
                                    <Storyboard>
                                        <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Left" />
                                    </Storyboard>
                                </VisualState>
                                <VisualStateGroup.Transitions>
                                    <VisualTransition To="NoReorderHint" GeneratedDuration="0:0:0.2"/>
                                </VisualStateGroup.Transitions>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="DataVirtualizationStates">
                                <VisualState x:Name="DataAvailable"/>
                                <VisualState x:Name="DataPlaceholder">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock"
                                                                   Storyboard.TargetProperty="Visibility"
                                                                   Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderRect"
                                                                   Storyboard.TargetProperty="Visibility"
                                                                   Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid x:Name="ReorderHintContent" Background="Transparent">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="auto"/>
                            </Grid.RowDefinitions>
                            <ContentPresenter x:Name="headerPresenter" Grid.Row="0"
                                                          ContentTransitions="{TemplateBinding ContentTransitions}"
                                                          ContentTemplate="{TemplateBinding HeaderTemplate}"
                                                          Content="{TemplateBinding Header}"
                                                          HorizontalAlignment="Stretch"
                                                          VerticalAlignment="Stretch"
                                                          />
                            <Grid Grid.Row="1">
                                <Path x:Name="SelectingGlyph" Opacity="0" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{ThemeResource ListViewItemCheckSelectingThemeBrush}" Height="13" Stretch="Fill" Width="15" HorizontalAlignment="Right" Margin="0,9.5,9.5,0" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
                                <Border x:Name="HintGlyphBorder"
                                Height="40"
                                Width="40"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Top"
                                Opacity="0"
                                Margin="4">
                                    <Path x:Name="HintGlyph" Opacity="0" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{ThemeResource ListViewItemCheckHintThemeBrush}" Height="13" Stretch="Fill"  Width="15" HorizontalAlignment="Right" Margin="0,5.5,5.5,0" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
                                </Border>
                                <Border x:Name="ContentContainer">
                                    <Grid x:Name="InnerDragContent">
                                        <Rectangle x:Name="PointerOverBorder"
                                           IsHitTestVisible="False"
                                           Opacity="0"
                                           Fill="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}" 
                                           Margin="1" />
                                        <Rectangle x:Name="FocusVisual"
                                           IsHitTestVisible="False"
                                           Opacity="0"
                                           StrokeThickness="2"
                                           Stroke="{ThemeResource ListViewItemFocusBorderThemeBrush}" />
                                        <Rectangle x:Name="SelectionBackground"
                                           Margin="4"
                                           Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
                                           Opacity="0" />
                                        <Border x:Name="ContentBorder"
                                        Background="{TemplateBinding Background}"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}"
                                        Margin="4">
                                            <Grid>
                                                <ContentPresenter x:Name="contentPresenter"
                                                          ContentTransitions="{TemplateBinding ContentTransitions}"
                                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                                          Content="{TemplateBinding Content}"
                                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                          Margin="{TemplateBinding Padding}" />
                                                <!-- The 'Xg' text simulates the amount of space one line of text will occupy.
                                             In the DataPlaceholder state, the Content is not loaded yet so we
                                             approximate the size of the item using placeholder text. -->
                                                <TextBlock x:Name="PlaceholderTextBlock"
                                                   Opacity="0"
                                                   Text="Xg"
                                                   Foreground="{x:Null}"
                                                   Margin="{TemplateBinding Padding}"
                                                   IsHitTestVisible="False"
                                                   AutomationProperties.AccessibilityView="Raw"/>
                                                <Rectangle x:Name="PlaceholderRect"
                                                   Visibility="Collapsed"
                                                   Fill="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"/>
                                                <Rectangle x:Name="MultiArrangeOverlayBackground"
                                                   IsHitTestVisible="False"
                                                   Opacity="0"
                                                   Fill="{ThemeResource ListViewItemDragBackgroundThemeBrush}" />
                                            </Grid>
                                        </Border>
                                        <Rectangle x:Name="SelectedBorder"
                                           IsHitTestVisible="False"
                                           Opacity="0"
                                           Stroke="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
                                           StrokeThickness="{ThemeResource ListViewItemSelectedBorderThemeThickness}"
                                           Margin="4" />
                                        <Border x:Name="SelectedCheckMarkOuter"
                                        IsHitTestVisible="False"
                                        HorizontalAlignment="Right"
                                        VerticalAlignment="Top"
                                        Margin="4">
                                            <Grid x:Name="SelectedCheckMark" Opacity="0" Height="40" Width="40">
                                                <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z"  Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" Stretch="Fill"/>
                                                <Path Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{ThemeResource ListViewItemCheckThemeBrush}" Height="13" Stretch="Fill" Width="15" HorizontalAlignment="Right" Margin="0,5.5,5.5,0" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
                                            </Grid>
                                        </Border>
                                        <TextBlock x:Name="MultiArrangeOverlayText"
                                           Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DragItemsCount}"
                                           Foreground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
                                           FontFamily="{ThemeResource ContentControlThemeFontFamily}"
                                           FontSize="26.667"
                                           IsHitTestVisible="False"
                                           Opacity="0"
                                           TextWrapping="Wrap"
                                           TextTrimming="WordEllipsis"
                                           Margin="18,9,0,0"
                                           AutomationProperties.AccessibilityView="Raw"/>
                                    </Grid>
                                </Border>
                            </Grid>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
View Code 
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="auto"/>
                            </Grid.RowDefinitions>
                            <ContentPresenter x:Name="headerPresenter" Grid.Row="0"
                                                          ContentTransitions="{TemplateBinding ContentTransitions}"
                                                          ContentTemplate="{TemplateBinding HeaderTemplate}"
                                                          Content="{TemplateBinding Header}"
                                                          HorizontalAlignment="Stretch"
                                                          VerticalAlignment="Stretch"
                                                          />
                            <Grid Grid.Row="1">

注意上图，我把默认模板里面的内容放到Grid.Row=1的Gird里面了，然后加了一个HeaderPresenter在上面。

是不是思路清晰了，就是说如果这个Item是Group的第一个，我们就给HeaderPresenter设置Header和HeaderTemplate。

这里我们需要继承ListViewItem，增加Header和HeaderTemplate 2个属性。

    [TemplatePart(Name = "headerPresenter", Type = typeof(ContentPresenter))]
    public class GroupListViewItem : ListViewItem
    {
        ContentPresenter headerPresenter;
        public object Header
        {
            get { return (object)GetValue(HeaderProperty); }
            set { SetValue(HeaderProperty, value); }
        }

        // Using a DependencyProperty as the backing store for Header.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty HeaderProperty =
            DependencyProperty.Register("Header", typeof(object), typeof(GroupListViewItem), new PropertyMetadata(null, new PropertyChangedCallback(OnHeaderChanged)));

        private static void OnHeaderChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            (d as GroupListViewItem).SetHeader();

        }

        public DataTemplate HeaderTemplate
        {
            get { return (DataTemplate)GetValue(HeaderTemplateProperty); }
            set { SetValue(HeaderTemplateProperty, value); }
        }

        // Using a DependencyProperty as the backing store for HeaderTemplate.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty HeaderTemplateProperty =
            DependencyProperty.Register("HeaderTemplate", typeof(DataTemplate), typeof(GroupListViewItem), new PropertyMetadata(null));

        public GroupListViewItem()
        {
            this.DefaultStyleKey = typeof(GroupListViewItem);
        }

        protected override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            headerPresenter = GetTemplateChild("headerPresenter") as ContentPresenter;
            if (headerPresenter != null)
            {
                headerPresenter.RegisterPropertyChangedCallback(ContentPresenter.ContentProperty, new DependencyPropertyChangedCallback(OnHeaderPresenterContentChanged));
            }
            else
            {
                Debug.Assert(false, "headerpresenter is missing.");
            }
        }

        private void OnHeaderPresenterContentChanged(DependencyObject sender, DependencyProperty dp)
        {
            if (headerPresenter.Content != Header)
            {
                headerPresenter.Content = Header;
            }
        }

        protected override Size ArrangeOverride(Size finalSize)
        {
            if (headerPresenter != null)
            {
                headerPresenter.Margin = new Thickness(-this.Margin.Left, -this.Margin.Top, -this.Margin.Right, this.Margin.Bottom);
            }
            return base.ArrangeOverride(finalSize);
        }

        public void ClearHeader()
        {
            Header = null;
            ClearValue(GroupListViewItem.HeaderTemplateProperty);
        }

        public void SetHeader()
        {
            if (headerPresenter != null)
            {
                headerPresenter.Content = Header;
            }
        }
    }

当然不要忘记了在GroupListView1 里面override 下面2个方法。

        protected override bool IsItemItsOwnContainerOverride(object item)
        {
            return item is GroupListViewItem;
        }
        protected override DependencyObject GetContainerForItemOverride()
        {
            return new GroupListViewItem();
        }

其他就很简单了，只需要处理下置顶的Header就好了，注意红色字的部分。

        private void UpdateGroupHeaders()
        {
            if (groupCollection != null)
            {
                var firstVisibleItemIndex = this.GetFirstVisibleIndex();
                if (firstVisibleItemIndex < 0)
                {
                    return;
                }
                foreach (var item in groupCollection.GroupHeaders)
                {
                    if (item.FirstIndex == -1)
                    {
                        continue;
                    }
                    if (item.FirstIndex <= firstVisibleItemIndex && (firstVisibleItemIndex <= item.LastIndex || item.LastIndex == -1))
                    {
                        currentTopGroupHeader.Visibility = Visibility.Visible;
                        currentTopGroupHeader.Margin = new Thickness(0);
                        currentTopGroupHeader.Clip = null;
                        currentTopGroupHeader.DataContext = item;
                    }
                    else
                    {
                        ListViewItem listViewItem = ContainerFromIndex(item.FirstIndex) as ListViewItem;

                        if (listViewItem == null && item.LastIndex != -1)
                        {
                            listViewItem = ContainerFromIndex(item.LastIndex) as ListViewItem;
                        }
                        if (listViewItem != null)
                        {
                            //handle moving header
                            {
                                //unloaded
                                if (listViewItem.ActualHeight == 0 || listViewItem.ActualWidth == 0)
                                {
                                    listViewItem.Loaded += ListViewItem_Loaded;
                                }
                                else
                                {
                                    GeneralTransform gt = listViewItem.TransformToVisual(this);
                                    var rect = gt.TransformBounds(new Rect(0, 0, listViewItem.ActualWidth, listViewItem.ActualHeight));
                                    //add delta,so that it does not look like suddenly
                                    if (rect.Bottom < 0 || rect.Top > this.ActualHeight)
                                    {

                                    }
                                    //in view port
                                    else
                                    {
                                        if (currentTopGroupHeader != null)
                                        {
                                            var delta = currentTopGroupHeader.ActualHeight - (rect.Top);
                                            if (delta > 0)
                                            {
                                                currentTopGroupHeader.Margin = new Thickness(0, -delta, 0, 0);
                                                currentTopGroupHeader.Clip = new RectangleGeometry() { Rect = new Rect(0, delta, currentTopGroupHeader.ActualWidth, currentTopGroupHeader.ActualHeight) };
                                                if (delta >= currentTopGroupHeader.ActualHeight)
                                                {
                                                    currentTopGroupHeader.Visibility = Visibility.Visible;
                                                    currentTopGroupHeader.Margin = new Thickness(0);
                                                    currentTopGroupHeader.Clip = null;
                                                    currentTopGroupHeader.DataContext = item;
                                                }
                                            }

                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

查看一下GroupListView1 里面的代码，是不是感觉比之前GroupListView里面的代码简单更好理解（我的错。。。别要问我控件名字怎么这么随意 ，我想不更好的。。( ╯□╰ )）

当然这个GroupListView1里面也有Composition API，这样你们就不会说我是标题党了。。

因为置顶的Header是新加的东东，它不是ScrollViewer的ScrollContentPresenter（在这里我猜想，ScrollContentPresenter是做了Composition 动画的），它不会顺着ScrollViewer向下拖动的时候向下移动，它依然在它自己的位置上，有木有觉得它很孤独。。

如下图：

那么我们把它和ScrollViewer联系起来就好了。。让它和ScrollViewer一起动就好了。注意记得限定下它的值。

        private void CreateVisual()
        {
            visual = ElementCompositionPreview.GetElementVisual(currentTopGroupHeader);

            var scrollViewerManipProps = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(scrollViewer);

            Compositor compositor = scrollViewerManipProps.Compositor;

            expression = compositor.CreateExpressionAnimation("max(0,ScrollViewerManipProps.Translation.Y)");


            // set "dynamic" reference parameter that will be used to evaluate the current position of the scrollbar every frame
            expression.SetReferenceParameter("ScrollViewerManipProps", scrollViewerManipProps);
            visual.StartAnimation("Offset.Y", expression);
            //Windows.UI.Xaml.Media.CompositionTarget.Rendering += OnCompositionTargetRendering;
        }

加上之后：

好了，这个控件也讲完咯，真的没有了。

开源有益，源码GitHub地址。

 

其实有心的朋友也发现，原来ScrollViewer的超出界限动画，估计也是这样实现的吧？？。我在网上也发现很多人问怎么才能禁掉它。

下图是UWP 图片剪切旋转工具，当时我就是拿ScrollViewer做的，当时找了半天也没找到禁止下面动画的方法。

找了一圈，ElementCompositeMode 这个属性有点像。微软的解释是：

没看懂。。试了下，没有用。

另外也没在ScrollViewer或者ScrollContentPresenter 上找到相关的属性。希望微软在之后能暴露相关属性，毕竟不是每个人都希望ScrollViewer有这种动画的。。

 如果有童鞋已经知道怎么搞了，请留言下下，让更多的童鞋知道。万分感谢

文章标签：
API
关键词：
composition API
uwp API
uwp API grouplistview
杰克.陈
目录
相关文章
阿珊和她的猫
|
7月前
|
缓存 JavaScript 算法
活用 Composition API 核心函数，打造卓越应用（下）
活用 Composition API 核心函数，打造卓越应用（下）
阿珊和她的猫
608 1
m0_黎明
|
7月前
|
JavaScript API
vue 3.0 所采用的 Composition Api 和 vue 2.0 使用的 Option Api 区别
vue 3.0 所采用的 Composition Api 和 vue 2.0 使用的 Option Api 区别
m0_黎明
116 0
1313310884104708
|
4月前
|
JavaScript 前端开发 IDE
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
1313310884104708
69 0
[译] 用 Typescript + Composition API 重构 Vue 3 组件
1313310884104708
|
4月前
|
JavaScript 前端开发 API
[译] 用 Vue 3 Composition API 实现 React Context/Provider 模式
[译] 用 Vue 3 Composition API 实现 React Context/Provider 模式
1313310884104708
59 0
时光在流逝
|
1月前
|
JavaScript 前端开发 API
Vue.js 3中的Composition API：提升你的组件开发体验
Vue.js 3中的Composition API：提升你的组件开发体验
时光在流逝
42 1
chnjames
|
2月前
|
缓存 JavaScript 前端开发
深入理解 Vue 3 的 Composition API 与新特性
本文详细探讨了 Vue 3 中的 Composition API，包括 setup 函数的使用、响应式数据管理（ref、reactive、toRefs 和 toRef）、侦听器（watch 和 watchEffect）以及计算属性（computed）。我们还介绍了自定义 Hooks 的创建与使用，分析了 Vue 2 与 Vue 3 在响应式系统上的重要区别，并概述了组件生命周期钩子、Fragments、Teleport 和 Suspense 等新特性。通过这些内容，读者将能更深入地理解 Vue 3 的设计理念及其在构建现代前端应用中的优势。
chnjames
47 1
深入理解 Vue 3 的 Composition API 与新特性
土木林森
|
1月前
|
JavaScript 前端开发 API
Vue 3新特性详解：Composition API的威力
【10月更文挑战第25天】Vue 3 引入的 Composition API 是一组用于组织和复用组件逻辑的新 API。相比 Options API，它提供了更灵活的结构，便于逻辑复用和代码组织，特别适合复杂组件。本文将探讨 Composition API 的优势，并通过示例代码展示其基本用法，帮助开发者更好地理解和应用这一强大工具。
土木林森
36 2
周一同学Zelina
|
3月前
|
存储 JavaScript 前端开发
敲黑板！vue3重点！一文了解Composition API新特性：ref、toRef、toRefs
该文章深入探讨了Vue3中Composition API的关键特性，包括`ref`、`toRef`、`toRefs`的使用方法与场景，以及它们如何帮助开发者更好地管理组件状态和促进逻辑复用。
周一同学Zelina
472 3
敲黑板！vue3重点！一文了解Composition API新特性：ref、toRef、toRefs
大树营养快线
|
2月前
|
JavaScript API
vue2升级vue3：composition api中监听路由参数改变
【10月更文挑战第3天】
大树营养快线
73 2
刘大猫.
|
2月前
|
API
《vue3第四章》Composition API 的优势，包含Options API 存在的问题、Composition API 的优势
《vue3第四章》Composition API 的优势，包含Options API 存在的问题、Composition API 的优势
刘大猫.
31 0

热门文章

最新文章

  • 1
    小红书详情API接口的获取与应用
  • 2
    Python调用API接口的方法
  • 3
    实时获取小红书详情 API 数据
  • 4
    淘宝实时 API 接口丨淘宝商品详情接口（Taobao.item_get）
  • 5
    基于百炼平台qwen-max的api 打造一套 检索增强 图谱增强 基于指令的智能工具调用决策 智能体
  • 6
    GLM-4V-Flash：智谱 AI 免费开放的图像理解大模型 API 接口
  • 7
    基于百炼平台qwen-max的api 打造一套 检索增强 图谱增强 智能工具调用决策的智能体
  • 8
    API 数据接口使用与安全指南
  • 9
    使用Zabbix API
  • 10
    API接口是什么？(一篇文章全知道)
  • 1
    探索鸿蒙的蓝牙A2DP与访问API：从学习到实现的开发之旅
    77
  • 2
    怎么通过API获取电竞赛事实时数据
    21
  • 3
    Java基础-常用API-Object类
    27
  • 4
    如何接入电竞体育直播API或者SDK
    15
  • 5
    AgentScope：阿里开源多智能体低代码开发平台，支持一键导出源码、多种模型API和本地模型部署
    56
  • 6
    小红书笔记详情API接口的开发、应用与收益
    23
  • 7
    API管理平台：你用的到底是哪个？
    69
  • 8
    如何运用获得京东商品详情API接口搬运商品到自己的电商平台？（一篇文章全搞定）
    38
  • 9
    淘宝商品详情API接口系列以及应用场景
    14
  • 10
    介绍几个常用的电商API接口及其应用场景。（一篇文章全清楚）
    59

    • 相关电子书

    更多
  • Spring Boot2.0实战Redis分布式缓存
  • CUDA MATH API
  • API PLAYBOOK

    • 相关实验场景

    更多
  • 基于Assistant Api的旅游助手
  • 快速体验智能体API应用
    • 下一篇
    DataWorks售前咨询