Windows 8’s GridView – Not meant for data entry!

By | April 12, 2013
0 Comment

Here’s an interesting experiment. Slap this in to a blank Windows Store app’s MainPage.xaml:

<Grid>
	<Grid.RowDefinitions>
		<RowDefinition Height="Auto" />
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="Auto" />
		<ColumnDefinition Width="Auto" />
	</Grid.ColumnDefinitions>

	<GridView Grid.Column="0">
		<TextBox />
		<TextBox />
		<TextBox />
		<TextBox />
		<TextBox />
		<TextBox />
		<TextBox />
		<TextBox />
		<TextBox />
		<TextBox />
		<TextBox />
		<TextBox />
		<TextBox />
		<TextBox />
	</GridView>

	<StackPanel Orientation="Vertical"
                        Grid.Column="1">
		<TextBox Margin="10" />
		<TextBox Margin="10" />
		<TextBox Margin="10" />
		<TextBox Margin="10" />
		<TextBox Margin="10" />
		<TextBox Margin="10" />
		<TextBox Margin="10" />
		<TextBox Margin="10" />
		<TextBox Margin="10" />
		<TextBox Margin="10" />
		<TextBox Margin="10" />
		<TextBox Margin="10" />
		<TextBox Margin="10" />
		<TextBox Margin="10" />
	</StackPanel>
</Grid>

Now run it in the simulator and flip to Touch-mode.

Click the bottom-most textbox in the first column.

See what happens?

image

Textbox within GridView chosen, keyboard obstructs input

image

Textbox within StackPanel chosen, screen automatically slides up so keyboard doesn’t obstruct input

You can’t see the textbox you’re typing in to! The OS doesn’t handle the “auto-scrolling” of the page’s frame when you are within a GridView. This happens no matter WHAT other control your textbox might be within. If any ancestor of the textbox is a GridView, sayonara Keyboard Obstruction Handling.

So… why?

My thought process goes back to why the GridView exists. I feel as though it exists solely to support the Semantic Zoom capability, which you wouldn’t really be doing on an input form.

So, what can we do instead?

Well, we can do what’s shown here and replace it with a simple StackPanel, for one.

But what if you need DataBinding to a list of items? The solution there is fairly simple: Use an ItemsControl. Voila.