How to set vertical title in Windows 8 GridView items

How to set vertical title in Windows 8 GridView items

One of the issues when it comes to space and properly designing a GridView on devices with 768 pixels of height is the fact that the title of each GridView item can often take just the amount of space on the top that you need to fit all your data. Considering the fact that the GridView is predefined to scroll horizontally and that in landscape orientation you get more space horizontally, why not put the title of each item vertically next to the item and get those approx. 60-100 pixels back. Plus, it looks really cool. Read more to find out how to do it!

Not only that placing the GridViewItem title on the left from the data saves you some pixels, but it also looks really cool. One of the most popular apps that use it is Tweetro for Windows 8 by Lazyworm Apps, and I also used it in my apps Mobility Day 2012 and mscommunity.hr. Here’s what it essentially looks like:

screenshot_10232012_194913

If you carefully take a look at the picture, you’ll notice that the title is rotated by -90 degrees to save the space for the calendar item (days in a month) in the middle. This is a GridView which works as a calendar displaying the current and the next month. The title is the name of the month (“listopad" means “October” in Croatian etc.)

You may notice the problem immediately because there seems to be enough space on the bottom to fit the title on the top. But the obvious issue is – what if the first day in month is Saturday? Then I get another row of items, just like the case is with December:

image

I don’t want to make the calendar items smaller – I want that space back. This is a great example of vertical title making sense.

In order to rotate the title, you need to use the LayoutTransform. I wrote about LayoutTransform in Windows 8 earlier here:

http://igrali.com/2012/09/17/layout-transform-in-windows-8-winrt-xaml/

Let’s see how to use this in an app! Create a new Windows Store project in Visual Studio 2012. Make it a Grid App:

image

Here’s what you get if you start it without editing the code:

screenshot_11032012_000842

I want to put Group Title:1 >, Group Title: 2 > etc. on the left, rotated by 90 or –90 degrees, depends on what you think looks better.

Step number one is to download the LayoutTransformer class I gave in my old post. Find the class here:

http://sdrv.ms/RlqNF8

Include it in your project, in Common folder. Open the class in Visual Studio and change the namespace from Transforming.Common to YourProjectName.Common, where YourProjectName is the name you gave you your project.

Then, copy the following style part to the ResourceDictionary in StandardStyles.xaml which is also in the Common folder:

<Style TargetType="common:LayoutTransformer">  
    <Setter Property="Foreground" Value="#FF000000"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="common:LayoutTransformer">
                <Grid x:Name="TransformRoot" Background="{TemplateBinding Background}">
                    <ContentPresenter
                        x:Name="Presenter"
                        Content="{TemplateBinding Content}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>  

It relies on the common namespace – add it to the namespaces of the ResourceDictionary in StandardStyle.xaml. It should look like this:

<ResourceDictionary  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:common="using:YOURPROJECTNAME.Common">

The next step is to edit the ItemContainerStyle of the GridView. You can do it from Blend (open the project in Blend, first), by simply right clicking on the GridView and then point to:

image

You will be asked where to put it. Choose StandardStyles.xaml:

image

Then save everything, close Blend and go back to Visual Studio 2012. Reload if necessary. Open StandardStyles.xaml file and find the new GroupItemStyle1 in code:

The defined template looks like this:

<Grid>  
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <ContentControl x:Name="HeaderContent" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" Content="{TemplateBinding Content}" IsTabStop="False" Margin="{TemplateBinding Padding}" TabIndex="0"/>
    <ItemsControl x:Name="ItemsControl" IsTabStop="False" ItemsSource="{Binding GroupItems}" Grid.Row="1" TabIndex="1" TabNavigation="Once">
        <ItemsControl.ItemContainerTransitions>
            <TransitionCollection>
                <AddDeleteThemeTransition/>
                <ContentThemeTransition/>
                <ReorderThemeTransition/>
                <EntranceThemeTransition IsStaggeringEnabled="False"/>
            </TransitionCollection>
        </ItemsControl.ItemContainerTransitions>
    </ItemsControl>
</Grid>  

You can see immediately that we have two rows, and want two columns! Change the code accordingly, so that now the grid has two columns instead of rows, and set the ItemsControl to the column number 1:

<Grid>  
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <ContentControl x:Name="HeaderContent" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" Content="{TemplateBinding Content}" IsTabStop="False" Margin="{TemplateBinding Padding}" TabIndex="0"/>
    <ItemsControl Grid.Column="1" x:Name="ItemsControl" IsTabStop="False" ItemsSource="{Binding GroupItems}" TabIndex="1" TabNavigation="Once">
        <ItemsControl.ItemContainerTransitions>
            <TransitionCollection>
                <AddDeleteThemeTransition/>
                <ContentThemeTransition/>
                <ReorderThemeTransition/>
                <EntranceThemeTransition IsStaggeringEnabled="False"/>
            </TransitionCollection>
        </ItemsControl.ItemContainerTransitions>
    </ItemsControl>
</Grid>  

This may seem like enough, but it isn’t because the header/title will still show in horizontal orientation. We want it to rotate. This is where you use the LayoutTransformer. The final grid should look like this:

<Grid>  
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <common:LayoutTransformer HorizontalAlignment="Left" VerticalAlignment="Top" Grid.RowSpan="2" Margin="0,6,0,0">
        <common:LayoutTransformer.LayoutTransform>
            <RotateTransform Angle="-90"/>
        </common:LayoutTransformer.LayoutTransform>
        <ContentControl x:Name="HeaderContent" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" Content="{TemplateBinding Content}" IsTabStop="False" Margin="{TemplateBinding Padding}" TabIndex="0"/>
    </common:LayoutTransformer>
    <ItemsControl Grid.Column="1" x:Name="ItemsControl" IsTabStop="False" ItemsSource="{Binding GroupItems}" TabIndex="1" TabNavigation="Once">
        <ItemsControl.ItemContainerTransitions>
            <TransitionCollection>
                <AddDeleteThemeTransition/>
                <ContentThemeTransition/>
                <ReorderThemeTransition/>
                <EntranceThemeTransition IsStaggeringEnabled="False"/>
            </TransitionCollection>
        </ItemsControl.ItemContainerTransitions>
    </ItemsControl>
</Grid>  

And the result you get is this:

screenshot_11032012_003005

Looks nice, doesn’t it? :)

The whole project can be found here:

http://sdrv.ms/YgETsi

Igor Ralic

igor ralic

View Comments
Microsoft Certified Solutions Developer: Windows Store Apps in C#