Modern Design Principles (MS)

Hubs & spoke navigation pattern

Hierarchical pattern• Best for large collections of related

content• Content is separated into sections,

levels of detail• Pattern provides intuitive navigation,

promotes discovery

Based on 20px units

New layouts

Typography creates avisual hierarchy anda built in typeramp inthe default stylesheet

Grid & alignments gives a structured and consistent layout

42pt20pt

11pt

9pt

Choosing the right tool

VS == codeBlend == layout

Beginners => Easy StartAdvanced => High Productivity

Page

*.xaml for UI*.xaml.cs for code behind (c# logic)

UI can be generated through Blend Or written by hand in Visual Studio

The UI Language

XAML• XML based syntax• Case sensitive• Inline properties for UI customization• Styles and templates can be referenced and collected in

ResourceCollections

• ”Content” & ”Text” controls

XAML sample

<TextBlock Text=“Hello World” />

<Button Content=“Hello World” />

<TextBox Header=“Brugernavn” PlaceholderText=“Indtast brugernavn” />

XAML sample

<StackPanel Orientation=“Horizontal”>

<TextBlock Text=“Hello World” Margin=“0,0,0,50” />

<StackPanel Orientation=“Horizontal”>

<Button Width="200" Height="50">Login</Button>

<Button Width="200" Height="50">Cancel</Button>

</StackPanel>

</StackPanel>