Click here to Skip to main content
15,867,568 members
Articles / Desktop Programming / WPF

WPF Controls - A Visual Quick Start

Rate me:
Please Sign up or sign in to vote.
4.61/5 (39 votes)
21 Nov 2008CPOL5 min read 200.2K   73   28
A beginner's guide to the default controls in WPF.

Introduction

Understanding the default controls available in .NET/WPF can save you a lot of time. In fact, having a strong understanding of the basics is virtually required since most WPF controls were designed to be extended. The examples are written in XAML, as they can be easily copied and pasted into the Visual Studio 2008 (or any other) designer. My goal is to show how the controls work with screenshots and XAML, instead of using text descriptions.

WPF Visual Quick Start Articles by Josh Fischer

Background

Controls are the basis for virtually any 2D WPF application. They range from the basic label and button, to complex tree views and grids. If you have used any version of Access, VB, or Visual Studio, then you are familiar with the concept. WPF takes the model one step further, however, and allows nearly endless customization and nesting of controls.

Conventions

I chose to use a Canvas for all the examples as it allows for exact placement of controls and does not stretch the controls to fit in a certain region. This means you can effectively ignore statements such as Canvas.Top="50" since this is merely telling WPF where to put the control on the screen. One thing you will quickly discover is that certain properties such as background color, font, etc., can be changed for virtually every control. Rather than show a screenshot for every possible customization, I attempted to show what features are most important for the given control. Please remember this article is for beginners, and is not intended as a reference (that is what MSDN is for).

The Controls

ButtonsTextShapes
ContainersMediaToolbars
ScrollsPanels & ListsMiscellaneous

Buttons

  • Button - The defacto standard; indicates an area can be clicked
  • ToggleButton - Like a Button, but remains pressed down after it is clicked
  • CheckBox - Indicates a positive, negative, or indeterminate state
  • RadioButton - Allows exclusive selection among options

Example 1
Example 2
Example 3

Example 1

XML
<Canvas>
  <Button Canvas.Top="0" Canvas.Left="0">Click Me</Button>
  <ToggleButton Canvas.Top="40" Canvas.Left="0">Toggle Me</ToggleButton>
  <CheckBox Canvas.Top="80" Canvas.Left="0">Check Me</CheckBox>
  <RadioButton Canvas.Top="0" Canvas.Left="80">Yes</RadioButton>
  <RadioButton Canvas.Top="50" Canvas.Left="80">No</RadioButton>
</Canvas>

Example 2

XML
<Canvas>
<Button Width="75" Height="40"
    Canvas.Top="0" Canvas.Left="0">Click Me</Button>

<ToggleButton Foreground="White" Background="Red"
    Canvas.Top="40" Canvas.Left="0">Toggle Me</ToggleButton>

<CheckBox BorderBrush="Green" BorderThickness="10"
    Canvas.Top="80" Canvas.Left="0">Check Me</CheckBox>

<RadioButton FontFamily="Algerian" FontSize="24"
    Canvas.Top="0" Canvas.Left="80">Yes</RadioButton>

<RadioButton FontStyle="Italic" FontWeight="Bold"
    Canvas.Top="50" Canvas.Left="80">No</RadioButton>
</Canvas>

Example 3

XML
<Canvas>
<!-- Clicking MyButton will call the "MyButton_Click_1" method in your code -->
<Button Name="MyButton" Click="MyButton_Click_1"
    Canvas.Top="0" Canvas.Left="0">Click Me</Button>

<!-- The button will intially be toggled or "pressed down" -->
<ToggleButton IsChecked="True"
    Canvas.Top="40" Canvas.Left="0">Toggle Me</ToggleButton>

<CheckBox IsChecked="True"
    Canvas.Top="80" Canvas.Left="0">Check Me 1</CheckBox>

<!-- Shows the indeterminate state; a grey check -->
<CheckBox IsChecked="{x:Null}"
    Canvas.Top="80" Canvas.Left="80">Check Me 2</CheckBox>

<RadioButton IsChecked="False"
    Canvas.Top="0" Canvas.Left="80">Yes</RadioButton>

<RadioButton IsChecked="True"
    Canvas.Top="40" Canvas.Left="80">No</RadioButton>
</Canvas>

Note:

  • The "Yes" and "No" buttons can not both be checked at the same time

Text

  • TextBox - Contains unformatted, editable text
  • PasswordBox - Like a TextBox, but masks the characters
  • Label - Contains read-only text
  • TextBlock - Like a Label, but allows for greater display customization
  • RichTextBox - An editable version of a TextBlock

Example 1
Example 2
Example 3

Example 1

XML
<Canvas>
 <TextBox Canvas.Top="0">standard text input</TextBox>
 <PasswordBox Canvas.Top="40" Password="secret" />
 <Label Canvas.Top="80">basic read-only text</Label>
 <TextBlock Canvas.Top="120">advanced read-only text</TextBlock>
</Canvas>

Example 2

XML
<Canvas>
<TextBox Name="MyTextBox" MaxWidth="150" TextWrapping="Wrap"
    HorizontalContentAlignment="Right" SpellCheck.IsEnabled="True"
    Canvas.Top="0">standard text input + more text</TextBox>

<PasswordBox Width="150" PasswordChar="-"
    HorizontalContentAlignment="Right"
    Canvas.Top="40" Password="secretquot; />

<!-- Hitting alt+ b will move the cursor to the text box -->
<Label Target="{Binding ElementName=MyTextBox}"
    Canvas.Top="80">_basic read-only text</Label>

<TextBlock Width="150" Height="50" 
         TextAlignment="Center" Canvas.Top="120">
    <Bold>advanced</Bold> <Italic>read-only</Italic>
    <LineBreak />
    <Hyperlink>text</Hyperlink> 
</TextBlock>
</Canvas>

Example 3

XML
<Canvas>
<TextBlock Width="180" TextWrapping="Wrap" Canvas.Top="0">
    The <Run FontSize="14" Background="Yellow">TextBlock</Run> class 
    supports a subset of the features provided by the WPF 
    <Bold><Italic>"document"</Italic></Bold> components.
    <LineBreak />
    These components allow you to use <Run FontSize="14" Foreground="Red" 
    FontFamily="Algerian">XAML</Run> markup 
    or code to construct a <Underline>visually enhanced document</Underline>.
</TextBlock>

<RichTextBox Width="180" Height="80" 
            SpellCheck.IsEnabled="True" Canvas.Top="90" >
    <FlowDocument>
    <Paragraph>
    The RichTextBox class is <Bold>very</Bold> similar to the TextBlock class 
    <Underline>except</Underline> the contents are
    <Run FontSize="12" Background="Red" Foreground="White">editable</Run>.
    <LineBreak /><LineBreak />
    <Run FontFamily="Arial Narrow" FontSize="12">Built in spell-checking is nice!</Run>
    </Paragraph>
    </FlowDocument>
</RichTextBox>
</Canvas>

Note:

  • Using an underscore ("_") in a Label's text indicates a keyboard shortcut can be used (like Alt+F for the File menu)
  • TextBox and RichTextBox have built-in spell checking

Shapes

  • Rectangle - Defined by a starting point (upper left corner), a width, and a height
  • Ellipse - Allows you to draw circles and ellipses
  • Line - A straight line defined by two points
  • Polyline - A series of connected straight lines defined by a set of points
  • Polygon - Allows you to draw virtually any shape as defined by a set of points

Example 1

Example 1

XML
<Canvas>
<Rectangle Stroke="Black" StrokeThickness="2" Fill="Yellow"
    Width="50" Height="20"
    Canvas.Left="0" Canvas.Top="0" />

<Ellipse Stroke="Green" StrokeThickness="4" Fill="Yellow"
    Width="100" Height="50"
    Canvas.Left="50" Canvas.Top="50" />

<Line Stroke="Red" StrokeThickness="2"
    X1="100" Y1="30" X2="150" Y2="10" />

<Polyline Stroke="Blue" StrokeThickness="2"
    Points="25,50 25,155 100,125 110,110" />

<Polygon Stroke="Black" StrokeThickness="4" Fill="Yellow"
    Points="150,100 155,150 170,90" />
</Canvas>

Containers

  • GroupBox - Draws a header and rectangle around a group of controls
  • Expander - Basically, a collapsible version of the GroupBox
  • TabControl - Divides controls onto different pages and only displays one tab page at a time

Example 1
Example 2
Example 3

Example 1

XML
<Canvas>
<GroupBox Header="Group 1" Canvas.Left="0" Canvas.Top="0">
    <StackPanel>
    <Button>1</Button><Button>2</Button><Button>3</Button>
    </StackPanel>
</GroupBox>

<Expander Header="Group 2" Canvas.Left="100" Canvas.Top="0">
    <StackPanel>
    <Button>4</Button><Button>5</Button><Button>6</Button>
    </StackPanel>
</Expander>

<TabControl Canvas.Left="0" Canvas.Top="100">
    <TabItem Header="Group 3">
<StackPanel>
    <Button>7</Button><Button>8</Button><Button>9</Button>
</StackPanel>
    </TabItem>
    <TabItem Header="Group 4">
    <StackPanel>
        <Button>10</Button><Button>11</Button><Button>12</Button>
    </StackPanel>
    </TabItem>
</TabControl>
</Canvas>

Examples 2 & 3

XML
<Canvas>
<GroupBox Header="Group 1" Width="90" 
  FontWeight="Bold" Foreground="Blue"
  BorderBrush="Red" BorderThickness="4"
  Canvas.Left="0" Canvas.Top="0">
    <StackPanel>
    <Button>1</Button><Button>2</Button><Button>3</Button>
    </StackPanel>
</GroupBox>

<Expander Header="Group 2" IsExpanded="True" ExpandDirection="Up"
  FontFamily="Algerian" FontSize="12" Background="LightBlue"
  Canvas.Left="100" Canvas.Top="0">
    <StackPanel>
    <Button>4</Button><Button>5</Button><Button>6</Button>
    </StackPanel>
</Expander>

<TabControl Canvas.Left="0" Canvas.Top="100" 
           BorderThickness="10" TabStripPlacement="Right">
    <TabItem Header="Group 3" Background="Blue" Foreground="White">
    <StackPanel>
    <Button>7</Button><Button>8</Button><Button>9</Button>
    </StackPanel>
    </TabItem>
    <TabItem Header="Group 4" Background="Black" Foreground="White">
    <StackPanel>
    <Button>10</Button><Button>11</Button><Button>12</Button>
    </StackPanel>
    </TabItem>
</TabControl>
</Canvas>

Media

  • Image - Displays a picture in a rectangular region
  • InkCanvas - Allows you to draw free hand using the mouse
  • MediaElement - Embeds sound or displays video
  • ViewBox - Allows you to stretch the contents, often an Image
  • WebBrowser - Runs an instance of Internet Explorer inside your application

Example 1

Example 1

XML
<Canvas>
<Image Source="C:\Temp\playultimate.png" Width="100"
    Canvas.Left="0" Canvas.Top="0" />

<InkCanvas Width="100" Height="100" Background="ightBlue"
    Canvas.Left="150" Canvas.Top="0" />

<MediaElement Name="MySound" Source="C:\Temp\asound.wav" Volume="1"
    LoadedBehavior="Manual" UnloadedBehavior="Stop" />
<Button Click="Button_Click"
    Canvas.Left="300">Play Sound</Button>

<Viewbox Width="350" Height="100"
    Canvas.Left="0" Canvas.Top="120" Stretch="Fill">
    <Image Source="C:\Temp\playultimate.png" />
</Viewbox>

<WebBrowser Width="380" Height="130" Source="http://www.codeproject.com"
    Canvas.Left="0" Canvas.Top="230" />
</Canvas>

Toolbars

  • ToolBarTray - A container for ToolBars; allows ToolBars to be moved around in its defined area
  • ToolBar - Contains text or image elements that represent commands or actions that can be clicked

Example 1
Example 2

Example 3
Example 4

Example 1

XML
<Canvas>
<ToolBarTray Orientation="Horizontal"
    Canvas.Left="0" Canvas.Top="0">
    <ToolBar Header="Alpha">
        <Button>1</Button>
    </ToolBar>
    <ToolBar Header="Bravo">
        <Button>2</Button>
    </ToolBar>
</ToolBarTray>

<ToolBarTray Orientation="Vertical"
    Canvas.Left="0" Canvas.Top="50">
    <ToolBar Header="Charlie">
        <Button>3</Button>
    </ToolBar>
    <ToolBar Header="Delta">
        <Button>4</Button>
    </ToolBar>
</ToolBarTray>
</Canvas>

Example 2

XML
<Canvas>
<ToolBarTray Orientation="Horizontal" Width="150"
    Canvas.Left="0" Canvas.Top="0">
    <ToolBar Header="Alpha" Band="1">
        <Button>button 1</Button>
        <Button>button 2</Button>
    </ToolBar>
    <ToolBar Header="Bravo" Band="0">
        <Button>button 3</Button>
        <Button>button 4</Button>
    </ToolBar>
</ToolBarTray>
<ToolBarTray Orientation="Vertical"
    Canvas.Left="0" Canvas.Top="50">
    <ToolBar Header="Charlie" Band="0">
        <Button>5</Button>
        <Button>6</Button>
    </ToolBar>
    <ToolBar Header="Delta" Band="1">
        <Button>7</Button>
        <Button>8</Button>
        <Button ToolBar.OverflowMode="Always">button 9</Button>
    </ToolBar>
</ToolBarTray>
</Canvas>

Examples 3 & 4

XML
<Canvas>
<ToolBarTray Width="150">
    <ToolBar Header="Alpha" Band="0" BandIndex="1">
        <Button>1</Button>
        <Button>2</Button>
    </ToolBar>
    <ToolBar Header="Bravo" Band="1" BandIndex="1">
        <Button>3</Button>
        <Button>4</Button>
    </ToolBar>
    <ToolBar Header="Charliequot; Band="0" BandIndex="0">
        <Button>5</Button>
        <Button>6</Button>
    </ToolBar>
    <ToolBar Header="Delta" Band="1" BandIndex="0">
        <Button>7</Button>
        <Button>8</Button>
    </ToolBar>
</ToolBarTray>
</Canvas>

Note:

  • A Band is nothing more then a row; the BandIndex is the ToolBar's position inside the row/band
  • Examples 3 and 4 use the same code, but I manually rearranged the ToolBars with the mouse at runtime
  • When there is not enough room to display all the tools, they are placed into the overflow region which can be accessed by clicking the ToolBars arrow

Scrolls

  • ProgressBar - Visual representation of a numeric value; often displays a ratio or percentage
  • Slider - Allows the user to visually input a numeric value by moving the bar back and forth
  • ScrollBar - Like a Slider, but often used on the left and bottom of other controls to mimic the Windows standard
  • ScrollViewer - Automatically adds scrolling capability and scrollbars to its contents

Example 1
Example 2

Example 1

XML
<Canvas>
<ProgressBar Width="170" Height="20" 
    Value="70" Maximum="100"
    Canvas.Left="0" Canvas.Top="0" />

<Slider Width="170" Value="70" Maximum="100"
    Canvas.Left="0" Canvas.Top="30" />

<ScrollBar Width="170" Value="70" Maximum="100"
    Orientation="Horizontal"
    Canvas.Left="0" Canvas.Top="70" />

<ScrollViewer Width="170" Height="70"
    Canvas.Left="0" Canvas.Top="100">
    <TextBlock>
    While all these controls look<LineBreak />
    similar, they are used for very<LineBreak />
    different purposes. I hope this<LineBreak />
    visual guide serves as a  good starting<LineBreak />
    point for you in your WPF learning!
    </TextBlock>
</ScrollViewer>
</Canvas>

Example 2

XML
<Canvas>
<ProgressBar Background="Red" Foreground="White"
    Width="170" Height="20" Value="70" Maximum="100"
    Canvas.Left="0" Canvas.Top="0" />

<Slider TickPlacement="BottomRight" TickFrequency="10"
    Width="170" Value="70" Maximum="100"
    Canvas.Left="0" Canvas.Top="30" />

<ScrollBar Width="1.5in" Scroll="ScrollBar_Scroll"
    Value="70" Maximum="100" Orientation="Horizontal"
    Canvas.Left="0" Canvas.Top="70" />

<ScrollViewer HorizontalScrollBarVisibility="Visible"
    Background="Red" Foreground="White"
    Width="170" Height="70" 
    Canvas.Left="0" Canvas.Top="100">
    <TextBlock>
    While all these controls look<LineBreak />
    similar, they are used for very<LineBreak />
    different purposes. I hope this<LineBreak />
    visual guide serves as a  good starting<LineBreak />
    point for you in your WPF learning!
    </TextBlock>
</ScrollViewer>
</Canvas>

Note:

  • In Example 1, the contents of the ScrollViewer are cut off because full scrolling is not enabled

Miscellaneous

  • Border - Allows you to put a border around virtually any control including the outermost panel
  • ContextMenu - A menu that is displayed when a user right clicks on a control; can be applied to almost any control
  • ToolTip - Displays a message when a user hovers over a control; can be applied to almost any control
  • Menu & MenuItem - Allows you to build "file" menus that are standard to most Windows applications

Example 1
Example 2
Example 3

Example 1

XML
<Border BorderThickness="5" BorderBrush="Green" Background="Yellow">
    <Canvas>
        <Border BorderThickness="5" BorderBrush="Red"
            Canvas.Left="10" Canvas.Top="22" >
            <Image Width="150" Source="C:\temp\playultimate.png" />
        </Border>
    </Canvas>
</Border>

Example 2

XML
<Canvas>
<Button Canvas.Left="10" Canvas.Top="10">
    Right Click Me
    <Button.ContextMenu>
        <ContextMenu>
        <MenuItem Header="Option 1" />
            <Button>Button 1</Button>
            <Slider/>
        </ContextMenu>
    </Button.ContextMenu>
</Button>

<TextBox Canvas.Left="10" Canvas.Top="80">
    Some Text
    <TextBox.ToolTip>
    <ToolTip Width="175" Height="75" Background="LightBlue">
    <StackPanel>
       <Button>test</Button>
       <TextBlock TextWrapping="Wrap">
        <Run Foreground="Green" FontWeight="Bold">WPF</Run> tooltips can contain 
        <Run Foreground="Red" FontSize="14">more</Run> 
        than just <Italic>plain text</Italic>!
       </TextBlock>
    </StackPanel>
    </ToolTip>
    </TextBox.ToolTip>
</TextBox>
</Canvas>

Example 3

XML
<Canvas>
<ToolBar>
    <Menu>
    <MenuItem Header="_File">
        <MenuItem Header="_Open" />
            <MenuItem Header="_Close" >
            <MenuItem Header="_Now"/>
            <MenuItem Header="_Later"/>
        </MenuItem>
    </MenuItem>
    <MenuItem Header="_Edit">
        <MenuItem Command="ApplicationCommands.Copy" />
        <MenuItem Command="ApplicationCommands.Paste" />
    </MenuItem>
    </Menu>
</ToolBar>

<Button HorizontalContentAlignment="Right" Width="120"
    Canvas.Left="0" Canvas.Top="100">
    <StackPanel Orientation="Horizontal">
        <Label>Button Text</Label>
        <Menu>
        <MenuItem Header="Options" Background="Red">
            <MenuItem Header="One"/>
            <MenuItem Header="Two"/>
        </MenuItem>
        </Menu>
    </StackPanel>
</Button>
</Canvas>

Note:

  • The Border tag is defined outside of the Canvas tag
  • ContextMenus and ToolTips can now contain more than just plain text

Panels & Lists

Please refer to my Layouts and Lists/Views articles.

History

  • 11/21/2008: Initial version.
  • 3/3/2009: Added related article index.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect
United States United States
Expert in C#, .NET, WinUI/WPF, Azure, and SQL Server.
I started working with .NET and C# professionally in 2003 and never looked back. I have been an integral part of a dozen complete software lifecycles, been a driving force behind two successful startups, and have led development teams.

Comments and Discussions

 
GeneralSo useful! Pin
causg6-May-13 8:41
causg6-May-13 8:41 
Thanks Josh!
GeneralMy vote of 5 Pin
David Schumaker1-Feb-13 3:49
David Schumaker1-Feb-13 3:49 
GeneralMy vote of 5 Pin
BuBa194722-Jan-13 1:34
BuBa194722-Jan-13 1:34 
Questionwhat about these controls Pin
Member 3940519-Sep-10 19:49
Member 3940519-Sep-10 19:49 
AnswerRe: what about these controls Pin
Josh Fischer27-Sep-10 4:08
Josh Fischer27-Sep-10 4:08 
Generalbeautiful - wat about animation Pin
Member 3940519-Sep-10 19:29
Member 3940519-Sep-10 19:29 
GeneralRe: beautiful - wat about animation Pin
Josh Fischer27-Sep-10 4:05
Josh Fischer27-Sep-10 4:05 
GeneralMy vote of 5 Pin
Member 3940519-Sep-10 19:22
Member 3940519-Sep-10 19:22 
GeneralRe: My vote of 5 Pin
Josh Fischer27-Sep-10 4:00
Josh Fischer27-Sep-10 4:00 
GeneralVery Nice! Pin
Anil Pandey2-Sep-10 19:27
Anil Pandey2-Sep-10 19:27 
GeneralRe: Very Nice! Pin
Josh Fischer3-Sep-10 2:44
Josh Fischer3-Sep-10 2:44 
GeneralExcellent! Pin
Najeeb Shaikh1-Jun-10 1:54
Najeeb Shaikh1-Jun-10 1:54 
GeneralRe: Excellent! Pin
Josh Fischer26-Jul-10 3:28
Josh Fischer26-Jul-10 3:28 
Generalnice article... Pin
pratikmehta22-Nov-09 18:49
pratikmehta22-Nov-09 18:49 
GeneralRe: nice article... Pin
Josh Fischer26-Jul-10 3:24
Josh Fischer26-Jul-10 3:24 
GeneralFantastic article for beginners! Pin
rawwool (Rahul Kumar)27-May-09 1:21
rawwool (Rahul Kumar)27-May-09 1:21 
GeneralRe: Fantastic article for beginners! Pin
Josh Fischer26-Jul-10 3:23
Josh Fischer26-Jul-10 3:23 
GeneralA bug fix and a question! Pin
sameh_serag21-Jan-09 6:49
sameh_serag21-Jan-09 6:49 
AnswerRe: A bug fix and a question! Pin
Josh Fischer21-Jan-09 9:29
Josh Fischer21-Jan-09 9:29 
GeneralJust the thing I needed Pin
trulsuh29-Dec-08 20:13
trulsuh29-Dec-08 20:13 
GeneralThank You...Very helpful Pin
Rajiv Gowda11-Dec-08 6:04
Rajiv Gowda11-Dec-08 6:04 
GeneralMy vote of 1 Pin
Shakeel Hussain27-Nov-08 0:31
Shakeel Hussain27-Nov-08 0:31 
GeneralRe: My vote of 1 Pin
Josh Fischer27-Nov-08 15:48
Josh Fischer27-Nov-08 15:48 
GeneralRe: My vote of 1 Pin
David Roh19-Dec-08 4:18
David Roh19-Dec-08 4:18 
GeneralRe: My vote of 1 Pin
trulsuh29-Dec-08 20:16
trulsuh29-Dec-08 20:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.