MainView.ux

<App>

	<DockPanel>
		
		<!-- The top section of the app -->
		<TopFrameBackground ux:Name="sbb" DockPanel.Dock="Top" Visibility="Collapsed" />
		<Text DockPanel.Dock="Top">Hello, world! I'm on the top of you.</Text>

		<!-- This is the main client area -->
		<ScrollView DockPanel.Dock="Fill">
			<StackPanel>
				<DockPanel>
					<Text Margin="15,0,15,0" Alignment="VerticalCenter" DockPanel.Dock="Left">Type here:</Text>
					<TextBox Margin="0,5" Alignment="VerticalCenter" />
				</DockPanel>

				<StackPanel Alignment="HorizontalCenter" Orientation="Horizontal">
					<Text Margin="15,0,15,0"  Alignment="VerticalCenter">Change layout in response to OS?</Text>
					<Switch Alignment="VerticalCenter">
						<!-- Turn on all of our OS responsive controls -->
						<WhileTrue>
							<Change Target="sbb.Visibility" Value="Visible" />
							<Change Target="bbb1.Visibility" Value="Visible" />
							<Change Target="bbb2.Visibility" Value="Visible" />
						</WhileTrue>
					</Switch>
				</StackPanel>
				<Panel Height="50" />
				<Text Margin="15,0,15,0"  TextWrapping="Wrap" ux:Name="Description">This example shows controls that are hidden by OS adornments, such as the status bar, navigation and keyboard. To make the app respond to these entities, toggle the "respond to OS switch". You can also try the text input field to see how it makes the app respond to the onscreen keyboard if your device has one.</Text>

				<!-- Fade out the description of the app when the keyboard is visible -->
				<WhileKeyboardVisible>
					<Change Target="Description.Opacity" Value="0" Duration="0.5" />
				</WhileKeyboardVisible>
			</StackPanel>
		</ScrollView>

		<!-- The bottom section of the app -->
		<Grid ColumnCount="2" Background="White" DockPanel.Dock="Bottom" >
			<StackPanel Alignment="Bottom">
				<Text Margin="15,0,15,0"  TextWrapping="Wrap">Bottom 1</Text>
				<BottomFrameBackground ux:Name="bbb1" Visibility="Collapsed" />
			</StackPanel>
			<StackPanel Alignment="Bottom">
				<Text Margin="15,0,15,0"  TextWrapping="Wrap">Bottom 2</Text>
				<BottomFrameBackground ux:Name="bbb2"
					Visibility="Collapsed" IncludesKeyboard="false" />
			</StackPanel>
		</Grid>
	</DockPanel>

</App>