How to do screen-size-aware layout? - windows-8

Question

I'm making a board game. To construct the board, I do the following:
// adapted from http://code.msdn.microsoft.com/windowsapps/Reversi-XAMLC-sample-board-816140fa/sourcecode?fileId=69011&pathId=706708707
// This is shit code.
async void PlayGame_Loaded(object sender, RoutedEventArgs e)
{
foreach (var row in Game.ALL_ROWS)
{
boardGrid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(BOARD_GRID_SIDE_LENGTH) });
}
var maxColIndex = Game.ALL_ROWS.Max();
foreach (var col in Enumerable.Range(0, maxColIndex))
{
boardGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(BOARD_GRID_SIDE_LENGTH) });
}
// ...
}
(Feel free to suggest alternate approaches.)
Basically, I create a bunch of rows and columns based on a pre-set height and width, and fill those rows and columns with board spaces. This works fine when I set the row and column lengths to fit my laptop, but obviously it won't work on devices with different resolutions. (For instance, it's truncated on the Surface RT.) How do I get around this? Can I specify a side length that's a portion of the parent container? What's the best practice here?

Answer 1

Your best bet would probably be to use a ViewBox, assuming the board you want to draw has a constant number of rows/columns.

Answer 2

I use this:
var bounds = Window.Current.Bounds;
double height = bounds.Height;
double width = bounds.Width;
to find out the screen resolution on which my apps are, and then re-size my grid items on function of the size of the screen.
EDIT:
So for your code I would do:
async void PlayGame_Loaded(object sender, RoutedEventArgs e)
{
var bounds = Window.Current.Bounds;
double BOARD_GRID_SIDE_LENGTH = bounds.Height;
double BOARD_GRID_SIDE_WIDTH = bounds.Width;
foreach (var row in Game.ALL_ROWS)
{
boardGrid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(BOARD_GRID_SIDE_LENGTH) });
}
var maxColIndex = Game.ALL_ROWS.Max();
foreach (var col in Enumerable.Range(0, maxColIndex))
{
boardGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(BOARD_GRID_SIDE_WIDTH) });
}
// ...
}

Answer 3

The sound solution is to divide your page so that the boardGrid takes 2/3 of the screen, the rest of your content (buttons, timer, score board...) in the other third.
Secondly, enclose it inside a Viewbox element so that the board dimensions are recalculated when you go to different view modes (Full, Portrait, Snapped, Filled)
Finally, make sure to make the page inherit LayoutAwarePage instead of Page so that it handles the changes of view modes gracefully
Here's a rough mockup:
<common:LayoutAwarePage
xmlns:UI="using:Microsoft.Advertising.WinRT.UI"
x:Class="ApexKT.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp"
xmlns:common="using:MyApp.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:snaps="http://schemas.microsoft.com/netfx/2007/xaml/presentation"
mc:Ignorable="d" >
<Grid x:Name="bigGrid">
<StackPanel Orientation="Horizontal">
<StackPanel x:Name="OneThird">
<TextBlock x:Name="ScoreBoard" Text="Score:" />
<Button x:Name="Button1" Content="Button 1" Click="" />
</StackPanel>
<Viewbox x:Name="TwoThirds">
<Viewbox.Transitions>
<TransitionCollection>
<ContentThemeTransition />
</TransitionCollection>
</Viewbox.Transitions>
<Grid x:Name="boardGrid"><!-- insert row and column definitions here, or hard code them --></Grid>
</Viewbox>
</StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreenLandscape"/>
<VisualState x:Name="Filled"/>
<VisualState x:Name="Snapped" />
<VisualState x:Name="FullScreenPortrait" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
`