Layout

<App>
	<StateGroup ux:Name="LiveCallGroup">
		<State ux:Name="RestoreLiveCall">
			<!-- Tab Area -->
			<Move Target="LiveCallTabArea" Y="0" RelativeTo="ParentSize" Duration="0.2"/>
			<Change LiveCallTabArea.Opacity="0.5" Duration="0.3"/>

			<!-- LiveCall Area -->
			<Change LiveCallArea.Opacity="0.5" Duration="0.3"/>
			<Move Target="LiveCallArea" Y="0.7" RelativeTo="ParentSize" Duration="0.2"/>
		</State>

		<State ux:Name="ActiveLiveCall">
			<!-- Z order -->
			<Change LiveCallTabArea.ZOffset="2"/>
			<Change LiveCallArea.ZOffset="2"/>

			<!-- Tab Area -->
			<Move Target="LiveCallTabArea" Y="-1" RelativeTo="Size" Duration="0.2"/>
			<Change LiveCallTabArea.Opacity="1" Duration="0.3"/>

			<!-- LiveCall Area -->
		</State>
	</StateGroup>

	<Panel Height="100%" Background="#eee">
		<Panel ux:Name="DefaultPanel" Width="100%" Height="30%" Y="70%" Background="#000">
			<Text Value="Show Up Panel" Alignment="Center" Color="#fff">
				<Tapped>
					<Set LiveCallGroup.Active="ActiveLiveCall"/>
				</Tapped>
			</Text>
		</Panel>

		<Grid ux:Name="LiveCallTabArea" Width="100%" Height="10%" Y="100%" Background="#eee" RowCount="1" ColumnCount="2">
			<Rectangle Height="100%">
				<Text Value="Camera" Alignment="Center"/>
			</Rectangle>
			<Rectangle Height="100%">
				<Text Value="Gallery" Alignment="Center"/>
			</Rectangle>
		</Grid>

		<Panel ux:Name="LiveCallArea" Width="100%" Height="100%" Background="#fff" Y="70%">
			<Button Width="100%" Height="10%" Y="0">
				<Text Value="Close Panel" Y="0" Alignment="Center"/>
				<Tapped>
					<Set LiveCallGroup.Active="RestoreLiveCall"/>
				</Tapped>
			</Button>
			<SwipeGesture ux:Name="swipeUp" Direction="Up" Type="Active" />
			<SwipeGesture ux:Name="swipeDown" Direction="Down" Type="Active" />

			<SwipingAnimation Source="swipeUp">
				<Move Target="LiveCallArea" Y="-0.7" RelativeTo="ParentSize"/>
			</SwipingAnimation>
		</Panel>
	</Panel>
</App>

<!-- <App Background="#000">
	<Router ux:Name="router" />
	<ClientPanel>
		<Grid Columns="1*, 1*" Height="10%" Background="#fff" Y="0" ux:Name="gnb">
		  <Text Value="Page1" Color="#000">
				<Clicked>
					<Set pages.Active="page1"/>
				</Clicked>
			</Text>
		  <Text Value="Page2" Color="#000">
				<Clicked>
					<Set pages.Active="page2"/>
				</Clicked>
			</Text>
		</Grid>
		<PageControl ux:Name="pages" Height="90%" Y="10%">
			<ScrollView ux:Name="page1" AllowedScrollDirections="Vertical">
				<EnteringAnimation>
					<ScrollTo Target="page1" Position="0, 0"/>
					<ScrollTo Target="page2" Position="0, 0"/>
					<Move Target="gnb" Y="0" RelativeTo="Size" Duration="0"/>
				</EnteringAnimation>
				<ScrollingAnimation From="0" To="100">
					<Move Target="gnb" Y="-1" RelativeTo="Size"/>
				</ScrollingAnimation>
				<Rectangle Height="200%">
				  <Text Value="page1" Color="#fff"/>
				</Rectangle>
			</ScrollView>
			<ScrollView ux:Name="page2" AllowedScrollDirections="Vertical">
				<ExitingAnimation>
					<ScrollTo Target="page1" Position="0, 0"/>
					<ScrollTo Target="page2" Position="0, 0"/>
					<Move Target="gnb" Y="0" RelativeTo="Size" Duration="0"/>
				</ExitingAnimation>
				<ScrollingAnimation From="0" To="100">
					<Move Target="gnb" Y="-1" RelativeTo="Size"/>
				</ScrollingAnimation>
				<Rectangle Height="200%">
				  <Text Value="page2" Color="#fff"/>
				</Rectangle>
			</ScrollView>
		</PageControl>
	</ClientPanel>
</App> -->