需求是第一列锁定,那么怎么让锁定列不跟着滚动条向做移动呢?

其实很简单,让锁定列跟scrollviewer的滚动做反方向移动。

先看一下这个控件的模板,嗯,其实很简单,就是ListView的模板,不同的是ScrollViewer 加上了TopHeader作为Column header。

 <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>
                                <Grid>
                                    <ListView x:Name="ColumnHeader" SelectionMode="None" IsItemClickEnabled="True" Style="{StaticResource NoScrollViewerListViewStyle}" ItemsSource="{TemplateBinding ColumnsHeaderItemsSource}" ItemTemplate="{TemplateBinding ColumnsHeaderItemTemplate}">
                                        <ListView.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <StackPanel Orientation="Horizontal"/>
                                            </ItemsPanelTemplate>
                                        </ListView.ItemsPanel>
                                    </ListView>
                                    <ListView x:Name="FrozenColumnsHeader" Visibility="{TemplateBinding FrozenColumnsVisibility}" HorizontalAlignment="Left" VerticalAlignment="Stretch" SelectionMode="None" IsItemClickEnabled="True" Style="{StaticResource NoScrollViewerListViewStyle}" ItemsSource="{TemplateBinding FrozenColumnsHeaderItemsSource}" ItemTemplate="{TemplateBinding FrozenColumnsHeaderItemTemplate}">
                                        <ListView.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <StackPanel Orientation="Horizontal"/>
                                            </ItemsPanelTemplate>
                                        </ListView.ItemsPanel>
                                    </ListView>
                                </Grid>
                            </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>

而这个自定义的ListView的ItemContainer需要重写。

        protected override bool IsItemItsOwnContainerOverride(object item)
        {
            return item is FlexGridItem;
            return base.IsItemItsOwnContainerOverride(item);
        }

        protected override DependencyObject GetContainerForItemOverride()
        {
            return new FlexGridItem();
            return base.GetContainerForItemOverride();
        }

这个重写的FlexGridItem 是继承于ListVIewItem,ListViewItem的模板也得重写,重点改变在下面:

                            <Border x:Name="ContentContainer">
                                <Grid x:Name="InnerDragContent">
                                    <Border x:Name="ContentBorder"
                                        Background="{TemplateBinding Background}"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}"
                                        Margin=">
                                        <Grid>
                                            <ContentPresenter x:Name="contentPresenter"
                                                          ContentTransitions="{TemplateBinding ContentTransitions}"
                                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                                          Content="{TemplateBinding Content}"
                                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                           />
                                            <!-- 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. -->
                                            <Rectangle x:Name=" Visibility="{TemplateBinding FrozenColumnsVisibility}" Margin="-10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Stretch" Fill="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>
                                            <ContentPresenter x:Name="frozenContent" Visibility="{TemplateBinding FrozenColumnsVisibility}"
                                                          ContentTransitions="{TemplateBinding ContentTransitions}"
                                                          HorizontalAlignment="Left"
                                                          ContentTemplate="{TemplateBinding FrozenColumnsItemTemplate}"
                                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                          />
frozenContent就是我们将要锁定的列。在FlexGridItem里面我们让frozenContent跟着Scrollviewer 丝滑的水平滑动.
        internal void StartAnimation(ScrollViewer sv)
        {
            _sv = sv;
            if (_frozenContent == null || _sv == null || _pressedHider == null || _frozenContentVisual != null)
            {
                return;
            }
            _scrollerViewerManipulation = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(sv);
            _compositor = _scrollerViewerManipulation.Compositor;
            _offsetAnimation = _compositor.CreateExpressionAnimation("-min(0,ScrollManipulation.Translation.X)");
            _offsetAnimation.SetReferenceParameter("ScrollManipulation", _scrollerViewerManipulation);

            _frozenContentVisual = ElementCompositionPreview.GetElementVisual(_frozenContent);
            _pressedHiderVisual = ElementCompositionPreview.GetElementVisual(_pressedHider);
            _frozenContentVisual.StartAnimation("Offset.X", _offsetAnimation);
            _pressedHiderVisual.StartAnimation("Offset.X", _offsetAnimation);
        }

看过之前使用UWP Composition API的童鞋肯定对这个代码还是很眼熟。ScrollViewer 向右移动100,锁定的内容也向右移动100,这样看起来锁定的内容就像是不动的一样。

不过这种由ListView继续的Grid 局限是比较多,不能随自己的想法来操作ScrollViewer。想要更多功能的童鞋可以看看DataGrid.

开源有益:FlexGrid

注意: Composition API 只支持10586以及更高的版本,判断条件如下:

使用条件:

    // Windows build 10240 and later.
    if (ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 1))
    {
        ...
    }

    // Windows build10586 and later.
    if (ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 2))
    {
        ...
    }

    // Windows build14332 and later.
    if (ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 3))
    {
        ...
    }
调试了下
1. Windows build14332 and later: 1,2,3都为true。 2. Windows build10586 and later: 1,2为true。
3. Windows build 10240 and later: 1为true。

因为10586之前的版本是不支持Composition API的。所以使用的时候记得判断:

    // Windows build10586 and later.
    if (ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 2))
    {
        ...
    }
												





											

UWP Composition API - 锁定列的FlexGrid的更多相关文章

  1. UWP Composition API - New FlexGrid 锁定行列

    如果之前看了 UWP Jenkins + NuGet + MSBuild 手把手教你做自动UWP Build 和 App store包 这篇的童鞋,针对VS2017,需要对应更新一下配置,需要的童鞋点 ...

  2. UWP Composition API - GroupListView(二)

    还是先上效果图: 看完了上一篇UWP Composition API - GroupListView(一)的童鞋会问,这不是跟上一篇一样的吗??? 骗点击的?? No,No,其实相对上一个有更简单粗暴 ...

  3. UWP Composition API - GroupListView(一)

    需求: 光看标题大家肯定不知道是什么东西,先上效果图: 这不就是ListView的Group效果吗?? 看上去是的.但是请听完需求.1.Group中的集合需要支持增量加载ISupportIncreme ...

  4. UWP Composition API - RadialMenu

    用Windows 8.1的童鞋应该知道OneNote里面有一个RadialMenu.如下图,下图是WIn10应用Drawboard PDF的RadialMenu,Win8.1的机器不好找了.哈哈,由于 ...

  5. UWP Composition API - PullToRefresh

    背景: 之前用ScrollViewer 来做过 PullToRefresh的控件,在项目一些特殊的条件下总有一些问题,比如ScrollViewer不会及时到达指定位置.于是便有了使用Compositi ...

  6. UWP中使用Composition API实现吸顶(1)

    前几天需要在UWP中实现吸顶,就在网上找了一些文章: 吸顶大法 -- UWP中的工具栏吸顶的实现方式之一 在UWP中页面滑动导航栏置顶 发现前人的实现方式大多是控制ListViewBase的Heade ...

  7. [UWP小白日记-12]使用新的Composition API来实现控件的阴影

    前言 看了好久官方的Windows UI Dev Labs示例好久才有点心得,真是头大.(其实是英语幼儿园水平(⊙﹏⊙)b) 真的网上关于这个API的资料可以说几乎没有. 正文 首先用这东西的添加WI ...

  8. 【技巧】datagrid锁定列后重新加载时出现错位问题的解决

    [问题描述]:有时候datagrid设置了锁定列后,在重新加载datagrid数据时,出现锁定列与非锁定列数据错位的问题,如图: [问题分析]:查看css样式我们发现,锁定的列和非锁定的列属于两个不同 ...

  9. UWP中使用Composition API实现吸顶(2)

    在上一篇中我们讨论了不涉及Pivot的吸顶操作,但是一般来说,吸顶的部分都是Pivot的Header,所以在此我们将讨论关于Pivot多个Item关联同一个Header的情况. 老样子,先做一个简单的 ...

随机推荐

  1. 值得注意的ibatis动态sql语法格式

    一.Ibatis常用动态sql语法,简单粗暴用一例子 <select id="iBatisSelectList" parameterClass="java.util ...

  2. 取消IE默认下载工具为迅雷

    需求:企业访问内部WEB系统下载文件时,IE默认下载工具设置为迅雷,则弹出迅雷下载框.现需要直接弹出IE下载保存框. 方案:打开迅雷,进行撤销默认下载工具. 1.迅雷5: 1.1. 打开迅雷下载工具 ...

  3. linux REDHAT6.4下安装ArcGIS Server 10.1

    1 安装环境 因为Linux的发行版本比较多,我们在使用的时候请严格按照官网给的给出的版本,在官网上给出的是经过严格测试的,如果采用其他的,即便安装上了,在后续的运作中出现问题,这个可就麻烦了,官网对 ...

  4. java的IO操作之--RandomAccessFile

    目标: 1)掌握RandomAccessFile类的作用. 2)用RandomAccessFile读取指定位置的数据. 具体内容 RandomAccessFile类的主要功能是完成随机读取功能,可以读 ...

  5. hdu 1005:Number Sequence(水题)

    Number Sequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  6. OUYA设备的购买和安装

    OUYA设备的购买和安装 在为OUYA这款游戏终端做具体的开发之前,建议读者先上手感受一下这款设备的游戏体验.本节所涉及的内容包括,OUYA设备的购买.安装.设置,以及最终上手开始游戏这一系列的过程本 ...

  7. python_字典

    1. 字典的定义 字典由多个键及其对应的值构成(我们也把键/值对称为项).键是唯一的,值不唯一.键可以是数字.字符串甚至是元组. 2. 字典的创建 (1) phonebook = {"} 名 ...

  8. Hadoop JobHistory

    hadoop jobhistory记录下已运行完的MapReduce作业信息并存放在指定的HDFS目录下,默认情况下是没有启动的,需要配置完后手工启动服务. mapred-site.xml添加如下配置 ...

  9. [开发]Win7环境下Eclipse连接Hadoop2.2.0

    准备: 确保hadoop2.2.0集群正常运行 1.eclipse中建立mven工程,并编辑pom文件如下 <dependencies> <dependency> <gr ...

  10. 【转】用java实例学习MVC模式

    .1 MVC模式 MVC是三个单词的缩写,这三个单词分别为:模型(Model).视图(View)和控制(Controller).MVC模式的目的就是实现Web系统的职能分工.下面以J2EE开发进行介绍 ...