WinRT app guide: Step 8: Typography and color compliance, styling up the app and the RadControl chart
To read the other steps in the step by step guide for creating a Metr0/ WInRT application go here
Time to have a talk about design. As I’ve understood it, most devs aren’t too keen on this part- but for WinRT / Windows Store Apps this an important requirement. To make it easier for us I’ll spread the design info over several posts, a spoonful at the time. For the whole rundown download the guidelines ‘book’ here
On the menu today: Typography and colors
The guidelines state that:
Colors have to strengthen the brand of the app
Colors must comply with the AA contrast (accessibility) when used for text
Fonts should comply to the four level font hierarchy, with Segoe UI as a base
Font and color use should be consistent
Problem 1:
I have no idea how to pick colors
Solution suggestion:
Color sample an image, or if there is- an existing web site for the app
Start with a base color and let a tool such as Kuler.Adobe match colors for you
Have a look at predefined palettes from other users at Kuler.Adobe
Designer are pro’s when it comes to picking colors that work together, so using a fashion palette site to find colors is a good tip. Make sure you balance of the colors with base tones if they are tone-in-tone, and that you check the contrast for colors used on text.
Two fashion blogs sporting great palettes:
Wearpalettes
Color-collective¨
Fashion color palettes
My favorite color matcher/ sampler
Color sampling a screenshot of my blog using Kuler
Problem 2:
How do I know if the foreground color of the text and the background color are contrast compliant? (I don’t want to run the WACK tool to check each time)
Solution:
Use sites such as this one to check contrast compliance, AA is the recommended minimum.
Testing color contrast compliance online
To read more about : Meeting requirements for accessible text (Windows Store apps using C#/VB/C++ and XAML)
Problem 3:
How can I quickly implement the typography guidelines?
Solution:
Stick to the predefined styles that come with the templates, even if it seems like the font sizes are ‘of’
Define the foreground color in the themedictionary
For more of a read:
Font guidelines for Metro style apps /Windows Store apps/ WinRT Apps / Modern UI (this is sooo tedious!- make up your mind !)
11 pt. Segoe UI Semilight snapped view, links, body text, (semibold for item title/header)
9 pt. Segoe UI for short text elements,tertiary info
20 pt. Segoe UI Light for text elements that need to be clearly visible and draw user attention, but are short and fit on a single line, page subheader
42 pt. Segoe UI Light for prominent UI elements that consist of one or two words on a single line, page header
Read and write text: Calibri 13pt (same size as Segoe UI 11pt)
So I took the liberty to find us some new colors for the app, a base set, and a details set. This is how they look like:
Palettes, base
Palettes, details
And after setting the fonts to the ones predefined in the resourcedictionary and the colors using the palettes, this is how the app looks like:
The new look for the app
And to set the color of the bar series (the Telerik RadControl) you simply add this to the code:
Setting the color for the bar series on the Telerik RadControl for Windows 8 UI style
[sourcecode language=“XML”]
<Page
x:Class="Mihsp.MainPage"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Mihsp"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerik="using:Telerik.UI.Xaml.Controls" mc:Ignorable="d">
<Page.Resources>
<CollectionViewSource x:Name="activitiesCollection" IsSourceGrouped="True"></CollectionViewSource>
</Page.Resources>
<Grid Style="{StaticResource LayoutRootStyle}" x:Name="LayoutRoot">
<Grid.Resources>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="\*"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="\*"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Bottom" Style="{StaticResource HeaderTextStyle}" Foreground="#39ACE3" Text="MIH!SP"/>
<Grid Grid.Column="1" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="column" Width="2\*"/>
<ColumnDefinition Width="\*"/>
<ColumnDefinition Width="3\*"/>
</Grid.ColumnDefinitions>
<ListView x:Name="itemListView" Padding="0,10,0,0" ItemsSource="{Binding Source={StaticResource activitiesCollection}}" >
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Border Background="#A66C11" Width="{Binding ElementName=column, Path=ActualWidth}" HorizontalAlignment="Stretch">
<TextBlock Text='{Binding Key}' Style="{StaticResource SubheaderTextStyle}" Margin="5"/>
</Border>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Border Background="#004FC6" Padding="20" >
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
<TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}"/>
<TextBlock Text="{Binding CategoryName}" Style="{StaticResource ItemTextStyle}"/>
<TextBlock TextWrapping="Wrap" Text="{Binding Comment}" Style="{StaticResource BodyTextStyle}"/>
</StackPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="Padding" Value="0,5"></Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<Button x:Name="Add" Grid.Column="1" Height="75" HorizontalAlignment="Stretch" VerticalAlignment="Top" Background="#95A810" Margin="20,0,20,0" BorderBrush="{x:Null}">Add</Button>
<FlipView Grid.Column="2">
<FlipViewItem>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.8\*"/>
<RowDefinition Height="0.2\*"/>
</Grid.RowDefinitions>
<telerik:RadCartesianChart HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<telerik:RadCartesianChart.Grid>
<telerik:CartesianChartGrid MajorLinesVisibility="Y"/>
</telerik:RadCartesianChart.Grid>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis Minimum="1" LabelStyle="{StaticResource CaptionTextStyle}"/>
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:CategoricalAxis LabelStyle="{StaticResource CaptionTextStyle}"/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.Series>
<telerik:BarSeries ItemsSource="{Binding AllEntries}">
<telerik:BarSeries.PointTemplate>
<DataTemplate>
<Rectangle Fill="#B0127F" />
</DataTemplate>
</telerik:BarSeries.PointTemplate>
<telerik:BarSeries.ValueBinding>
<telerik:PropertyNameDataPointBinding PropertyName="NrOfEntries"/>
</telerik:BarSeries.ValueBinding>
<telerik:BarSeries.CategoryBinding>
<telerik:PropertyNameDataPointBinding PropertyName="Category"/>
</telerik:BarSeries.CategoryBinding>
</telerik:BarSeries>
</telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>
<Border VerticalAlignment="Center" Grid.Row="1">
<TextBlock Text="Something about the statistics shown" Style="{StaticResource SubheaderTextStyle}" Padding="15,20"/>
</Border>
</Grid>
</FlipViewItem>
<FlipViewItem>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.8\*"/>
<RowDefinition Height="0.2\*"/>
</Grid.RowDefinitions>
<Border Background="Orange" VerticalAlignment="Bottom" Grid.Row="1">
<TextBlock Text="Second flipitem" Style="{StaticResource BodyTextStyle}" Padding="15,20"/>
</Border>
</Grid>
</FlipViewItem>
</FlipView>
</Grid>
</Grid>
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0"/>
</Page.BottomAppBar>
Last modified on 2012-09-15