Introduction, Working and Implementation of WPF Controls

Introduction

Part1 : Introduction to WPF

How to Build a WPF Application in Visual Studio?

• Select "File" | "New" | "Project..." to display the "New Project Dialog"; see:
  
  
  
  
• Select "WPF Application"
• Provide a good name for the application and click OK
• As you press OK, the following screen will be shown:
  
  
  
  
• The Rectangle with the red color is the "ToolBox".
  • The Toolbox contains the controls that you can place on the window.
• The Square Box colored with blue is the "Window Designer", i.e the Designer page where all the controls are placed.
  • The Window Designer lets you build a Windows Forms form graphically. It allows you to add controls to the window, resize and rearrange them.
• The Rectangle with the yellow color is the "XAML Editor", where the XAML code is written as per application logic.
  • The XAML Editor lets you manually edit the window's XAML code.
• The Box colored with orange is the "Solution Explorer".
  • The Solution Explorer lists the application's files and folders.

Introduction to Controls

Button

• This Button represents a WPF button and is enclosed in <Button></Button> tags.
• There are several and common properties of this control which developers have been using for ages. But we will look at two of them:
  • x:Name: It indicates the id of the control.
  • Content: Text of the Button. E.g. <Button Content="Button2"/>

Image : Displays a graphical image. There are two important and useful properties of the image controls as follows:

• Stretch and it takes following parameters as values:
  
  • None: Picture is not stretched at all and gets the display at its original size.
  • Fill: It stretches the image to fill the control and leads to picture distortion.
  • Uniform: Picture is stretched at an equal amount vertically and horizontally to make it fit in the Image control.
  • UniformtoFill: The picture is stretched by the same amount vertically and horizontally until it completely fills the Image control. If the picture doesn't have the same width-to-height ratio as the Image control, then some portion of the image will stick out past the edges of the control and will be clipped.
• StretchDirection: It determines whether the picture can be enlarged or shrunk to satisfy the stretch property. It takes two parameters as values:
  
  • UpOnly: Image can only be stretched to make it larger.
  • DownOnly: Image can only be shrunk to make it smaller.
  • Both: Image can be stretched or shrunk.

Simple Code Snippet:

<Image Width="Auto" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="World.jpg" Stretch="UniformToFill"/>

Grid : A powerful control in WPF, lets you arrange children controls in rows and columns. Key properties of Grid are as follows:

• BackGround: Color used to fill the controls back portion.
• ColumnDefinitions: Used to define Column widths.
  
  • Grid.Column: The Column that contains the child
  • Grid.ColumnSpan: The number of columns that the child occupies.
• RowDefinitions: Used to define Row heights.
  
  • Grid.Row: The Row that contains the child.
  • Grid.RowSpan: The number of rows that the child occupies.

Note: A child controls uses these properties to get placed in the grid at appropriate positions.

StackPanel : Another good control of Category is "Content Control" . It arranges the child controls either vertically or horizontally in a single column or row. A few key properties are as follows:

• BackGround: Color used to fill the control's backgrpound.
• Orientation: Determines whether child controls should be placed by row (Orientation = Horizontal) or by column (Orientation = Vertical).

TextBlock : Displays read-only text and provides additional features like line wrapping, bold text etc. Can change text appearance inline by making it bold, italic or underlined. Can add Line Breaks etc. The key properties are as follows:

• LineHeight: Determines the spacing between the lines.
• TextTrimming: Checks how the TextBlock handles words that don't fit.
  
  • None: Words are truncated.
  • WordEllipsis: Text is broken at the last word and replaced with periods(.)
  • CharacterEllipsis: Text is broken at last of character and replaced with periods(.)
• TextWrapping: Checks whether text is wrapped at the end of the textbox. It could be NoWrap, Wrap or WrapWithOverflow.

Summary

In this article, we discussed various and very basic controls and a few key properties. It will help the beginners to understand the control's importance and how properties can be used. In an upcoming article will be an implementation of Controls and more usage of properties.

Thanks for reading. Please provide your valuable inputs and suggestions.