MainView.ux

<App Theme="Basic" Background="#fff">

	<DockPanel>
		<!-- <Panel Alignment="Top" HitTestMode="None"> -->
			<!-- <StatusBarBackground Dock="Top"/> -->
			<!-- <Rectangle Height="300%" MaxHeight="10000000">
				<LinearGradient>
					<GradientStop Offset="0" Color="#FFFD"/>
					<GradientStop Offset="0.33" Color="#FFFD"/>
					<GradientStop Offset="1" Color="#0000"/>
				</LinearGradient>
			</Rectangle> -->
		<!-- </Panel> -->

		<Font File="Assets/Roboto-Regular.ttf" ux:Global="Regular" />
		<Font File="Assets/Roboto-Medium.ttf" ux:Global="Medium" />

		<Text ux:Class="Header" Font="Medium" FontSize="23"  TextColor="#fff" Margin="50,0,0,0" />
		<Text ux:Class="Body" Font="Regular" FontSize="17" TextColor="#fff" TextWrapping="Wrap" />

		<Image ux:Class="BackgroundImage" StretchMode="UniformToFill" />

		<DockPanel>
			<PageControl ux:Name="slides" ClipToBounds="true">

				<StackPanel ux:Class="Info" ux:Name="self" Padding="18" Alignment="Top" Background="#fff">
					<ImageFill File="Assets/nav-top-bg.png" />
					<!-- <BackgroundImage File="Assets/nav-top-bg.png" /> -->
			        <!-- <LinearGradient StartPoint="-.5,.5" EndPoint=".75,0.5">
			            <GradientStop Offset="0" Color="#FFFFFF" />
			            <GradientStop Offset="1" Color="#000A2E" />
			        </LinearGradient> -->
					<DropShadow Color="0, 0, 0, 0.1" Size="30" Angle="-90" Distance="8" />

					<WhileTrue ux:Name="slideOut" Value="true">
						<Move Y="-150" Duration="0.5" Easing="CubicIn" />
						<Change self.Opacity="0.0" Duration="0.5" Easing="CircularIn" />
					</WhileTrue>

					<ActivatingAnimation>
						<Change slideOut.Value="false" />
					</ActivatingAnimation>
				</StackPanel>

				<Page>
					<Viewport Perspective="400">
				        <Panel>
				            <Rectangle Width="200" Height="200" Background="#2ecc71">
				        		<NativeViewHost>
				        			<WebView Url="http://i.giphy.com/NOzweVeOkjz8s.gif" />
				        			<Clicked>
					                    <Rotate DegreesX="360" Duration="1.5" Easing="QuadraticInOut" DurationBack="0" />
					                </Clicked>
				        		</NativeViewHost>
				                
				            </Rectangle>
				        </Panel>
				    </Viewport>
					<Info>
						<Grid Columns="1*,1*" Dock="Top" Padding="0">
							<Image File="Assets/friends-icon.png" StretchMode="PointPrecise"/>
					    	<Header>Friends</Header>
					    </Grid>
					</Info>
					<BackgroundImage File="Assets/background-gradient.png" />
				</Page>

				<Page>
					<DockPanel ux:Name="self">
						<Info Dock="Top">
							<Header>Chat</Header>
						</Info>
						<Chat/>
					</DockPanel>
					<BackgroundImage File="Assets/background-gradient.png" />
				</Page>

				<Page>
					<Info>
						<Header>Cards</Header>
					</Info>
				    <StackPanel Alignment="Center"  MinWidth="200">
				        <!-- 
				        <JavaScript ux:Global="Parse" File="parse-1.5.0.js"/>
				        <JavaScript File="Parse.js"/> -->
				        <DockPanel>
				            <Text Dock="Left" Margin="0,0,10,0" TextColor="#fff">Username: </Text>
				            <TextInput Value="{username}" TextColor="#fff"/>
				        </DockPanel>
				        <DockPanel>
				            <Text Dock="Left" Margin="0,0,10,0" TextColor="#fff">Email: </Text>
				            <TextInput Value="{email}" TextColor="#fff"/>
				        </DockPanel>
				        <DockPanel>
				            <Text Dock="Left" Margin="0,0,10,0" TextColor="#fff">Password: </Text>
				            <TextInput Value="{password}" TextColor="#fff" IsPassword="true"/>
				        </DockPanel>
				        <Button Text="SignUp" Clicked="{signup}"/>
				    </StackPanel>
					<BackgroundImage File="Assets/background-gradient.png" />
				</Page>

			</PageControl>
		</DockPanel>
		<BottomBarBackground Dock="Bottom" />
	</DockPanel>
</App>