MainView.ux

<App Background="0.7,0.7,0.7,1">
	<Text ux:Class="Label" Alignment="Center" FontSize="20" TextWrapping="Wrap"/>

	<JavaScript File="main.js"/>

	<!-- only two images are used to reduce the sample's size -->
	<FileImageSource File="bird0.jpg" ux:Key="bird0"/>
	<FileImageSource File="bird1.jpg" ux:Key="bird1"/>

	<ClientPanel>
		<ScrollView>
			<StackPanel ItemSpacing="2" Margin="2">
				<Each Items="{items}">
					<Panel>
						<StackPanel Orientation="Horizontal" ux:Name="TheItem">
							<SolidColor Color="1,1,1,1" ux:Name="BackFill"/>
							<Rectangle Width="100" Height="75" Margin="2" CornerRadius="5">
								<ImageFill Source="{DataToResource image}" StretchMode="UniformToFill"
									Color="{tintColor}"/>
							</Rectangle>
							<Label Value="{name}" Alignment="VerticalCenter" Margin="5" Color="0,0,0,1"/>

							<WhileSwipeActive Source="DeleteSwipe">
								<Image Layer="Overlay" File="dynamite.png" Alignment="Right" Margin="13"
									ux:Name="DeleteIcon">
									<AddingAnimation>
										<Change DeleteIcon.Opacity="0" Duration="0.3"/>
										<Scale Factor="0.1" Duration="0.3"/>
									</AddingAnimation>
									<RemovingAnimation>
										<Change DeleteIcon.Opacity="0" Duration="0.3"/>
										<Scale Factor="0.5" Duration="0.3"/>
									</RemovingAnimation>
								</Image>
							</WhileSwipeActive>
						</StackPanel>

						<Panel Alignment="Right" Background="0.5,0.1,0.1,1" Clicked="{deleteItem}"
							ux:Name="DeleteNode">
							<StackPanel Alignment="Center">
								<Image File="cancel.png" Color="1,1,1,1" StretchMode="PixelPrecise"/>
								<Label Margin="20,0,20,0" Alignment="Center" Value="Delete" Color="1,1,1,1"/>
							</StackPanel>
						</Panel>
						<SwipeGesture Direction="Left" LengthNode="DeleteNode" ux:Name="DeleteSwipe" Type="Active"/>
						<SwipingAnimation Source="DeleteSwipe">
							<Move Target="TheItem" X="-1" RelativeTo="Size" RelativeNode="DeleteNode"/>
						</SwipingAnimation>
						<Swiped Source="DeleteSwipe" How="ToInactive">
							<Change BackFill.Color="0.9,1,0.9,1" Duration="0.2"/>
						</Swiped>

						<Panel Alignment="Left" Background="0.9,0.8,0.9,1"	ux:Name="SomethingNode">
							<StackPanel Alignment="Center">
								<Image File="unknown.png" Color="0,0,0,1" StretchMode="PixelPrecise"
									ux:Name="MysteryIcon"/>
								<Label Margin="20,0,20,0" Value="Mystery" Color="0,0,0,1"/>
							</StackPanel>
							<Clicked>
								<ToggleSwipeActive Target="SomethingSwipe"/>
							</Clicked>
						</Panel>
						<SwipeGesture  Direction="Right" LengthNode="SomethingNode"
							ux:Name="SomethingSwipe" Type="Active"/>
						<SwipingAnimation Source="SomethingSwipe">
							<Move Target="TheItem" X="1" RelativeTo="Size" RelativeNode="SomethingNode"/>
						</SwipingAnimation>
						<Swiped Source="SomethingSwipe">
							<Scale Target="MysteryIcon" Factor="2.5" Duration="0.5" DurationBack="0.2"/>
							<Change MysteryIcon.Color="0,1,1,1" Duration="0.5" DurationBack="0.2"/>
						</Swiped>

						<LayoutAnimation>
							<Move RelativeTo="PositionChange" Vector="1" Duration="0.25"/>
						</LayoutAnimation>
						<RemovingAnimation>
							<Change TheItem.Opacity="0" Duration="0.15"/>
							<Scale Factor="0.8" Duration="0.15"/>
						</RemovingAnimation>
					</Panel>
				</Each>
			</StackPanel>
		</ScrollView>
	</ClientPanel>
</App>