<Page

xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">

<Page.actionBar>

<ActionBar title="Settings" />

</Page.actionBar>

<ScrollView>

<StackLayout style="margin: 15;">

<Label text="Duration (in seconds):" />

<GridLayout columns="*,auto">

<Slider col="0" minValue="0" maxValue="10" value="{{ duration }}" />

<Label col="1" text="{{ duration }}" />

</GridLayout>

<Label text="Delay (in seconds):" />

<GridLayout columns="*,auto">

<Slider minValue="0" maxValue="10" value="{{ delay }}" />

<Label col="1" text="{{ delay }}" />

</GridLayout>

<Label text="Iterations count:" />

<GridLayout columns="*,auto">

<Slider minValue="0" maxValue="10" value="{{ iterations }}" />

<Label col="1" text="{{ iterations }}" />

</GridLayout>

<GridLayout rows="auto,auto">

<Label text="Direction:"/>

<SegmentedBar row="1" id="direction" style="margin: 5" selectedIndex="{{ selectedDirectionIndex }}">

<SegmentedBar.items>

<SegmentedBarItem title="Normal" />

<SegmentedBarItem title="Reverse" />

</SegmentedBar.items>

</SegmentedBar>

</GridLayout>

<GridLayout rows="auto,auto">

<Label text="Fill mode:" />

<SegmentedBar row="1" id="fill" style="margin: 5" selectedIndex="{{ selectedFillIndex }}">

<SegmentedBar.items>

<SegmentedBarItem title="None" />

<SegmentedBarItem title="Forwards" />

</SegmentedBar.items>

</SegmentedBar>

</GridLayout>

<Button text="Animate" tap="{{ onAnimate }}" height="40"/>

<AbsoluteLayout height="100" clipToBounds="true" backgroundColor="LightGray" margin="5">

<Image id="img" src="~/res/icon_100x100.png" width="50" height="50" left="0" top="25" />

</AbsoluteLayout>

</StackLayout>

</ScrollView>

</Page>