This project is read-only.

Metro Standard Views and Templates

Metro supports all CODE Framework standard data templates for standard views (see Standard Views and View Models). 

In addition to providing the default templates, each template itself refers to standard styles.

Colors are defined by a combination (pair) of Color and brush resources called CODE.Framework-Appplication-StandardViewModelForegroundBrush & CODE.Framework-Appplication-StandardViewModelForegroundColor and CODE.Framework-Appplication-StandardViewModelBackgroundBrush & CODE.Framework-Appplication-StandardViewModelBackgroundColor respectively. These colors and brushes can easily be redefined as needed. For instance, setting one of these color resources in a global resource dictionary changes the appearance of these data templates for the entire application. It is also possible to change these resources for specific views or even sub-elements of views.

Fonts and font sizes are all based on standard font styles defined in Fonts.xaml. Fonts can also be re-styles in the same fashion as colors and brushes.

Images and displayed logos can be based on drawing brushes (such as the standard icons supported by CODE Framework – see Standard Icon Resources). Metro icon resources are monochrome and define their single color through a brush resource called CODE.Framework-Metro-IconForegroundColor (with a corresponding brush equivalent). Within default data templates, that resource is linked to the standard view foreground brush, thus Metro icons will appear in the same color as the text in the view.

All Peek-animated templates use a container control called PeekAnimationContainer. Developers are free to create custom styles for that target type. This control provides properties to define the speed of the animations, whether to start with the image or the text part of the animation, and to what degree the animation includes an element of randomness. (Which is used to create a very dynamic appearance in scenarios where a large list of items using the same template are displayed. Due to the introduced randomness, a very dynamic appearance is achieved).

Note that it is not advisable to use any of the animated templates in large lists as these templates can consume a large amount of resources and slow an application down significantly!

 

Complete List of Templates

The following is a list of standard views and data templates available in WPF with the Metro theme applied:

Identifier   Description

Enum:
StandardViews.Block

Data Templare Resource Name:
CODE.Framework-StandardTemplate-Block

  One string of large block text over a single, short line of bold, regular text.
image

Enum:
StandardViews.Data01

Data Templare Resource Name:
CODE.Framework-StandardTemplate-Data01

  One string of large text over 2 lines of regular text. Text does not wrap.
image

Enum:
StandardViews.Data02

Data Templare Resource Name:
CODE.Framework-StandardTemplate-Data02

  One string of large text over a regular text element with wrapping text.
image

Enum:
StandardViews.Data03

Data Templare Resource Name:
CODE.Framework-StandardTemplate-Data03

  One string of large text over 2 columns of 2 lines of non-wrapping regular text.
image

Enum:
StandardViews.DataSmall01

Data Templare Resource Name:
CODE.Framework-StandardTemplate-DataSmall01

  One string of large text.
image

Enum:
StandardViews.DataSmall02

Data Templare Resource Name:
CODE.Framework-StandardTemplate-DataSmall02

  One string of large text with image.
image

Enum:
StandardViews.DataSmall03

Data Templare Resource Name:
CODE.Framework-StandardTemplate-DataSmall03

  Two strings of text with image.
image

Enum:
StandardViews.DataAndImage01

Data Templare Resource Name:
CODE.Framework-StandardTemplate-DataAndImage01

  4:3 image on the left. One string of large text over 2 lines of regular text. Text does not wrap.
Small square image on the bottom right.
image

Enum:
StandardViews.DataAndImage02

Data Templare Resource Name:
CODE.Framework-StandardTemplate-DataAndImage02

  4:3 image on the left. One string of large text over a regular text element with wrapping text. Small square image on the bottom right.
image

Enum:
StandardViews.DataAndImage03

Data Templare Resource Name:
CODE.Framework-StandardTemplate-DataAndImage03

  4:3 image on the left. One string of large text over 2 columns of 2 lines of non-wrapping regular text. Small square image on the bottom right.
image

Enum:
StandardViews.Image

Data Templare Resource Name:
CODE.Framework-StandardTemplate-Image

  One square image that fills the entire tile, no text.
image

Enum:
StandardViews.LargeBlockAndText01

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargeBlockAndText01

  Four strings of regular, unwrapped text on the left; large block text over a single, short string of bold, regular text on the right.
image

Enum:
StandardViews.LargeBlockAndText02

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargeBlockAndText02

  One string of regular text wrapped over a maximum of four lines on the left; large block text over a single, short string of bold, regular text on the right.
image

Enum:
StandardViews.LargeImage

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargeImage

  One wide image that fills the entire tile, no text.
image

Enum:
StandardViews.LargeImageAndText01

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargeImageAndText01

  One wide image over one string of regular text wrapped over a maximum of two lines.
image

Enum:
StandardViews.LargeImageAndText02

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargeImageAndText02

  One wide image over two strings of regular text on two lines. Text does not wrap.
image

Enum:
StandardViews.LargeImageCollection

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargeImageCollection

  One large square image with four smaller square images to its right, no text.
image

Enum:
StandardViews.LargePeekImageAndText01

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargePeekImageAndText01

  Top: One wide image. Bottom: One string of regular text wrapped over a maximum of five lines. Elements animate up and down.
image

Enum:
StandardViews.LargePeekImageAndText02

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargePeekImageAndText02

  Top: One wide image. Bottom: Five strings of regular text on five lines. Text does not wrap. Elements animate up and down.
image

Enum:
StandardViews.LargePeekImageAndText03

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargePeekImageAndText03

  Top: One wide image. Bottom: One string of large text wrapped over a maximum of three lines. Elements animate up and down.
image

Enum:
StandardViews.LargePeekImageAndText04

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargePeekImageAndText04

  Top: One wide image. Bottom: One string of regular text wrapped over a maximum of five lines. Elements animate up and down.
image

Enum:
StandardViews.LargePeekImageAndText05

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargePeekImageAndText05

  Top: One wide image. Bottom: On the left, one small image; on the right, one header string of larger text on the first line over one string of regular text wrapped over a maximum of four lines. Elements animate up and down.
image

Enum:
StandardViews.LargePeekImageAndText06

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargePeekImageAndText06

  Top: One wide image. Bottom: On the left, one small image; on the right, one string of large text wrapped over a maximum of three lines. Elements animate up and down.
image

Enum:
StandardViews.LargePeekImageCollection01

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargePeekImageCollection01

  Top: One large square image with four smaller square images to its right, no text. Bottom: One header string in larger text over one string of regular text wrapped over a maximum of four lines. Elements animate up and down.
image

Enum:
StandardViews.LargePeekImageCollection02

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargePeekImageCollection02

  Top: One large square image with four smaller square images to its right, no text. Bottom: One header string in larger text on the first line, four strings of regular text on the next four lines. Text does not wrap. Elements animate up and down.
image

Enum:
StandardViews.LargePeekImageCollection03

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargePeekImageCollection03

  Top: One large square image with four smaller square images to its right, no text. Bottom: One string of large text wrapped over a maximum of three lines. Elements animate up and down.
image

Enum:
StandardViews.LargePeekImageCollection04

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargePeekImageCollection04

  Top: One large square image with four smaller square images to its right, no text. Bottom: One string of regular text wrapped over a maximum of five lines. Elements animate up and down.
image

Enum:
StandardViews.LargePeekImageCollection05

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargePeekImageCollection05

  Top: One large square image with four smaller square images to its right, no text. Bottom: On the left, one small image; on the right, one header string of larger text on the first line over one string of regular text wrapped over a maximum of four lines. Elements animate up and down.
image

Enum:
StandardViews.LargePeekImageCollection06

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargePeekImageCollection06

  Top: One large square image with four smaller square images to its right, no text. Bottom: On the left, one small image; on the right, one string of large text wrapped over a maximum of three lines. Elements animate up and down.
image

Enum:
StandardViews.LargeSmallImageAndText01

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargeSmallImageAndText01

  On the left, one small image; on the right, one string of large text wrapped over a maximum of three lines.
image

Enum:
StandardViews.LargeSmallImageAndText02

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargeSmallImageAndText02

  On the left, one small image; on the right, one header string in larger text on the first line, four strings of regular text on the next four lines. Text does not wrap.
image

Enum:
StandardViews.LargeSmallImageAndText03

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargeSmallImageAndText03

  On the left, one small image; on the right, one string of regular text wrapped over a maximum of five lines.
image

Enum:
StandardViews.LargeSmallImageAndText04

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargeSmallImageAndText04

  On the left, one small image; on the right, one header string of larger text on the first line over one string of regular text wrapped over a maximum of four lines.
image

Enum:
StandardViews.LargeSmallImageAndText05

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargeSmallImageAndText05

  On the left, one header string in larger text over one string of regular text wrapped over a maximum of four lines; on the right, one small image with 3:4 dimensions.
image

Enum:
StandardViews.LargeText01

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargeText01

  One header string in larger text on the first line, four strings of regular text on the next four lines. Text does not wrap.
image

Enum:
StandardViews.LargeText02

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargeText02

  One header string in larger text over eight short strings arranged in two columns of four lines each. Columns are of equal width.
image

Enum:
StandardViews.LargeText03

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargeText03

  One string of large text wrapped over a maximum of three lines.
image

Enum:
StandardViews.LargeText04

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargeText04

  One string of regular text wrapped over a maximum of five lines.
image

Enum:
StandardViews.LargeText05

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargeText05

  Five strings of regular text on five lines. Text does not wrap.
image

Enum:
StandardViews.LargeText06

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargeText06

  Ten short strings of regular text, arranged in two columns of five lines each. Columns are of equal width.
image

Enum:
StandardViews.LargeText07

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargeText07

  One header string in larger text over eight short strings of regular text arranged in two columns of four lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText10, but the first column is wider.
image

Enum:
StandardViews.LargeText08

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargeText08

  Ten short strings of regular text arranged in two columns of five lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText11, but the first column is wider.
image

Enum:
StandardViews.LargeText09

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargeText09

  One header string in larger text over one string of regular text wrapped over a maximum of four lines.
image

Enum:
StandardViews.LargeText10

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargeText10

  One header string in larger text over eight short strings of regular text arranged in two columns of four lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText07, but the first column is narrower.
image

Enum:
StandardViews.LargeText11

Data Templare Resource Name:
CODE.Framework-StandardTemplate-LargeText11

  Ten short strings of regular text arranged in two columns of five lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText08, but the first column is narrower.
image

Enum:
StandardViews.PeekImageAndText01

Data Templare Resource Name:
CODE.Framework-StandardTemplate-PeekImageAndText01

  Top: One square image, no text. Bottom: One header string in larger text on the first line, three strings of regular text on each of the next three lines. Text does not wrap. Elements animate up and down.
image

Enum:
StandardViews.PeekImageAndText02

Data Templare Resource Name:
CODE.Framework-StandardTemplate-PeekImageAndText02

  Top: Square image, no text. Bottom: One header string in larger text on the first line, over one string of regular text wrapped over a maximum of three lines. Elements animate up and down.
image

Enum:
StandardViews.PeekImageAndText03

Data Templare Resource Name:
CODE.Framework-StandardTemplate-PeekImageAndText03

  Top: Square image, no text. Bottom: Four strings of regular text on four lines. Text does not wrap. Elements animate up and down.
image

Enum:
StandardViews.PeekImageAndText04

Data Templare Resource Name:
CODE.Framework-StandardTemplate-PeekImageAndText04

  Top: Square image, no text. Bottom: One string of regular text wrapped over a maximum of four lines. Elements animate up and down.
image

Enum:
StandardViews.Text01

Data Templare Resource Name:
CODE.Framework-StandardTemplate-Text01

  One header string in larger text on the first line; three strings of regular text on each of the next three lines. Text does not wrap.
image

Enum:
StandardViews.Text02

Data Templare Resource Name:
CODE.Framework-StandardTemplate-Text02

  One header string in larger text on the first line, over one string of regular text wrapped over a maximum of three lines.
image

Enum:
StandardViews.Text03

Data Templare Resource Name:
CODE.Framework-StandardTemplate-Text03

  Four strings of regular text on four lines. Text does not wrap.
image

Enum:
StandardViews.Text04

Data Templare Resource Name:
CODE.Framework-StandardTemplate-Text04

  One string of regular text wrapped over a maximum of four lines.
image

Last edited Nov 28, 2012 at 2:19 AM by meggereps, version 19

Comments

No comments yet.