![Page 1: Modern Design Principles (MS). Hubs & spoke navigation pattern Hierarchical pattern Best for large collections of related content Content is separated](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697c00b1a28abf838cc83b0/html5/thumbnails/1.jpg)
Modern Design Principles (MS)
![Page 2: Modern Design Principles (MS). Hubs & spoke navigation pattern Hierarchical pattern Best for large collections of related content Content is separated](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697c00b1a28abf838cc83b0/html5/thumbnails/2.jpg)
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
![Page 3: Modern Design Principles (MS). Hubs & spoke navigation pattern Hierarchical pattern Best for large collections of related content Content is separated](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697c00b1a28abf838cc83b0/html5/thumbnails/3.jpg)
Based on 20px units
![Page 4: Modern Design Principles (MS). Hubs & spoke navigation pattern Hierarchical pattern Best for large collections of related content Content is separated](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697c00b1a28abf838cc83b0/html5/thumbnails/4.jpg)
New layouts
Typography creates avisual hierarchy anda built in typeramp inthe default stylesheet
Grid & alignments gives a structured and consistent layout
42pt20pt
11pt
9pt
![Page 5: Modern Design Principles (MS). Hubs & spoke navigation pattern Hierarchical pattern Best for large collections of related content Content is separated](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697c00b1a28abf838cc83b0/html5/thumbnails/5.jpg)
![Page 6: Modern Design Principles (MS). Hubs & spoke navigation pattern Hierarchical pattern Best for large collections of related content Content is separated](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697c00b1a28abf838cc83b0/html5/thumbnails/6.jpg)
Choosing the right tool
VS == codeBlend == layout
Beginners => Easy StartAdvanced => High Productivity
![Page 7: Modern Design Principles (MS). Hubs & spoke navigation pattern Hierarchical pattern Best for large collections of related content Content is separated](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697c00b1a28abf838cc83b0/html5/thumbnails/7.jpg)
Page
*.xaml for UI*.xaml.cs for code behind (c# logic)
UI can be generated through Blend Or written by hand in Visual Studio
![Page 8: Modern Design Principles (MS). Hubs & spoke navigation pattern Hierarchical pattern Best for large collections of related content Content is separated](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697c00b1a28abf838cc83b0/html5/thumbnails/8.jpg)
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
![Page 9: Modern Design Principles (MS). Hubs & spoke navigation pattern Hierarchical pattern Best for large collections of related content Content is separated](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697c00b1a28abf838cc83b0/html5/thumbnails/9.jpg)
XAML sample
<TextBlock Text=“Hello World” />
<Button Content=“Hello World” />
<TextBox Header=“Brugernavn” PlaceholderText=“Indtast brugernavn” />
![Page 10: Modern Design Principles (MS). Hubs & spoke navigation pattern Hierarchical pattern Best for large collections of related content Content is separated](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697c00b1a28abf838cc83b0/html5/thumbnails/10.jpg)
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>