Windows Phone 8.1 home page style HubSection

Question

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

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.

See: http://stackoverflow.com/questions/23144519/gridview-with-2-columns-fill-width — Chubosaurus Software, Oct 15 '14 at 02:18

score 0 · Answer 1 · answered Oct 14 '14 at 09:30

0

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?

answered Oct 14 '14 at 09:30

Filip

1,824
4
18
37

I've edited the title. This is for 8.1 and LongListSelector is an 8.0 component. Also I have two physical devices to test with: a 480x800 and a 720x1280 – Alex Oct 14 '14 at 09:35

score -1 · Answer 2 · edited Feb 27 '15 at 12:17

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>

Windows Phone 8.1 home page style HubSection

2 Answers2