#339 – Wrapping a Button’s Text Content to Multiple Lines

July 11, 2011 Leave a comment

When a Button control automatically sizes to fit its content, it will grow to fit the text in the Content property.  However, the text will always remain on a single line.

        <Button Content="Click me if you want to see something cool.  In fact, click as many times as you like."
                HorizontalAlignment="Center" VerticalAlignment="Center"


If you constrain the button’s Width, however, the text will be clipped.

To get the text on a face of a Button to wrap, you can use a TextBlock as the button’s Content, rather than a simple text string.  You also set the TextWrapping property on the TextBlock.

        <Button HorizontalAlignment="Center" VerticalAlignment="Center"
                Margin="10" Width="120">
            <TextBlock Text="Click me if you want to see something cool.  In fact, click as many times as you like."
                       TextWrapping="Wrap"/>
        </Button>

Filed under Controls Tagged with , , , , ,

#318 – TextBox Basics

June 10, 2011 Leave a comment

A TextBox control is a control that displays some text and allows a user to edit it.

The Text property controls that text that is displayed in the TextBox.  It can be set, to indicate the text that should appear in the TextBox.  It can also be read, to retrieve text entered by the user.

    <StackPanel>
        <TextBox Name="txtKing" Text="I'm Henry VIII." Height="25" Width="150"/>
        <Button Content="Display Text" Click="Button_Click" Width="100" Margin="10"/>
    </StackPanel>

When the program starts, the TextBox contains the desired text:

The user can edit this text or enter new text.

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show(txtKing.Text);
        }

Filed under Controls Tagged with , , ,

#259 – Setting Typography Properties for Text Rendered with an OpenType Font

March 28, 2011 Leave a comment

WPF includes a Typography class, which allows setting various attached properties for textual elements.  These properties only affect text that is rendered using an OpenType font.

The Typography class lets you specify things like:

  • Superscripts and subscripts
  • Use of capitals and spacing between capitals
  • Ligatures (combined glyphs)
  • Swashes (decorative elements)
  • Alternate glyphs
  • Historical glyphs
  • Proportional spacing for numerals
  • Turning kerning off/on

For example, we can specify that some text be rendered using small capitals, as follows.

		<TextBlock Margin="20" Width="250" Height="55"
		    FontFamily="Constantia" FontSize="14"
		    TextWrapping="Wrap">
			We secure our friends not by accepting favors but by doing them.
			<Run Typography.Capitals="SmallCaps">--Thucydides</Run>
		</TextBlock>

Filed under Controls Tagged with , , , ,

#246 – Use FlowDocument Control to Host Entire Documents

March 15, 2011 Leave a comment

The FlowDocument control provides richer functionality than Label and TextBlock for displaying text.

A FlowDocument contains a collection of blocks, each of which is a separate paragraph, list, section or table.  Below is a simple example.

		<FlowDocument FontFamily="Cambria" FontSize="16">
			<Paragraph FontFamily="Arial" FontSize="14">
				Excerpt from <Italic>White Fang</Italic>, by <Bold>Jack London</Bold>
			</Paragraph>

			<Paragraph>
				A second cry arose, piercing the silence with needle-like shrillness.  Both men located the sound.
				It was to the rear, somewhere in the snow expanse they had just traversed.  A third and answering
				cry arose, also to the rear and to the left of the second cry.
			</Paragraph>

			<Paragraph>
				“They’re after us, Bill,” said the man at the front.
			</Paragraph>

			<Paragraph>
				His voice sounded hoarse and unreal, and he had spoken with apparent effort.
			</Paragraph>
		</FlowDocument>

Note that the content in the document automatically flows to fit the available space.

Filed under Controls Tagged with , , ,

#243 – Display Text Using a Label Control

March 12, 2011 Leave a comment

We saw how to use the DrawText and DrawGlyphRun methods to draw text into a visual element at a very low-level.  A much easier way to display text in a user interface is to use the Label control.

Because Label inherits from UIElement, you can include it in XAML as child of a Panel control.

You set the text for the Label using its Content property.

Here are some examples of Label controls.

	<StackPanel Orientation="Vertical">
		<Label Content="Miss Barkley was quite tall."/>
		<Label Content="A man is never lost at sea." FontFamily="Verdana" FontSize="16" FontWeight="Bold"/>
		<Label Content="Listen, Robert, going to another country doesn't make any difference." Foreground="Blue" Background="Pink"/>
	</StackPanel>

Filed under Controls Tagged with , , , ,

Follow

Get every new post delivered to your Inbox.

Join 129 other followers