Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

WPF Wonders: An Alphabetical Compendium of WPF Controls : Page 6

Among many other changes, WPF brings a completely new set of controls. Learn which controls do what and pick up a few tips on getting the most out of them in your WPF applications.


advertisement

ScrollBar

Normally you don't need to use ScrollBars directly because other controls such as ListBox, ScrollViewer, and TextBox provide them automatically, but you can use a ScrollBar to let the user select a value if you want. The WPF ScrollBar works much like the Windows Forms version does, providing relatively intuitive Minimum, Maximum, and Value properties, and a ValueChanged event.

ScrollViewer

The ScrollViewer displays one child inside a scrolling window. The control is pleasantly easy to use—simply drop a child into it such as an Image with its Stretch property set to None.

Two important ScrollViewer properties are HorizontalScrollBarVisibility and VerticalScrollBarVisibility, which determine when the control's scroll bars are visible. Their values can be Auto, Disabled, Hidden, or Visible. (For some strange reason, HorizontalScrollBarVisibility defaults to Disabled and VerticalScrollBarVisibility defaults to Visible. You'll probably want to set both of these to Auto.)

Separator

The Separator places a separator in a menu or toolbar.

Slider

The Slider control is somewhat similar to the Windows Forms TrackBar control. Both allow the user to select a value from a sliding scale and provide Minimum, Maximum, and Value properties. The following list describes the other most useful Slider properties.

  • IsSnapToTickEnabled: Determines whether the control's value snaps to the nearest tick mark.
  • IsSelectionRangeEnabled: Determines whether the user can select a range of values.
  • TickFrequency: The spacing between tick marks.
  • TickPlacement: The location of the tick marks. This can be BottomRight (bottom or right depending on the orientation), TopLeft (top or left), or Both (both top and bottom, or both left and right).
  • Ticks: An array of positions to place tick marks.

StackPanel

The StackPanel is an extremely useful container that arranges its children closely packed in either a single row or a single column. For example, the following code shows how the ControlSamples program places information inside its Expander. The StackPanel packs the three labels one after another vertically.

<StackPanel> <Label Content="First Name: Rod"/> <Label Content="Last Name: Stephens"/> <Label Content="Occupation: Dilettante"/> </StackPanel>

ControlSamples actually uses several StackPanels to make its columns of controls. It also uses StackPanels to arrange smaller groups within the columns, such as the horizontal groups holding the Polygon and Polyline, ScrollBar and Label, and Slider and Label.

StackPanel and Grid are probably the most-used WPF container controls.

StatusBar

The StatusBar displays an area (normally at the bottom of the form) where you can display status information. The StatusBar should contain StatusBarItems that hold the controls that you want to display.

A StatusBarItem can contain Labels, Buttons, Sliders, and even containers such as Grids that can hold other controls; however, you should generally keep the StatusBar contents simple.

TabControl

The TabControl (yes, the word "Control" is part of its name) displays a set of tabs. When you click on a tab, the control displays the corresponding content.

The TabControl holds a set of TabItem objects. The TabItem's Header property determines what is displayed in the tab. Each TabItem should contain a single child that holds whatever you want to display on the tab. Typically this child is a container such as a Grid or StackPanel that holds other controls.

The following code shows how ControlSamples makes its TabControl.

<TabControl SelectedIndex="1"> <TabItem Header="Brk"> <StackPanel> <CheckBox Content="Orange Juice"/> <CheckBox Content="Toast"/> <CheckBox Content="Cereal"/> </StackPanel> </TabItem> <TabItem Header="Lunch"> <StackPanel> <CheckBox Content="Soda" IsChecked="True"/> <CheckBox Content="Sandwich" IsChecked="True"/> <CheckBox Content="Chips"/> </StackPanel> </TabItem> <TabItem Header="Dinner"> <StackPanel> <CheckBox Content="Water"/> <CheckBox Content="Bread"/> </StackPanel> </TabItem> </TabControl>

TextBlock

The TextBlock displays read-only text like a Label, but also supports additional features such as word wrapping, italics, bold, and colored text.

There's no room for a full discussion of the TextBlock here but thinking of it as a fancy Label will take you pretty far. You can use Run objects inside the control's contents to temporarily change the text's style.

The following code shows how the ControlSamples program displays its TextBlock.



<TextBlock TextWrapping="Wrap" FontWeight="Normal"> The TextBlock can display <Run FontWeight="Bold">bold</Run>, <Run FontStyle="Italic">italic</Run>, <Run Foreground="Red">colored</Run>, and otherwise formatted text. </TextBlock>

TextBox

The TextBox control is similar to its Windows Forms counterpart. One nice addition to the WPF version is an automatic spell checking feature, complete with a suggestions popup similar to the one provided by the RichTextBox.

ToolBar

A ToolBar displays a set of small buttons and other controls for quick access.

To give the user the full ToolBar experience, place one or more ToolBars inside a ToolBarTray. The ToolBarTray arranges the ToolBars and lets users drag them around. Place Buttons and whatever else you need inside the ToolBars.

If you have multiple ToolBars, you can set their Band properties to indicate which horizontal band should initially hold them in the tray.

The ControlSamples program shown in Figure 2 defines two ToolBars in bands 0 and 1.

ToolTip

As you can probably guess, the ToolTip displays a tooltip. The easiest way to use a ToolTip is to set another control's ToolTip property to the text that you want the ToolTip to display. For example, the following code sets a Button's ToolTip.

<Button ToolTip="Do something interesting with a cellphone."> <Image Source="cellphone.ico" Width="24" Height="24"/> </Button>

If you want a ToolTip to do something more creative than simply displaying text, you can set a control's ToolTip property as an attribute element, and place a single child inside the ToolTip. If you like, the child can be a container that holds several controls.

The following code makes a Button's ToolTip use a TextBlock with word wrapping.

<Button> <Button.ToolTip> <TextBlock Width="60" TextAlignment="Center" TextWrapping="Wrap"> Do something interesting with a CD. </TextBlock> </Button.ToolTip> <Image Source="cdmusic.ico" Width="24" Height="24"/> </Button>



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap