1. Home
  2. Computing & Technology
  3. Visual Basic

WPF Tutorial Part 1: A First Introduction to WPF and XAML for Visual Basic
Working with XAML Code

By , About.com Guide

Dec 19 2009

One thing that is still available, however, is the ToolBox. So drag a Button to the Window. Remember that this is not the Windows Forms Button, even though the name is the same. This Button is in the System.Windows.Controls namespace. Everything in that namespace is a WPF control.

Although Windows Forms gives you access to the Button properties, WPF and XAML give you an XML based description of everything about the Button.

<Button Margin="67,52,134,0"
      Name="Button1"
      Height="23"
      VerticalAlignment="Top">
   Button
</Button>

--------
Click Here to display the illustration
Click the Back button on your browser to return
--------

If you have delayed until now to become familiar with XML, this should be a wakeup call to get started.

The component properties are now expressed as XML attributes in the XAML code. And the Properties window has been redone too, complete with a progressive search box so you don't have to scroll back and forth to find the property you're looking for. There are so many new ones that this is a blessing!

--------
Click Here to display the illustration
Click the Back button on your browser to return
--------

Now drop a Label onto the Window. Try collapsing the XAML code window and zoom the Design pane to about 150%. Try moving and resizing the Label. Note that you can get precision far beyond Windows Forms with WPF.

--------
Click Here to display the illustration
Click the Back button on your browser to return
--------

The VB.NET part of the coding is done in separate file, in this case Window1.xaml.vb. Since nothing about the Window or the components in it is in the VB.NET code, the designer can handle part of the job and the programmer can do the rest.

There may be jobs that the programmer has to do. To get started with some WPF programming examples, we're going to investigate a number of different ways to animate the opacticy of a Label component.

The traditional way to make the opacity of a Label vary smoothly is to use a Timer component. So your first idea might be to simply include one, but you will discover that there is no Timer (so far) in WPF, but there is one in the System.Windows.Forms namespace and another one in the System.Timers namespace. We'll take a look at both to learn some new things about WPF.

The goal here is to help programmers new to WPF make the mental leap to a new way of thinking about things so I'll use traditional methods now and make the switch to more WPF ways of doing things later. That way, you'll be able to see the difference. Since the WPF way involves completely new concepts, it won't be covered until a little later.

Visual components of the System.Windows.Forms namespace is fundamentally incompatible with WPF, but a Timer has no visual interface so we can still get away with using it in our application. Since nearly everything else will have problems, it's not one of the namespaces that is automatically available to a WPF application - that is, it's not "referenced".

If you're confused about how to "reference a namespace" then here's a quick explanation. After starting a new WPF application, right-click the project in Solution Explorer and select Properties. Select the References tab. Notice that System.Windows.Forms is not in the References box. There are literally thousands of references that are possible (not all are included with Visual Studio - third parties make them too). If everything possible was referenced, your project would be as bloated as the US federal budget. So only the ones that Microsoft has decided are very likely to be needed by your project are referenced by default.

To add a new reference, click the Add ... button and scroll to System.Windows.Forms and select it. Click OK. You should be able to access the Timer object and then the code that follows did the job just fine.

Here's the code. Notice that I didn't just "drag and drop" the Timer component onto my Form as I would in a Windows Forms application; I created it in code.

Class Window1
   Friend WithEvents myTimer As New System.Windows.Forms.Timer
   Private Sub Button1_Click( _
      ByVal sender As System.Object, _
      ByVal e As System.Windows.RoutedEventArgs) _
      Handles Button1.Click
      myTimer.Interval = 100
      myTimer.Start()
      Label1.Content = "Hello From" & vbCrLf & "About Visual Basic"
      Label1.FontSize = 24
      Label1.Opacity = 0.5
   End Sub
   Private Sub myTimer_Tick( _
      ByVal sender As System.Object, _
      ByVal e As System.EventArgs) _
      Handles myTimer.Tick
      Label1.Opacity += 0.01
      If Label1.Opacity > 1 Then Label1.Opacity = 0
   End Sub
End Class

There's still a problem, however. If you check the Microsoft documentation for System.Windows.Forms.Timer, you'll see this: "This timer is optimized for use in Windows Forms applications and must be used in a window." So, even though this works, I've found that it's a good idea to take Microsoft's advice on things like this. In a later section of this series, we'll return to this problem and demonstrate how to use it.

Part 2 of this series, XAML, WPF, and Namespaces, introduces one of the most fundamental concepts that you need to understand: Namespaces. The term 'namespace' always means about the same thing, but the way it's used changes quite a bit. Part 2 tells you how it's used in XAML and WPF.

Explore Visual Basic
By Category
About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

  1. Home
  2. Computing & Technology
  3. Visual Basic
  4. Using VB.NET
  5. WPF Tutorial Part 1: A First Introduction to WPF and XAML for Visual Basic Programmers

©2009 About.com, a part of The New York Times Company.

All rights reserved.