Microsoft feels that user experience is important, and invested in multiple technologies to promote better user experience.  Both WPF and Silverlight use XAML (Extensible Application Markup Language) under the covers. 
Let's look at some of the different characteristics of each technology:

WPF:

• Ships as part of the .NET Framework (version 3.0 and onward)
• Runs as Windows application or as web "browser application" (called XBAP, for "XAML Browser Application").  Note that XBAPs run only in Internet Explorer with .NET 3.0 and in both Internet Explorer and Firefox with .NET 3.5.  
• Runs on Windows machines only (Windows XP, Windows Server 2003, Windows Vista, and Windows Server 2008)
• Richest functionality, including 3D graphics

Silverlight:

• Ships independently
• Runs in web browsers only (Internet Explorer, Firefox, Safari)
• Runs on Windows or Mac operating systems (also on Linux via Moonlight, which is an open source implementation of Silverlight based on Mono)
• Functionality is a subset of WPF's feature set

When should you use each?  The maddening answer is (of course): it depends! 
WPF is a more mature technology and was designed with a richer feature set.  It also has the advantage of being able to run in a browser or as an installed Windows-Form-type app. 
Silverlight has a broader reach.  You can access Silverlight from many operating systems and web browsers. 
The most important reason to choose one over the other should be based on the intended audience for the application.  For example, if a corporation is designing an application for internal use only and every employee has Windows XP as the company standard OS, then go with WPF to leverage the richer feature set.  If a corporation is designing an external-facing website, then Silverlight is the better choice because potential customers can access the website from a variety of different operating systems and browsers