KvadrantMetrics

data class KvadrantMetrics(val scale: Float = 1.0f, val margin: Dp = 9.dp, val borderThickness: Dp = 2.25.dp, val focusRingThickness: Dp = 1.667.dp, val touchTargetOverhang: Dp = 9.dp, val touchTargetVisual: Dp = 25.5.dp, val touchTargetMin: Dp = 48.dp, val pivotItemMargin: Dp = 9.dp, val pivotItemTopMargin: Dp = 21.dp, val pivotHeaderGap: Dp = 15.75.dp, val tiltDepression: Dp = 18.75.dp, val buttonPaddingHorizontal: Dp = 7.5.dp, val buttonPaddingTop: Dp = 2.25.dp, val buttonPaddingBottom: Dp = 3.75.dp, val progressThickness: Dp = 3.dp, val sliderThickness: Dp = 9.dp, val tileSmall: Dp = 74.25.dp, val tileMedium: Dp = 157.5.dp, val tileWide: Dp = 324.dp, val tileGap: Dp = 9.dp)

Page and control measurements, in dp at the canonical 0.75 of Metro's pixels.

Only what is used so far. A token added before something reads it is a number nobody has checked.

focusRingThickness is the one exception to the first sentence and says so in its own doc: it comes from the Windows 8 lineage rather than the phone's, where a pixel is a different length, so it is converted by a different factor. Everything else here is a Metro phone pixel × 0.75.

Constructors

Link copied to clipboard
constructor(scale: Float = 1.0f, margin: Dp = 9.dp, borderThickness: Dp = 2.25.dp, focusRingThickness: Dp = 1.667.dp, touchTargetOverhang: Dp = 9.dp, touchTargetVisual: Dp = 25.5.dp, touchTargetMin: Dp = 48.dp, pivotItemMargin: Dp = 9.dp, pivotItemTopMargin: Dp = 21.dp, pivotHeaderGap: Dp = 15.75.dp, tiltDepression: Dp = 18.75.dp, buttonPaddingHorizontal: Dp = 7.5.dp, buttonPaddingTop: Dp = 2.25.dp, buttonPaddingBottom: Dp = 3.75.dp, progressThickness: Dp = 3.dp, sliderThickness: Dp = 9.dp, tileSmall: Dp = 74.25.dp, tileMedium: Dp = 157.5.dp, tileWide: Dp = 324.dp, tileGap: Dp = 9.dp)

Properties

Link copied to clipboard

PhoneBorderThickness 3 px — a Metro button's border, and it is thick on purpose.

Link copied to clipboard
Link copied to clipboard

PhoneButtonBase's Padding="10,3,10,5" — the button's content inset, asymmetric top to bottom.

Link copied to clipboard
Link copied to clipboard

The dotted keyboard-focus ring's stroke, and the one number here that is not a phone pixel.

Link copied to clipboard
val margin: Dp

PhoneMargin 12 px. The margin everything on a page hangs off.

Link copied to clipboard

PivotHeaderItem padding 21,0,1,0 — the 21 px is the gap between headers.

Link copied to clipboard

PivotItemMargin 12,28,12,0.

Link copied to clipboard
Link copied to clipboard

The progress bar's one dimension: a dot is Width="4" Height="4" and both rectangles of the determinate track are Height="4", so it is a single number in three places.

Link copied to clipboard

How far this set has been scaled from Metro's own numbers, cumulatively.

Link copied to clipboard

Height="12" on the slider's track and fill — not the progress bar's 4.

Link copied to clipboard
val tileGap: Dp
Link copied to clipboard
Link copied to clipboard

Tile sizes: 99 / 210 / 432×210 px, gap 12 px.

Link copied to clipboard
Link copied to clipboard

How far a pressed surface sinks — MaxDepression = 25 Metro pixels.

Link copied to clipboard

Extended to the modern minimum, always — visual stays canonical. See D7.

Link copied to clipboard

PhoneTouchTargetOverhang 12 px: the invisible padding around a small target.

Link copied to clipboard

The canonical touch target. Authentic; touchTargetMin is what is actually enforced.

Functions

Link copied to clipboard

The same measurements, every one of them multiplied by factor.

Link copied to clipboard

The metric set scaled so that one row of the Start screen — margin, wide tile, margin — is exactly width across.