NativeScript/apps/app/ui-tests-app/flexbox/flexbox-perf-comparison.xml

<Page>
    <ActionBar id="actionbar">
        <Label id="title" text="---" />
        <ActionItem ios.systemIcon="17" android.systemIcon="ic_menu_play_clip" tap="generate" ios.position="right" />
    </ActionBar>
    <TabView id="tabview" selectedIndexChanged="selectionChanged">
        <TabView.items>
            <TabViewItem title="flex-grid">
                <TabViewItem.view>
                    <ScrollView style="flex: 1 0; height: 0;">
                        <Repeater id="repeaterFlexGrid" items="{{ $value }}">
                            <Repeater.itemTemplate>
                                <FlexboxLayout style="flex-flow: row wrap; align-items: center; border-width: 0 0 1 0; border-color: #EEEEEE">
                                    <Image src="{{ icon }}" style="flex: 0 1; margin: 6 4 4 4; border-width: 1; border-color: gray; border-radius: 16; width: 32; height: 32;" />
                                    <Label text="{{ title }}" style="flex: 1 0; width: 0; margin: 1 4 0 0;" />
                                    <Label text="{{ body }}" textWrap="true" style="width: 100%; margin: 4 4 6 4; font-size: 11;" />
                                    <Image src="~/ui-tests-app/flexbox/icons/thumbsdown.png" style="width: 18; height: 18; margin: 4;" />
                                    <Label text="{{ up }}" style="flex: 1 0; width: 0; font-size: 13;" />
                                    <Image src="~/ui-tests-app/flexbox/icons/thumbsup.png" style="width: 18; height: 18; margin: 4;" />
                                    <Label text="{{ down }}" style="flex: 1 0; width: 0; font-size: 13;" />
                                </FlexboxLayout>
                            </Repeater.itemTemplate>
                        </Repeater>
                    </ScrollView>
                </TabViewItem.view>
            </TabViewItem>
            <TabViewItem title="grid">
                <TabViewItem.view>
                    <ScrollView>
                        <Repeater id="repeaterGrid" items="{{ $value }}">
                            <Repeater.itemTemplate>
                                <GridLayout columns="*, *" rows="auto, auto, auto" borderWidth="0 0 1 0" borderColor="#EEEEEE">
                                    <Image src="{{ icon }}" colSpan="2" horizontalAlignment="left" width="32" height="32" margin="6 4 4 4" borderWidth="1" borderRadius="16" borderColor="16" borderColor="gray" />
                                    <Label text="{{ title }}" colSpan="2" margin="4 4 0 41" verticalAlignment="center" />
                                    <Label text="{{ body }}" colSpan="2" row="1" textWrap="true" margin="4 4 6 4" fontSize="11" />
                                    <Image src="~/thumbsdown.png" row="2" width="18" height="18" margin="4" horizontalAlignment="left" />
                                    <Label text="{{ up }}" row="2" fontSize="13" margin="0 0 0 26" verticalAlignment="center" />
                                    <Image src="~/thumbsup.png" row="2" col="1" width="18" height="18" margin="4" horizontalAlignment="left" />
                                    <Label text="{{ down }}" row="2" col="1" fontSize="13" margin="0 0 0 26" verticalAlignment="center" />
                                </GridLayout>
                            </Repeater.itemTemplate>
                        </Repeater>
                    </ScrollView>
                </TabViewItem.view>
            </TabViewItem>
            <TabViewItem title="flex-stack">
                <TabViewItem.view>
                    <ScrollView style="flex: 1 0; height: 0;">
                        <Repeater id="repeaterFlexStack" items="{{ $value }}">
                            <Repeater.itemTemplate>
                                <FlexboxLayout flexDirection="column">
                                    <Image src="{{ icon }}" alignSelf="center" width="32" height="32" margin="4" borderWidth="1" borderRadius="16" borderColor="16" borderColor="gray" />
                                    <Label text="{{ title }}" margin="4" />
                                    <Label text="{{ body }}" textWrap="true" margin="4" fontSize="11" />
                                    <Image src="~/thumbsdown.png" width="18" height="18" margin="4" />
                                    <Label text="{{ up }}" fontSize="13" alignSelf="center" />
                                    <Image src="~/thumbsup.png" width="18" height="18" margin="4" />
                                    <Label text="{{ down }}" fontSize="13" alignSelf="center" />
                                </FlexboxLayout>
                            </Repeater.itemTemplate>
                        </Repeater>
                    </ScrollView>
                </TabViewItem.view>
            </TabViewItem>
            <TabViewItem title="stack">
                <TabViewItem.view>
                    <ScrollView style="flex: 1 0; height: 0;">
                        <Repeater id="repeaterStack" items="{{ $value }}">
                            <Repeater.itemTemplate>
                                <StackLayout>
                                    <Image src="{{ icon }}" horizontalAlignment="center" width="32" height="32" margin="4" borderWidth="1" borderRadius="16" borderColor="16" borderColor="gray" />
                                    <Label text="{{ title }}" margin="4" />
                                    <Label text="{{ body }}" textWrap="true" margin="4" fontSize="11" />
                                    <Image src="~/thumbsdown.png" width="18" height="18" margin="4" />
                                    <Label text="{{ up }}" fontSize="13" horizontalAlignment="center" />
                                    <Image src="~/thumbsup.png" width="18" height="18" margin="4" />
                                    <Label text="{{ down }}" fontSize="13" horizontalAlignment="center" />
                                </StackLayout>
                            </Repeater.itemTemplate>
                        </Repeater>
                    </ScrollView>
                </TabViewItem.view>
            </TabViewItem>
        </TabView.items>
    </TabView>
</Page>