Monday, June 30, 2014

Stacking controls wider than a page

Another important thing to note, is that if you are using a Basic app page, with a title and back arrow at the top left of the page, you should enclose the contents of your page with a grid, contained within a ScrollViewer control, as shown in the following example:



<Page.Resources>

<!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
<x:String x:Key="AppName">Addresses</x:String>
</Page.Resources>
<ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" >
<Grid>

<Grid Style="{StaticResource LayoutRootStyle}">


<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}" FontSize="48"/>
</Grid>

<StackPanel Margin="203,310,-83,0" Orientation="Horizontal" VerticalAlignment="Top" Grid.Row="1">
<TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBox 0 9 0 888 9" VerticalAlignment="Top" Width="772" Canvas.Left="10" Canvas.Top="29"/>
<TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBox 0 9 0 888 9" VerticalAlignment="Top" Width="772" Canvas.Left="10" Canvas.Top="29"/>
<TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBox 0 9 0 888 9" VerticalAlignment="Top" Width="772" Canvas.Left="10" Canvas.Top="29"/>
</StackPanel>

</Grid>
</Grid>
</ScrollViewer>

You can then place your StackPanel control, directly within the second level grid control. This will allow the controls within your StackPanel control, to scroll beyond the edge of your app page.


No comments:

Post a Comment