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

其实很简单,让锁定列跟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="pressedHider" Width="" Opacity="" 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. win10 UWP 等级控件Building a UWP Rating Control using XAML and the Composition API | XAML Brewer, by Diederik Krols

    原文:Building a UWP Rating Control using XAML and the Composition API | XAML Brewer, by Diederik Krols ...

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

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

  9. Windows Composition API 指南 - 认识 Composition API

    微软在 Windows 10中 面向通用 Windows 应用 (Universal Windows Apps, UWA) 新引入了一套用于用户界面合成的 API:Composition API.Co ...

随机推荐

  1. Believe Me , I Can !

    Believe Me , I Can ! ---DF 第一阶段:(年底1-27之前) 1.  熟练使用JavaScript/CSS/HTML,熟悉HTML5 / CSS3: 2.  熟悉JavaScr ...

  2. web.config SetAttributes

    <appSettings> <add key="DomainProxy" value="http://e3api.lcsyzx.cn/api/" ...

  3. yum---Linux软件安装与管理

    查询: yum list #查询所有可用的软件包列表 yum search keywords #搜索服务器上所有和关键字相关的软件包 安装: yum -y install 包名 options: in ...

  4. 关于在Xcode控制台打印的注意点

    注意!!在控制台中打印语句的返回值,这句代码也算是被执行过了一次 比如在下列代码的if语句执行之前,现在控制台打印 [_dataBaseexecuteUpdate:createSql] 的布尔值 if ...

  5. Windows 下安装 MongoDB

    Windows 下安装 MongoDB 的步骤:1.官网www.mongodb.com下载安装包或zip包2.解压下载的文件到文件夹 D:\mongo .3.使用管理员权限打开CMD,导航到目录 D: ...

  6. node.js

    学习网址:http://www.jdon.com/idea/nodejs/

  7. Unity3D性能优化

    一.美术资源优化   1.动态物体,角色.怪物.NPC (1)控制面的数量,300-2000个 (2)控制Skinner Mesh Renderer的数量,1个 (3)控制材质数量,1-3个 (4)控 ...

  8. [Algorithm] 群体智能优化算法之粒子群优化算法

    同进化算法(见博客<[Evolutionary Algorithm] 进化算法简介>,进化算法是受生物进化机制启发而产生的一系列算法)和人工神经网络算法(Neural Networks,简 ...

  9. mysql 语法

    -create database database_name; show databases;show tables;                                 | -creat ...

  10. Geoserver+Tomcat+GeoWebCache搭建地图服务

    依赖TomcatGeoserverGeoWebCache环境部署JDKTomcat服务器Geoserver配置GeoWebCache配置环境启动使用使用geowebcache进行切片 依赖 Tomca ...