UWP Composition API - New FlexGrid 锁定行列

简介: 原文:UWP Composition API - New FlexGrid 锁定行列如果之前看了 UWP Jenkins + NuGet + MSBuild 手把手教你做自动UWP Build 和 App store包 这篇的童鞋,针对VS2017,需要对应更新一下配置,需要的童鞋点击查看一下,在文章最后。
原文: UWP Composition API - New FlexGrid 锁定行列

如果之前看了 UWP Jenkins + NuGet + MSBuild 手把手教你做自动UWP Build 和 App store包

这篇的童鞋,针对VS2017,需要对应更新一下配置,需要的童鞋点击查看一下,在文章最后。

 

之前写过一篇 锁定列的FlexGrid,没看过的童鞋可以去先看一下那一篇。

先放上效果图

制作新控件的背景是SDK升级到了14393,Composition API 有了相应的改变

对我们有较大的影响就是:

10586:
在 10586 版 SDK 中, ElementCompositionPreview.GetElementVisual 方法返回的 Visual 仅由调用者控制。通过对应的 Visual 对一个 UIElement 进行的操作纯粹只会对 XAML 施加增量影响。这是因为返回的 Visual (在底层)是 UIElement 的 Visual 作为根 Visual 的子项。

14393:

在 14332 版及后续版本中, ElementCompositionPreview.GetElementVisual 方法返回的 Visual与 XAML 布局操作的 Visual 相同。这意味着不同于 11 月更新,现在通过对应的 Visual 对一个 UIElement 元素进行的操作会绝对地改变 XAML 布局。

因为调用者和 XAML 都在操作同一个 Visual,XAML 有可能会覆盖调用者的赋值。以下是 XAML 可能设置的属性:

  • Offset
  • Size
  • Opacity
  • TransformMatrix
  • Clip
  • CompositeMode

XAML 对一个互操作 Visual 属性进行更新的规则如下:

  1. XAML 在布局过程中会覆写互操作 Visual 的属性值。

  2. XAML 不会读回由程序代码直接对互操作 Visual 的属性赋的值。

  3. XAML 只在新值不等于上次赋的旧值时,才会对互操作 Visual 的属性赋值。亦即如果 XAML 一侧的属性值没有发生变化,则 XAML 不会去更改 Visual 一侧的属性值。

  4. XAML 一侧的上次赋值的值默认与互操作 Visual 属性的默认值一致。也就是说如果 XAML 一侧的属性值保持在默认值不变,则 XAML 不会去更新 Visual 一侧的属性值(例如 XAML 布局中的 offset,对应 Visual 中的 Visual.Offset,默认值为 [0,0])。

  5. Visual 一侧的属性值不会覆写到 XAML 一侧。

  6. UI 元素最终呈现的效果取决于最后生效的值(Visual 一侧的取值或 XAML 覆写 Visual 的值)。

总的来讲就是以前Visual 是绝对由我来控制,而现在XAML也会共同影响Visual 的最终值。

 

这样一搞,宝宝就不开心了,直接把以前的项目升级到14393,FlexGrid各种问题。

秉着吐槽不如自己动手的心情,让我们自己创建New FlexGird

首先,我们来看一下整个New FlexGird的构成,整个控件是一个ListView,头(Column Header 和 锁定的行)都放在ListView的ScrollViewer的TopHeader里面。

下面是整个New FlexGird的模板。

 

 <ControlTemplate TargetType="local:NewFlexGrid">
                    <Border x:Name="RootBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                        <ScrollViewer x:Name="ScrollViewer" Style="{StaticResource FlexGridScrollViewerStyle}" AutomationProperties.AccessibilityView="Raw" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                            <ScrollViewer.TopHeader>
                                <StackPanel Orientation="Vertical" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
                                    <local:NewFlexGridColumnHeader x:Name="ColumnHeader" FrozenCount="{TemplateBinding ColumnHeaderFrozenCount}" SelectionMode="None" IsItemClickEnabled="True" Style="{StaticResource NoScrollViewerListViewStyle}" ItemsSource="{TemplateBinding ColumnsHeaderItemsSource}" ItemTemplate="{TemplateBinding ColumnsHeaderItemTemplate}">
                                        <local:NewFlexGridColumnHeader.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <StackPanel Orientation="Horizontal"/>
                                            </ItemsPanelTemplate>
                                        </local:NewFlexGridColumnHeader.ItemsPanel>
                                    </local:NewFlexGridColumnHeader>
                                    <local:NewFlexGridFrozenRows x:Name="FrozenRows" ItemTemplate="{TemplateBinding ItemTemplate}" ItemsSource="{TemplateBinding FrozenRowsItemsSource}" IsItemClickEnabled="True" SelectionMode="None" Style="{StaticResource NoScrollViewerListViewStyle}" ItemContainerStyle="{TemplateBinding ItemContainerStyle}">
                                        <local:NewFlexGridFrozenRows.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <StackPanel Orientation="Vertical"/>
                                            </ItemsPanelTemplate>
                                        </local:NewFlexGridFrozenRows.ItemsPanel>
                                    </local:NewFlexGridFrozenRows>
                                </StackPanel>
                            </ScrollViewer.TopHeader>

                            <ItemsPresenter HorizontalAlignment="Left"  VerticalAlignment="Top" FooterTransitions="{TemplateBinding FooterTransitions}" FooterTemplate="{TemplateBinding FooterTemplate}" Footer="{TemplateBinding Footer}"  Padding="{TemplateBinding Padding}"/>
                            <!--HeaderTemplate="{TemplateBinding HeaderTemplate}" Header="{TemplateBinding Header}" HeaderTransitions="{TemplateBinding HeaderTransitions}"-->
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>

在获取到ScrollViewer元素以及New FlexGird Loaded的事件当中,我们需要准备Composition 的元素

        private void PrepareCompositionAnimation()
        {
            if (_scrollViewer != null)
            {
                if (_scrollerViewerManipulation == null)
                {
                    _scrollerViewerManipulation = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(_scrollViewer);

                }
                if (_offsetXAnimation == null)
                {
                    _offsetXAnimation = _scrollerViewerManipulation.Compositor.CreateExpressionAnimation("-min(0,ScrollManipulation.Translation.X)");
                    _offsetXAnimation.SetReferenceParameter("ScrollManipulation", _scrollerViewerManipulation);
                    _columnsHeader._offsetXAnimation = _offsetXAnimation;
                    _frozenRows._offsetXAnimation = _offsetXAnimation;
                }
            }
        }

看过之前几遍的Composition 相关文章的童鞋应该知道这是在做什么,不知道的童鞋请先看一下UWP Composition API - PullToRefresh

NewFlexGridColumnHeader 是一个横向的ListView,它没有ScrollViewer,通过New FlexGird中的ColumnHeaderFrozenCount/ColumnsHeaderItemsSource/ColumnsHeaderItemTemplate属性进行关联。

在NewFlexGridColumnHeader 的PrepareContainerForItemOverride方法中,我们使用前面准备好的_offsetXAnimation,让符合条件的(具体就是第几个Column header)执行动画。

        protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
        {
            base.PrepareContainerForItemOverride(element, item);
            int index = this.IndexFromContainer(element);
            if (index > -1 && index < FrozenCount && _offsetXAnimation != null)
            {
                Canvas.SetZIndex((element as UIElement), 10);
                var _frozenContentVisual = ElementCompositionPreview.GetElementVisual(element as UIElement);

                _frozenContentVisual.StartAnimation("Offset.X", _offsetXAnimation);
            }
        }

 

NewFlexGridFrozenRows 是一个竖向的ListView,它也是没有ScrollViewer,用于存放锁定的行,通过New FlexGird中的FrozenRowsItemsSource/ItemTemplate/ItemContainerStyle等属性关联。

在NewFlexGridFrozenRows 的PrepareContainerForItemOverride方法中,我们主要做的是注册NewFlexGridFrozenRows_Loaded 事件,

        protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
        {
            base.PrepareContainerForItemOverride(element, item);
            var flexGridItem = element as ListViewItem;
            flexGridItem.RightTapped -= FlexGridItem_RightTapped;
            flexGridItem.Holding -= FlexGridItem_Holding;
            flexGridItem.RightTapped += FlexGridItem_RightTapped;
            flexGridItem.Holding += FlexGridItem_Holding;
            flexGridItem.Loaded += NewFlexGridFrozenRows_Loaded;
        }

当Item Loaded的时候,我们将之前准备好的_offsetXAnimation,通过我们定义一个附件属性来得知是哪个元素需要做Frozen的动画。

        private void NewFlexGridFrozenRows_Loaded(object sender, RoutedEventArgs e)
        {
            (sender as ListViewItem).Loaded -= NewFlexGridFrozenRows_Loaded;

            var templateRoot = (sender as ListViewItem).ContentTemplateRoot;

            var child = templateRoot.GetAllChildren();
            var _frozenContent = child.Where(x => FlexGridItemFrozenContent.GetIsFrozenContent(x));
            if (_frozenContent != null && _offsetXAnimation != null)
            {
                foreach (var item in _frozenContent)
                {
                    var _frozenContentVisual = ElementCompositionPreview.GetElementVisual(item);

                    _frozenContentVisual.StartAnimation("Offset.X", _offsetXAnimation);

                }
            }
        }

在我们New FlexGird 也跟NewFlexGridFrozenRows 当中一样的操作。

在Unloaded事件中我们要释放掉一些资源防止内存泄漏,并且在合适的时机去释放掉全部的Composition 资源(见Dispose 方法)

        private void NewFlexGrid_Unloaded(object sender, RoutedEventArgs e)
        {
            if (_offsetXAnimation != null)
            {
                _offsetXAnimation.Dispose();
                _offsetXAnimation = null;
            }

            //don't dispose at this moment,some page NavigationCacheMode is required
            //you must dispose it at page back.
            //if (_scrollerViewerManipulation != null)
            //{
            //    _scrollerViewerManipulation.Dispose();
            //    _scrollerViewerManipulation = null;
            //}
        }
        public void Dispose()
        {
            if (_offsetXAnimation != null)
            {
                _offsetXAnimation.Dispose();
                _offsetXAnimation = null;
            }

            if (_scrollerViewerManipulation != null)
            {
                _scrollerViewerManipulation.Dispose();
                _scrollerViewerManipulation = null;
            }
        }

在我们的New FlexGird的ItemTemplate里面定义好锁定的列(蓝色部分)

   <DataTemplate x:Key="WideScreenItemTemplate">
            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="110"/>
                    <ColumnDefinition Width="110" />
                    <ColumnDefinition Width="110" />
                    <ColumnDefinition Width="110" />
                    <ColumnDefinition Width="110" />
                    <ColumnDefinition Width="110" />
                    <ColumnDefinition Width="110" />
                </Grid.ColumnDefinitions>
                <Grid Background="Green" Width="110"  flexgrid:FlexGridItemFrozenContent.IsFrozenContent="True">
                    <TextBlock Text="{Binding Age}" />
                </Grid>
                <TextBlock Text="{Binding Name}" Grid.Column="1"/>
                <TextBlock Text="{Binding IsMale}" Grid.Column="2"/>
                <Grid Background="Yellow" Width="110"  Grid.Column="3" >
                    <TextBlock Text="{Binding Age}" />
                </Grid>
                <TextBlock Text="{Binding Name}" Grid.Column="4"/>
                <TextBlock Text="{Binding IsMale}" Grid.Column="5"/>
                <TextBlock Text="{Binding Name}" Grid.Column="6"/>
            </Grid>
        </DataTemplate>

 ok,运行起来就实现了锁定行列。

在使用当中,可能有童鞋发现,还有一些其他问题。

1.锁定的列或者行,由于是透明背景,没法盖住移动的部分,解决办法是 给你要锁定的列元素加上 Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

2.Pointer over的样式,由于1里面加了不透明的色,这部分会挡住ListViewitem PointerOver的颜色,解决办法是
重写ListviewItem的样式,由微软文档可知道,ListViewItem有2种模板

我们这里把第2种模板重写一下,将模板里面的PointerOverBorder元素上移动到ContentBorder之上(就是Xaml里面把它移动到ContentBorder后面),具体的模板

请查看NewFlexGridItemStyle

3.当Pointer press下去的时候,冻结的列的前端会显示出来它后面挡住的内容,解决办法是

  <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" flexgrid:FlexGridItemFrozenContent.IsFrozenContent="True">
                    <StackPanel Margin="-15,0,0,0" Padding="15,4,0,4" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" VerticalAlignment="Center">
                        <TextBlock Text="{x:Bind Name, Mode=OneWay}"}"
                               TextTrimming="CharacterEllipsis"/>
                    </StackPanel>
                </Border>

将用于挡住后面内容的色块,这里是StackPanel,加上一个 负X(-15)的Margin。那大家可能会问为什么不加在Border上面,根据14393 SDK的更新中,如果作为Visual 的内容具有初始的位置属性的话,这种会影响到Visual 的最终值。大家可以试试给加了flexgrid:FlexGridItemFrozenContent.IsFrozenContent="True" 的元素加上一些影响位置的属性设置,都会导致最终动画的无效。

 

不知道Creators Update里面会不会其他变化,好像有了新的API,等我研究好了,再发给大家看看。

最后开源有益:New FlexGird,大家拿去用吧。。

 

目录
相关文章
|
3月前
|
JavaScript 前端开发 IDE
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
|
3月前
|
JavaScript 前端开发 API
[译] 用 Vue 3 Composition API 实现 React Context/Provider 模式
[译] 用 Vue 3 Composition API 实现 React Context/Provider 模式
|
12天前
|
缓存 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 的设计理念及其在构建现代前端应用中的优势。
23 0
深入理解 Vue 3 的 Composition API 与新特性
|
2月前
|
存储 JavaScript 前端开发
敲黑板!vue3重点!一文了解Composition API新特性:ref、toRef、toRefs
该文章深入探讨了Vue3中Composition API的关键特性,包括`ref`、`toRef`、`toRefs`的使用方法与场景,以及它们如何帮助开发者更好地管理组件状态和促进逻辑复用。
敲黑板!vue3重点!一文了解Composition API新特性:ref、toRef、toRefs
|
20天前
|
JavaScript API
|
3天前
|
API
《vue3第四章》Composition API 的优势,包含Options API 存在的问题、Composition API 的优势
《vue3第四章》Composition API 的优势,包含Options API 存在的问题、Composition API 的优势
11 0
|
3月前
|
前端开发 JavaScript API
Vue 3 新特性:在 Composition API 中使用 CSS Modules
Vue 3 新特性:在 Composition API 中使用 CSS Modules
|
3月前
|
JavaScript 编译器 API
什么是Composition API
【8月更文挑战第16天】什么是Composition API
227 2
|
3月前
|
JavaScript 前端开发 API
Vue.js 3.x新纪元:Composition API引领潮流,Options API何去何从?前端开发者必看的抉择指南!
【8月更文挑战第30天】Vue.js 3.x 引入了 Composition API,为开发者提供了更多灵活性和控制力。本文通过示例代码对比 Composition API 与传统 Options API 的差异,帮助理解两者在逻辑复用、代码组织、类型推断及性能优化方面的不同,并指导在不同场景下的选择。Composition API 改善了代码可读性和维护性,尤其在大型项目中优势明显,同时结合 TypeScript 提供更好的类型推断和代码提示,减少错误并提升开发效率。尽管如此,在选择 API 时仍需考虑项目复杂性、团队熟悉度等因素。
49 0
|
3月前
|
JavaScript 前端开发 测试技术
[译] 用 Vue.js 3 Composition API 创建 i18n 插件
[译] 用 Vue.js 3 Composition API 创建 i18n 插件