diff --git a/apps/app/ui-tests-app/list-view/first-image.png b/apps/app/ui-tests-app/list-view/first-image.png new file mode 100644 index 000000000..8d322529c Binary files /dev/null and b/apps/app/ui-tests-app/list-view/first-image.png differ diff --git a/apps/app/ui-tests-app/list-view/list-view.css b/apps/app/ui-tests-app/list-view/list-view.css new file mode 100644 index 000000000..20a57ed7d --- /dev/null +++ b/apps/app/ui-tests-app/list-view/list-view.css @@ -0,0 +1,8 @@ +Label, Button { + font-size: 8; +} + +ListView { + border-width: 1; + margin: 1; +} \ No newline at end of file diff --git a/apps/app/ui-tests-app/list-view/list-view.ts b/apps/app/ui-tests-app/list-view/list-view.ts new file mode 100644 index 000000000..16c8229d2 --- /dev/null +++ b/apps/app/ui-tests-app/list-view/list-view.ts @@ -0,0 +1,60 @@ +import { EventData } from 'data/observable'; +import { ObservableArray } from "data/observable-array"; +import { View, KeyedTemplate } from "ui/core/view"; +import { Page } from 'ui/page'; +import { ViewModel, Item } from './main-view-model'; +import { ListView } from "ui/list-view"; +import { Label } from "ui/label"; +import { GridLayout } from "ui/layouts/grid-layout"; +import { Color } from "color"; + +export function selectItemTemplate(item: Item, index: number, items: ObservableArray): string { + return item.id % 10 === 0 ? "red" : item.id % 2 === 0 ? "green" : "yellow"; +} + +export function pageLoaded(args: EventData) { + let page = args.object; + page.bindingContext = new ViewModel(); + + let lv4 = page.getViewById("lv4"); + lv4.itemTemplateSelector = (item: Item, index: number, items: ObservableArray) => { + return index % 10 === 0 ? "red" : index % 2 === 0 ? "green" : "yellow"; + }; + + let createLabel = (backgroundColor: Color) => { + let label = new Label(); + label.bind({ + sourceProperty: null, + targetProperty: "text", + expression: "$value" + }); + label.style.backgroundColor = backgroundColor; + return label; + }; + + lv4.itemTemplates = new Array( + { + key: "red", + createView: () => { return createLabel(new Color("red")); } + }, + { + key: "green", + createView: () => { return createLabel(new Color("green")); } + }, + { + key: "yellow", + createView: () => { return createLabel(new Color("yellow")); } + } + ); +} + +let scrollToBottom = true; +export function onScroll(args: EventData){ + let page = (args.object).page; + let gridLayout = page.getViewById("grid-layout"); + for (let i = 0, length = gridLayout.getChildrenCount(); i < length; i++){ + let listView = gridLayout.getChildAt(i); + listView.scrollToIndex(scrollToBottom ? listView.items.length - 1 : 0); + } + scrollToBottom = !scrollToBottom; +} \ No newline at end of file diff --git a/apps/app/ui-tests-app/list-view/list-view.xml b/apps/app/ui-tests-app/list-view/list-view.xml new file mode 100644 index 000000000..791dea4ff --- /dev/null +++ b/apps/app/ui-tests-app/list-view/list-view.xml @@ -0,0 +1,50 @@ + + +