#842 – The Differences Between Label and TextBlock

You can use either Label or TextBlock elements to display text in an application.

        <Label Content="I'm a Label"/>
        <TextBlock Text="I'm a TextBlock"/>

842-001
The two elements appear to behave similarly, but there are a few differences:

  • Label
    • Can have an access key (mnemonic), allowing the user to give focus to a related control
    • Has a built-in border (BorderBrushBorderThickness)
    • Has a Content property that can be set to some other element
    • Can use templates to customize the entire control or the content area of the control
    • Can align its content with HorizontalContentAlignment and VerticalContentAlignment
    • Will render as grey when IsEnabled is false
  • TextBlock
    • Can have richer text formatting, using inline formatting
    • Can wrap its text to multiple lines
    • Can hyphenate words
    • Allows specifying space between lines
    • Allows left/right/center justification using the TextAlignment property
    • Supports text decorations (e.g. underline, baseline)
    • Allows setting typography properties

#841 – Display Underlines for Access Keys at All Times

Normally, the underline characters that are used to indicate access keys for controls are displayed only after you press the Alt key.

For example, before you press the Alt key, you won’t see any underlines:

841-001

But once you press the Alt key, you’ll see underlines indicating access keys for all controls:

841-002

 

You can, however, change a setting in the Control Panel so that the underlines are always visible.

In Control Panel, click on Ease of Access.  (Instructions below apply to Windows 8).

841-003

 

Click on Ease of Access Center.

841-004

 

Click on the Make the keyboard easier to use option.

841-005

 

Enable the option Underline keyboard shortcuts and access keys.

841-006

 

The underlines indicating access keys will now be displayed immediately when you start your application.

 

#840 – Access Keys Should Be Unique within A Window

An access key is a character that the user can press, in combination with the Alt key, in order to activate or give a control focus.  Because a user’s key press is associated with a particular control, you should ensure that each access key is unique within the parent window.

If you do happen to define the same access key for multiple controls within a window, pressing the access key will toggle the focus between the controls, rather than activating them.  In the example below, press Alt+T will toggle the focus back and forth between the two buttons.  If you then change the second access key to something different, pressing Alt+T will activate (press) the first button.

        <Button Content="_This" VerticalAlignment="Top"
                Padding="10,5" Margin="5"
                Click="DoThis_Click"/>
        <Button Content="_That" VerticalAlignment="Top"
                Padding="10,5" Margin="5"
                Click="DoThat_Click"/>

#839 – A Label’s Target Could Have Its Own Label

You typically set the Target of a Label to a control that doesn’t have its own label.  The purpose is that when the user presses the Label’s access key, the target control will receive focus.

There’s nothing preventing you, however, from specifying the Target as a control that would normally have its own caption.

For example, you normally set a Button’s access key to one of the characters in its Content property–i.e. the text that appears on the face of the button.  In the example below, however, we use a Label to specify an access key for the Button, since the button’s content is just an asterisk character.  When you press the Label’s access key, the Button will activate.

    <StackPanel Orientation="Horizontal">
        <Label Content="_Calculate" VerticalAlignment="Center"
               Target="{Binding ElementName=btnCalc}"/>
        <Button Name="btnCalc" Content="*" VerticalAlignment="Center"
                Padding="10,5" Click="btnCalc_Click"/>
    </StackPanel>

839-001
839-002

#838 – Using a Label’s Access Key to Give Focus to Another Control

An access key is a character that the user can press, in combination with the Alt key, in order to activate or give a control focus.

Controls that the user can interact with and that have their own label typically can define their own access keys.  (E.g. A Button).  Controls that don’t have their own label can be activated or receive focus by using the access key of a nearby Label.

To pair a Label’s access key with another control, you:

  • Define the access key using an underscore in the Label’s Content property
  • Associate the related control using the Label’s Target property
    <StackPanel Orientation="Horizontal">
        <Label Content="Your _Name" VerticalAlignment="Center"
               Target="{Binding ElementName=txtName}"/>
        <TextBox Name="txtName" VerticalAlignment="Center"
                 Width="120"/>
    </StackPanel>

When the user presses Alt+N, the TextBox gains focus (and the user can then begin typing to enter their name).

838-001

#837 – A Window Cannot Be a Child of a ContentControl

The content of a ContentControl can be just about anything, including either UI elements or simple CLR objects.  For example, the content of a CheckBox can be something more than a simple text string.

One of the few elements that cannot be used as content for a ContentControl is a Window.  It wouldn’t make sense to place a Window element as the content of something else, like a Button.  A Window can only be the topmost element of the logical tree.

If you do try to include a Window as a child of another element, you’ll get an exception at run-time, when the XAML is parsed.

    <Button Height="23" Width="80">
        <Window Title="A window in a button?" />
    </Button>

837-001

#836 – Setting a ContentControl’s Content to a CLR Object

You’ll typically set the Content property of a content control to an instance of an UIElement, which will typically include one or more controls.  (E.g. On a Button).

You can also set a Content property to a plain CLR object, i.e. an object that derives from System.Object.  When you do this, a content control will render the object by calling its ToString method.

In the example below, a Tooltip’s content is set to an instance of a Dog class.  When the tooltip is displayed, the dog’s ToString method is called.

<Window.Resources>
    <local:Dog x:Key="myDog" Name="Kirby" Age="15" FavToy="Tennis ball"/>
</Window.Resources>

<StackPanel DataContext="{StaticResource myDog}">
    <Label Content="{Binding Name}" Margin="10"
           ToolTip="{Binding}"/>
</StackPanel>

Assume that the ToString method dumps out the contents of the object:

        public override string ToString()
        {
            StringBuilder sbValue = new StringBuilder(string.Format("Dog {0}:\n", Name));
            sbValue.AppendFormat("  Age: {0}\n", Age);
            sbValue.AppendFormat("  Favorite Toy: {0}\n", FavToy);

            return sbValue.ToString();
        }

836-001

#835 – Displaying Custom Content in a GroupBox Header

You normally set the Header property of a GroupBox to some text.

        <GroupBox Header="Julius Caesar">
            <Label Content="100BC - 44BC, etc."/>
        </GroupBox>
        <GroupBox Header="Augustus">
            <Label Content="63BC - 14AD, etc."/>
        </GroupBox>

835-001

You can, however, set the Header to anything that you like, including a panel containing other controls.

        <GroupBox>
            <GroupBox.Header>
                <StackPanel Orientation="Horizontal">
                    <Label Content="Julius Caesar"/>
                    <Image Source="Caesar.jpg" Height="48"/>
                </StackPanel>
            </GroupBox.Header>
            <Label Content="100BC - 44BC, etc."/>
        </GroupBox>
        <GroupBox>
            <GroupBox.Header>
                <StackPanel Orientation="Horizontal">
                    <Label Content="Augustus"/>
                    <Image Source="Augustus.jpg" Height="48"/>
                </StackPanel>
            </GroupBox.Header>
            <Label Content="63BC - 14AD, etc."/>
        </GroupBox>

835-002

#834 – Displaying Custom Content on a TabControl’s Tabs

When you use a TabControl in your application, each tab is represented by a TabItem.  The content of the TabItem is a single container and items placed within this container show up in the body of the TabControl when that tab is clicked.

When you set the Header property of a TabItem to some text, that text will be drawn on the tab.

    <TabControl Margin="5" >
        <TabItem Header="His">
            <StackPanel>
                <Label Content="His stuff goes here"/>
            </StackPanel>
        </TabItem>

        <TabItem Header="Hers">
            <StackPanel>
                <Label Content="Her stuff goes here"/>
            </StackPanel>
        </TabItem>
    </TabControl>

834-001
Because TabItem.Header is of type object, you can set the Header to anything that you like.  (E.g. a panel containing multiple items).

    <TabControl Margin="5" >
        <TabItem>
            <TabItem.Header>
                <Image Source="His.png" Height="50"/>
            </TabItem.Header>
            <StackPanel>
                <Label Content="His stuff goes here"/>
            </StackPanel>
        </TabItem>

        <TabItem>
            <TabItem.Header>
                <Image Source="Hers.png" Height="50"/>
            </TabItem.Header>
            <StackPanel>
                <Label Content="Her stuff goes here"/>
            </StackPanel>
        </TabItem>
    </TabControl>

834-002

#833 – CheckBox is a ContentControl

CheckBox control derives from ContentControl, which means that it can contain a single piece of content.  In the case of a CheckBox, this content is rendered next to the actual check box that a user can check on or off.

You typically set the content of a CheckBox to a string, which gets rendered next to the check box.

        <CheckBox Content="Learn to juggle"/>
        <CheckBox Content="Read War and Peace"/>
        <CheckBox Content="Visit Japan"/>

833-001
You can, however, set the Content property to anything that you like, including a panel that contains other controls.

        <CheckBox VerticalContentAlignment="Center">
            <CheckBox.Content>
                <StackPanel>
                    <Image Source="Juggler.png" Height="85"/>
                    <Label Content="Learn to juggle"/>
                </StackPanel>
            </CheckBox.Content>
        </CheckBox>
        <CheckBox VerticalContentAlignment="Center">
            <CheckBox.Content>
                <StackPanel>
                    <Image Source="leo.jpg" Height="85"/>
                    <Label Content="Read War and Peace"/>
                </StackPanel>
            </CheckBox.Content>
        </CheckBox>
        <CheckBox VerticalContentAlignment="Center">
            <CheckBox.Content>
                <StackPanel>
                    <Image Source="kinkakuji.jpg" Height="85"/>
                    <Label Content="Visit Japan"/>
                </StackPanel>
            </CheckBox.Content>
        </CheckBox>

833-002