Windows Phone 8.1 home page style HubSection

Question

I am attempting to recreate the "favourites" section in this image

I've got a gridview set up with square tiles in it but the dimensions of the squares have been hardcoded so it doesn't scale with phone size. I'm having to develop this for many different phone sizes. How do I achieve a two-column tile setup like this that will scale with screen size? GridView has no notion of columns so it's not like I can set up two columns and tell the tiles to stretch.

EDIT: I have managed to achieve this by hardcoding the widths of EVERYTHING and then throwing it all in a viewbox in my HubSection. It works for now but surely there has to be a better way than that.

Answer 1

I am not sure how GridView handle this, however you could use LongListSelector and set its LayoutMode to Grid . It should scale without problems but even your current approach should work, WP handles scaling very well. Have you already tried 720p emulator?

Answer 2

How i can portrait and snapped with hubsection Windows 8.1, I have code

 <Page x:Name="pageRoot" x:Class="Marinas.ItemDetailPage" DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Marinas" xmlns:data="using:Marinas.Data" xmlns:common="using:Marinas.Common" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.Resources> <common:BooleanTovisilibity x:Key="BooleanToVisibility"/> </Page.Resources> <Grid DataContext="{Binding Item}" d:DataContext="{Binding Groups[0].Items[0], Source={d:DesignData Source=/DataModel/es-Es/DataSample.json, Type=data:SampleDataSource}}"> <Grid.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF236CB6" Offset="0"/> <GradientStop Color="#FF5DB6F3" Offset="0.993"/> </LinearGradientBrush> </Grid.Background> <Grid.ChildrenTransitions> <TransitionCollection> <EntranceThemeTransition/> </TransitionCollection> </Grid.ChildrenTransitions> <Grid.RowDefinitions> <RowDefinition Height="140"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid Grid.Row="1" x:Name="contentRegion" Visibility="Visible"> <Hub Orientation="Horizontal"> <HubSection x:Uid="section1Header" Margin="88,-42,0,0" Width="500" > <DataTemplate> <StackPanel Margin="0,-3,0,0" Height="647"> <Image Source="{Binding ImagePath}" Margin="0,0,0,20" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" Height="240" /> <TextBlock Text="{Binding Content}" Style="{StaticResource BodyTextBlockStyle}" FontSize="19" Margin="0,-6,0,0" LineHeight="21" Height="255"/> </StackPanel> </DataTemplate> </HubSection> <HubSection x:Uid="Section2Header" Width="500" Margin="88,-42,0,0" Visibility="Visible"> <DataTemplate> <StackPanel> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="150"/> <ColumnDefinition Width="300"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="21"/> <RowDefinition Height="17"/> <RowDefinition Height="21"/> <RowDefinition Height="17"/> <RowDefinition Height="21"/> <RowDefinition Height="17"/> <RowDefinition Height="21"/> <RowDefinition Height="17"/> <RowDefinition Height="21"/> <RowDefinition Height="17"/> <RowDefinition Height="21"/> <RowDefinition Height="17"/> <RowDefinition Height="21"/> <RowDefinition Height="17"/> </Grid.RowDefinitions> <!--ficha tecnica--> <TextBlock Text="{Binding Latitude}" Grid.Row="0" FontSize="19" Style="{StaticResource BodyTextBlockStyle}"/> <TextBlock Text="{Binding Alatitude}" FontSize="19" Grid.Row="0" Grid.Column="1" Style="{StaticResource BodyTextBlockStyle}"/> <Line Stroke="White" StrokeThickness="2" Grid.Row="1" X2="290" Margin="0,9,0,0" Grid.ColumnSpan="2"/> <TextBlock Text="{Binding Longitude}" FontSize="19" Grid.Row="2" Grid.Column="0" Style="{StaticResource BodyTextBlockStyle}"/> <TextBlock Text="{Binding Blongitude}" FontSize="19" Grid.Row="2" Grid.Column="2" Style="{StaticResource BodyTextBlockStyle}"/> <Line Stroke="White" StrokeThickness="2" Grid.Row="3" X2="290" Margin="0,9,0,0" Grid.ColumnSpan="2"/> <TextBlock Text="{Binding Lenght}" FontSize="19" Grid.Row="4" Style="{StaticResource BodyTextBlockStyle }"/> <TextBlock Text="{Binding Elenght}" FontSize="19" Grid.Row="4" Grid.Column="3" Style="{StaticResource BodyTextBlockStyle}"/> <Line Stroke="White" StrokeThickness="2" Grid.Row="5" X2="290" Margin="0,9,0,0" Grid.ColumnSpan="2"/> <TextBlock Text="{Binding Draught}" FontSize="19" Grid.Row="6" Style="{StaticResource BodyTextBlockStyle}"/> <TextBlock Text="{Binding Ndraught}" FontSize="19" Grid.Row="6" Grid.Column="6" Style="{StaticResource BodyTextBlockStyle}"/> <Line Stroke="White" StrokeThickness="2" Grid.Row="7" X2="290" Margin="0,9,0,0" Grid.ColumnSpan="2"/> <TextBlock Text="{Binding NauticalChart}" FontSize="19" Grid.Row="8" Style="{StaticResource BodyTextBlockStyle}"/> <TextBlock Text="{Binding Fchart}" FontSize="19" Grid.Row="8" Grid.Column="8" Style="{StaticResource BodyTextBlockStyle}"/> <Line Stroke="White" StrokeThickness="2" Grid.Row="9" X2="290" Margin="0,9,0,0" Grid.ColumnSpan="2"/> <TextBlock Text="{Binding Radio}" FontSize="19" Grid.Row="10" Style="{StaticResource BodyTextBlockStyle}"/> <TextBlock Text="{Binding Dradio}" FontSize="19" Grid.Row="10" Grid.Column="10" Style="{StaticResource BodyTextBlockStyle}"/> <Line Stroke="White" StrokeThickness="2" Grid.Row="11" X2="290" Margin="0,9,0,0" Grid.ColumnSpan="2"/> <TextBlock Text="{Binding Function}" FontSize="19" Grid.Row="12" Style="{StaticResource BodyTextBlockStyle}"/> <TextBlock Text="{Binding Hfunction}" FontSize="19" Grid.Row="12" Grid.Column="12" Style="{StaticResource BodyTextBlockStyle}"/> </Grid> </StackPanel> </DataTemplate> </HubSection> <HubSection x:Uid="Section3Header" Margin="88,-40,0,0" Width="600" Visibility="Visible"> <DataTemplate> <StackPanel> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="190"/> <ColumnDefinition Width="500"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="30"/> <RowDefinition Height="17"/> <RowDefinition Height="21"/> <RowDefinition Height="17"/> <RowDefinition Height="21"/> </Grid.RowDefinitions> <TextBlock Text="{Binding Services}" FontSize="19" Grid.Row="0" Style="{StaticResource BodyTextBlockStyle}"/> <Line Stroke="White" StrokeThickness="2" Grid.Row="1" X2="509" Margin="0,9,0,0" Grid.ColumnSpan="2"/> <TextBlock Text="{Binding Email}" FontSize="19" Grid.Row="2" Style="{StaticResource BodyTextBlockStyle}"/> <TextBlock Text="{Binding Addressemail}" FontSize="19" Grid.Row="2" Margin="0,0,0,0" Grid.Column="2" Style="{StaticResource BodyTextBlockStyle}"/> <Line Stroke="White" StrokeThickness="2" Grid.Row="3" X2="509" Margin="0,9,0,0" Grid.ColumnSpan="2"/> </Grid> </StackPanel> </DataTemplate> </HubSection> </Hub> </Grid> <!-- Botón Atrás y título de página --> <Grid x:Name="defaultNavigation" Visibility="Visible"> <Grid.ColumnDefinitions> <ColumnDefinition Width="120"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}" Style="{StaticResource NavigationBackButtonNormalStyle}" VerticalAlignment="Top" AutomationProperties.Name="Back" AutomationProperties.AutomationId="BackButton" AutomationProperties.ItemType="Navigation Button"/> <TextBlock x:Name="pageTitle" Text="{Binding Title}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/> </Grid> <Grid x:Name="minimalNavigation" Visibility="Collapsed"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Button x:Name="backbuttonminimal" Height="70" Margin="10,56,10,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}" Visibility="{Binding IsEnabled, Converter={StaticResource BooleanToVisibility}, RelativeSource={RelativeSource Mode=Self}}" AutomationProperties.Name="Back" AutomationProperties.AutomationId="BackButton" AutomationProperties.ItemType="Navigation Button"> </Button> <TextBlock x:Name="pageTitleMinimal" Text="{Binding Title}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" FontSize="27" IsHitTestVisible="False" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/> </Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup> <VisualState x:Name="DefaultLayout"> </VisualState> <VisualState x:Name="MinimalLayout"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="defaultNavigation" Storyboard.TargetProperty="Visiblity"> <DiscreteObjectKeyFrame KeyTime="0" Value="collapsed"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="minimalNavigation" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="PortraitLayout"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="defaultNavigation" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="minimalNavigation" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Grid> <Page.TopAppBar> <AppBar IsSticky="True"> <StackPanel Orientation="Horizontal"> <Button x:Uid="inicio" Width="140" Height="80" Background="Black" BorderBrush="Black" Click="HomeBarButton_Click"/> </StackPanel> </AppBar> </Page.TopAppBar> </Page>