Label (or text block)

Applies to Windows and Windows Phone

A sample of what a standard label control looks like

Description

A label is the name or title of a control or a group of related controls.

In XAML, many controls have a built-in Header property that you use to display the label. For controls that don’t have a Header property, or to label groups of controls, you can use a TextBlock instead.

In HTML, you use the label element.

Example

A screenshot that illustrates the standard Label control

Dos and Don'ts

  • Use a label to indicate to the user what they should enter into an adjacent control, if it’s not already obvious. For example, ‘Name’ above a text input box. You can also label a group of related controls, or display instructional text near a group of related controls.
  • If you’re labeling controls, write the label as a noun or a concise noun phrase, not as a sentence, and not as instructional text. Don’t use colons or other punctuation.
  • You can be more liberal with the length of instructional text, and you can use punctuation.
  • Applies to Windows

XAML style gallery for Windows Store apps

To help you style your app like a built-in app, you can use this XAML snippet in a Windows Store app to make yourself a TextBlock style gallery to refer to.


<StackPanel>
    <Border BorderBrush="Gray" BorderThickness="1">
        <TextBlock Text="BaseTextBlockStyle" Style="{StaticResource BaseTextBlockStyle}"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1">
        <TextBlock Text="BodyTextBlockStyle" Style="{StaticResource BodyTextBlockStyle}"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1">
        <TextBlock Text="CaptionTextBlockStyle" Style="{StaticResource CaptionTextBlockStyle}"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1">
        <TextBlock Text="HeaderTextBlockStyle" Style="{StaticResource HeaderTextBlockStyle}"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1">
        <TextBlock Text="SubheaderTextBlockStyle" Style="{StaticResource SubheaderTextBlockStyle}"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1">
        <TextBlock Text="SubtitleTextBlockStyle" Style="{StaticResource SubtitleTextBlockStyle}"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1">
        <TextBlock Text="TitleTextBlockStyle" Style="{StaticResource TitleTextBlockStyle}"/>
    </Border>
</StackPanel>


A Windows Store app TextBlock style gallery

  • Applies to Windows Phone

XAML style gallery for Windows Phone Store apps

To help you style your app like a built-in app, you can use this XAML snippet in a Windows Phone Store app to make yourself a TextBlock style gallery to refer to.


<StackPanel>
    <Border BorderBrush="Gray" BorderThickness="1">
        <TextBlock Text="BaseTextBlockStyle" Style="{StaticResource BaseTextBlockStyle}"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1">
        <TextBlock Text="BodyTextBlockStyle" Style="{StaticResource BodyTextBlockStyle}"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1">
        <TextBlock Text="ComboBoxPlaceholderTextBlockStyle" Style="{StaticResource ComboBoxPlaceholderTextBlockStyle}"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1">
        <TextBlock Text="ControlContextualInfoTextBlockStyle" Style="{StaticResource ControlContextualInfoTextBlockStyle}"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1">
        <TextBlock Text="ControlHeaderTextBlockStyle" Style="{StaticResource ControlHeaderTextBlockStyle}"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1">
        <TextBlock Text="FlyoutPickerTitleTextBlockStyle" Style="{StaticResource FlyoutPickerTitleTextBlockStyle}"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1">
        <TextBlock Text="GroupHeaderTextBlockStyle" Style="{StaticResource GroupHeaderTextBlockStyle}"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1">
        <TextBlock Text="HeaderTextBlockStyle" Style="{StaticResource HeaderTextBlockStyle}"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1">
        <TextBlock Text="ListViewEmptyStaticTextBlockStyle" Style="{StaticResource ListViewEmptyStaticTextBlockStyle}"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1">
        <TextBlock Text="ListViewItemContentTextBlockStyle" Style="{StaticResource ListViewItemContentTextBlockStyle}"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1">
        <TextBlock Text="ListViewItemSubheaderTextBlockStyle" Style="{StaticResource ListViewItemSubheaderTextBlockStyle}"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1">
        <TextBlock Text="ListViewItemTextBlockStyle" Style="{StaticResource ListViewItemTextBlockStyle}"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1">
        <TextBlock Text="MessageDialogContentStyle" Style="{StaticResource MessageDialogContentStyle}"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1">
        <TextBlock Text="MessageDialogTitleStyle" Style="{StaticResource MessageDialogTitleStyle}"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1">
        <TextBlock Text="SubheaderTextBlockStyle" Style="{StaticResource SubheaderTextBlockStyle}"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1">
        <TextBlock Text="TitleTextBlockStyle" Style="{StaticResource TitleTextBlockStyle}"/>
    </Border>
</StackPanel>


A Windows Phone Store app TextBlock style gallery

Related topics

For designers
Guidelines for fonts
Guidelines for typography
For developers (HTML)
label element | label object
For developers (XAML)
TextBox.Header property
PasswordBox.Header property
ToggleSwitch.Header property
DatePicker.Header property
TimePicker.Header property
Slider.Header property
ComboBox.Header property
RichEditBox.Header property
TextBlock class

 

 

Show:
© 2014 Microsoft