My name is Edward Tanguay. I'm an American software and web developer living and working in Berlin, Germany.

Categories

My Older Tutorials

My Old Web Dev Site

Howtos

JQUERY HOWTO created on Sunday, November 14, 2010 permalink
How to setup JQuery intellisense in Microsoft Visual Web Developer 2010 Express
If you are working on Windows, Visual Web Developer 2010 Express has very nice intellisense for Jquery, here's how.
  1. First download the free Visual Web Developer 2010 Express.
  2. Then download jquery-1.4.1-vsdoc.js.
  3. Then put in the following line in your code and you'll have jquery intellisense.
 
LINQ HOWTO created on Thursday, November 05, 2009 permalink
How to set up LINQPad to learn LINQ fast
LINQPad is one of those programs that produces an interactive learning experience beyond what any book or instructional video could do. This how-to shows how to set up everything you need to learn LINQ with LINQPad interactively just by trying out and playing with examples. The program is free and you can pay $19 for intellisense which enhances the learning experience considerably.
Download LINQPad 4.0
  1. Download LINQPad for .NET 4.0 here.
  2. When it is downloaded, double-click the .exe file, program will start.
Install the Northwind Database In LINQPad
  1. Go to Northwind database download page, execute the .msi file, next, next, next.
  2. In linqpad, "add connection", "attach database file", browse, C:SQL Server 2000 Sample Databases, NORTHWND.MDF, OK.
  3. Click on the Northwind link.
  4. click on C#Statements:
  5. type in these LINQ statements and press F5:
Use the Samples Provided:
  1. click on samples:
  2. clck on any of the samples and press F5:
Download More Samples:
  1. click on Download more samples:
  2. click the link:
  3. click on any of the book examples and press F5:
Add Your Own DLL:
  1. Open Visual C# Express 2010 which you can download here for free.
  2. new project, Class Library, "MyClasses":
  3. rename Class1.cs to VideoTutorials.cs:
  4. Replace with this code.
  5. File, Save All.
  6. Press F6 to build the .dll.
  7. In LINQPad, press CTRL-N to create a new query.
  8. Right-click query area and choose Advanced Query Properties.
  9. Click Add.
  10. click Browse:
  11. navigate to the dll file you just created and select it:
  12. Click OK.
  13. click on "Additional Namespace Imports":
  14. type in this query and press F5:
Purchase Intellisense
  1. intellisense enables you to "discover learn" much easier:
  2. it even gives you intellisense on your custom objects:
  3. You can purchase intellisense here for $19, I paid with Visa, was very easy and I could immediately type in my key and use intellisense.
Ask LINQ Questions On StackOverflow:
  1. Then experiment with all the samples and ask your questions on stackoverflow which for LINQ will usually get you numerous answers within 60 seconds.
 
UBUNTU HOWTO created on Wednesday, July 15, 2009 permalink
How to install Ubuntu 9.04 on your laptop
I needed to reinstall Vista on my laptop so decided to take the opportunity to install the current Ubuntu to see how it's doing in terms of ease of use. It was a simple install, the upper-left menu is simple: found office, gimp, youtube movie player immediately, was online immediately, sound worked, plugged in printer it was immediately recognized and installed, set up e-mail client with google e-mail in 5 minutes, and everytime it needed something from the internet (e.g. to install the youtube movie player), it just asked my password and then downloaded and installed what it needed and put it in the menu. And network sharing with Vista worked perfectly. After experimenting with Ubuntu, I was going to install Vista over it but will now leave 20 GB and install Ubuntu parallel so I can get some more experience with it, this is a very usable operating system.
Download Ubuntu
  1. Goto http://www.ubuntu.com/getubuntu/download.
  2. Select a location and click "begin download" to download the .iso file, took about 25 minutes.
Burn Ubuntu Installation CD
  1. Goto http://infrarecorder.org/?page_id=5.
  2. Click the download link.
  3. Save the .exe file and execute it after it downloads.
  4. next, I agree, next, install, took about 10 minutes:
Install Ubuntu
  1. Put the CD back in and restarted Vista.
  2. Chose language.
  3. Chose install.
  4. ubuntu logo came up for about 8 minutes:
  5. chose language again:
  6. Chose timezone, language.
  7. chose to install on entire disk:
  8. Typed in my name and desired login.
  9. clicked install, it installed for about 20 minutes:
Use Ubuntu
  1. logged in:
  2. Startup sound, speakers work.
Internet Works
  1. Clicked the firefox icon and was automatically online.
  2. Fonts look very nice.
Open Office Works, Printing Works
  1. Started open office, writer loaded in about 5 seconds, nice.
  2. Did ALT-Print, took screenshot, copied into document.
  3. plugged in USB cable from HP Photosmart D5460 printer, Ubuntu instantly said "printer recognized and installed", I printed:
E-mail Works
  1. Clicked applications, office, evolution mail.
  2. Set up mail for my gmail account with these instructions.
  3. Was able to send and read mail.
Networking with Vista Works
  1. Right-clicked the Documents folder on Ubuntu and shared it on the network, logged out and in and immediately saw my laptop on windows vista and was able to share files.
Other Applications
  1. Movie player is a nice way to search and watch youtube videos with a simple, plain interface.
  2. Was able to login in with my MSN messenger account into pidgin, nice.
  3. Very easy to add new programs, click on add/remove, search, add, it downloads from internet, and is in the category.
  4. In the 30 minutes that I played around with it, I installed 3 different application, drivers and it effortlessly went into the internet, downloaded what it needed, asked for my password before doing it.
  5. Gimp is installed.
Turning Off and On
  1. Putting into hibernate mode took about 10 seconds, coming back out took about 20 seconds.
  2. Bootup time from cold start is about 20 seconds.
  3. Was able to just close the laptop while Ubuntu was running, it was ok with that, e.g. if you need to carry it around but don't want to put into hibernate, opening it up the screen came back immediately.
 
VS2008 HOWTO created on Friday, May 15, 2009 permalink
How to create a code snippet for Visual Studio 2008
Knowing how to make quick code snippets enables you to quickly put repetitive code into keywords so that you can just type e.g. statprop press TAB twice and a code block pops in which allows you to fill in variables. Learning this skill can increase your coding efficiently quite a bit, and it's easy to do you just have to run through the steps a couple times and you have it.
  1. download my snippets, save them in a directory (e.g. under Documents) called customSnippets.
  2. In Visual Studio, press CTRL-K, B.
  3. Click the Add... button and add the directory called customSnippets.
  4. If you want to create new snippets, copy one of the .snippet files which look like this and change the information.
  5. now in your code, type e.g. foree then TAB TAB and the code block will pop in:
  6. Fill in each variable pressing TAB after each one.
  7. Notice how the variable $variableName$ is use three times and when you type it in once, it is automatically entered in all three positions.
  8. Any changes you make to the files take immediately effect in Visual Studio.
  9. to make a new snippet, copy one of the .snippet files and change it accordingly, they look like this:
    <?xml version="1.0" encoding="utf-8" ?>
    <CodeSnippets    xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
        <CodeSnippet Format="1.0.0">
            <Header>
                <Title>Better For Each</Title>
                <Shortcut>foree</Shortcut>
                <Description>This is a more advanced foreach statement.</Description>
                <Author>Jim Smith</Author>
                <SnippetTypes>
                    <SnippetType>Expansion</SnippetType>
                </SnippetTypes>
            </Header>
            <Snippet>
                <Declarations>
                    <Literal>
                        <ID>type</ID>
                        <ToolTip>Property Type</ToolTip>
                        <Default>int</Default>
                    </Literal>
                    <Literal>
                        <ID>variableName</ID>
                        <ToolTip>Variable Name</ToolTip>
                        <Default>VariableName</Default>
                    </Literal>

                </Declarations>
                <Code Language="csharp">
                    <![CDATA[foreach ($type$ $variableName$ in $variableName$s)
                {
                    //loop through the $variableName$s

                }]]>
                </Code>
            </Snippet>
        </CodeSnippet>
    </CodeSnippets>
  10. TIP: Don't use the Import... button.
 
JQUERY HOWTO created on Sunday, May 03, 2009 permalink
How to create tabs with jQuery UI
Tabs are a space saver that are welcome on almost any site. This how-to shows you step-by-step how to quickly integrate them into your site using the jQuery UI. The full download for the tabs with stylesheet is 122K so you have to be sure to test the loading on slow connections, but if this isn't a problem, jQuery makes tabs and other controls very easy to add useful UI controls to your site.
  1. Go to http://jqueryui.com/download.
  2. Deselect all components.
  3. Check UI Core and Tabs.
  4. Keep the theme on "smoothness".
  5. Click the download button.
  6. When it asks for directory, save it to c:\temp and then unzip it there to a folder with the same name, i.e. c:\temp\jquery-ui-1.7.1.custom.
  7. create a file called c:\webs\tabsdemo\index.htm with the following code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <title>Text jQuery UI Page</title>
        <style type="text/css">
        .test {
            width:200px
        }
        </style>
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
        <link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
        
        <script type="text/javascript">
        $(function() {
            $("#tabs").tabs();
        });
        </script>

    </head>

    <body>

        <div id="tabs" style="width: 300px; font-size: 10pt">
            <ul>
                <li><a href="#tabs-1">Member Info</a></li>
                <li><a href="#tabs-2">Event Info</a></li>
                <li><a href="#tabs-3">Help</a></li>
            </ul>
            <div id="tabs-1">
                <p>As a member you can log in, etc. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan.</p>
            </div>
            <div id="tabs-2">
                <p>Here is the information about the event, etc. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan.</p>
            </div>
            <div id="tabs-3">
                <p>This is general help that will help you out. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan.</p>
            </div>
        </div>
    </body>
    </html>
  8. Copy the directory C:\temp\jquery-ui-1.7.1.custom\css to c:\webs\tabsdemo\css.
  9. Copy the directory C:\temp\jquery-ui-1.7.1.custom\js to c:\webs\tabsdemo\js.
  10. Double-click on c:\webs\tabsdemo\index.htm and you will see your tabs.
  11. Now open C:\temp\jquery-ui-1.7.1.custom\development-bundle\demos\index.html with your browser and tweak the tabs example and try out other jQuery controls.
 
WPF HOWTO created on Friday, May 01, 2009 permalink
How to use App.Config in WPF applications
When you create a WPF application it doesn't have a config file like ASP.NET websites do, but with a couple of steps you can add one and access it,    here's how.
  1. Rightclick project, add item, choose Application Configuration File and be sure to call it App.config (not App1.config as it suggests).
  2. Add refernce.
  3. open up the App.config file and replace it with this code (case-sensitive):
    <?xml version="1.0" encoding="utf-8" ?>
    <configuration>
        <appSettings>
        <add key="xmlDataDirectory" value="c:\testdata"/>
        </appSettings>
    </configuration>
  4. add the using statement:
    using System.Configuration;
  5. then in your code, access the variable like this:
    string xmlDataDirectory = ConfigurationManager.AppSettings.Get("xmlDataDirectory");
 
VS2008 HOWTO created on Tuesday, April 28, 2009 permalink
How to automatically create a switch statement from an enum
Found this one through serendipity today. You create an enum, then use the code snippet for "switch" which automatically fills out the case statements with all values of your enum, in my case, exactly what I wanted.
  1. Create an enum, e.g.
        public enum CustomerKind {
            Partner,
            Retailer,
            Individual
        }
  2. Then type switc, [TAB], then type in the name of your enum.
  3. Press the down arrow.
 
WPF HOWTO created on Friday, April 17, 2009 permalink
How to edit files in InetPub on Vista
On Vista, the UAC locks down Inetpub directory and below pretty tightly so working on it means you basically have to copy files and confirm you are an administrator. Even if you open Windows Explorer as admistrator, you still can't edit files (since all Windows Explorers run under a single process by default). Here is how to fix it.
  1. In explorer press ALT to get the menu.
  2. Tools.
  3. Folder options.
  4. Check launch folder windows in a separate process.
  5. Click OK.
  6. Now when you open Windows Explorer in administrator mode (right click, open as administrator), you will be able to add and edit files (at least in Notepad, my Editpad Lite still opens files in readonly mode).
 
WPF HOWTO created on Thursday, March 19, 2009 permalink
How to view the code for the UnityContainer class in Composite Application Guidelines
I had downloaded Composite Application Guidance library but was only getting meta data when looking for the code for the UnityContainer class. Here is how to get the source code for it.
  1. Go to the Unity Application Block 1.2 - October 2008 download page.
  2. Click on download and download the msi file.
  3. Click next, next, next, etc.
  4. In windows explorer, go to C:\Program Files\Microsoft Unity Application Block 1.2\.
  5. Unzip the UnitySource.zip file.
  6. In the unpacked files you will find it at: ...\UnitySource\Src\Unity\UnityContainer.cs.
 
PRISM HOWTO created on Thursday, March 05, 2009 permalink
How to build a Silverlight application with Prism v2
This shows you how to build a Silverlight application with the Composite Application Guidance for WPF and Silverlight - February 2009. It is a streamlined step-by-step that does the same as the Silverlight Hands-On Lab: Getting Started with the Composite Application Library in the PrismV2 documentation. Use it if you need to build the bases of a Silverlight Prism application quick. You can also download the code to get the finished solution. I used Microsoft Visual Web Developer 2008 Express Edition to create this.
Compile the .DLLs That You Will Need Later
  1. Go to the Prism V2 site and download CompositeApplicationGuidance-Feb2009.exe, execute it, and specify to unpack it in c:\prismv2.
  2. Double-click the file c:\prismv2\Desktop & Silverlight - Open Composite Application Library.bat.
  3. Right-click on the folder Desktop and choose Build.
  4. In window explorer, go to C:\prismv2\CAL\Silverlight\Composite.UnityExtensions\bin\Debug and you should see all the .dll files that you will need later.
Create Basic WPF Application
  1. Create a new Silverlight application, called it HelloWorld.Silverlight.
  2. Make sure Add a new ASP.NET Web project to the solution to host Silverlight is checked.
  3. In windows explorer, got to solution folder, and created a new folder called Library.Silverlight.
  4. Go to C:\prismv2\CAL\Silverlight\Composite.UnityExtensions\bin\Debug again and copy all the .dll and .xml files to your Library.Desktop folder (the .xml files are so that you have intellisense on these libraries).
  5. In your project, add each of these .dll references by using the Browse tab.
  6. Rename Page.xaml to Shell.xaml.
  7. In Page.xaml.cs, click on Page and refactor/rename it.
Add Region To XAML
  1. Add this namespace: xmlns:Regions="clr-namespace:Microsoft.Practices.Composite.Presentation.Regions;assembly=Microsoft.Practices.Composite.Presentation".
  2. replace the Grid control with this:
    <ItemsControl Name="MainRegion" Regions:RegionManager.RegionName="MainRegion"/>
Add Bootstrapper, Etc.
  1. Add a class called Bootstrapper.cs to the HelloWorld.Silverlight project.
  2. replace the contents with:
    using System.Windows;
    using Microsoft.Practices.Composite.Modularity;
    using Microsoft.Practices.Composite.UnityExtensions;

    namespace HelloWorld.Silverlight
    {
        public class Bootstrapper : UnityBootstrapper
        {
            protected override DependencyObject CreateShell()
            {
                Shell shell = Container.Resolve<Shell>();
                Application.Current.RootVisual = shell;
                return shell;
            }

            protected override IModuleCatalog GetModuleCatalog()
            {
                ModuleCatalog catalog = new ModuleCatalog();
                return catalog;
            }

        }
    }
  3. open up App.xaml.cs and replace the Application_Startup method with this:
    private void Application_Startup(object sender, StartupEventArgs e)
    {
        Bootstrapper bootstrapper= new Bootstrapper();
        bootstrapper.Run();
    }
  4. Press F5 and you should get a blank web page but no errors.
Add a Module
  1. Right-click your solution and add a Silverlight Class Library named HelloWorldModule.
  2. add the following references (use the Browse tab):
    Microsoft.Practices.Composite.dll
    Microsoft.Practices.Composite.Presentation.dll
  3. Rename the Class1.cs file to HelloWorldModule.cs, respond yes that you want to rename all instances in the class itself as well.
  4. replace the content of this class with:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using Microsoft.Practices.Composite.Modularity;

    namespace HelloWorldModule
    {
        public class HelloWorldModule : IModule
        {
            public void Initialize()
            {

            }
        }
    }
  5. Add a Views folder to the HelloWorldModule project.
  6. In the HelloWorld.Silverlight project, add a reference to the HelloWorldModule (use the Projects tab).
  7. in the BootStrapper.cs file, replace the contents of the GetModuleCatalog() method with this:
                ModuleCatalog catalog = new ModuleCatalog()
                    .AddModule(typeof(HelloWorldModule.HelloWorldModule));
                return catalog;
  8. Compile your application again with F5 to make sure you typed everything in correctly.
Add a View
  1. Right-click on the Views folder, add new item, and add a Silverlight user control named HelloWorldView.
  2. add this inside the Grid tags in the HelloWorldView.xaml file:
            <TextBlock Text="Hello World"
                         Foreground="Green"
                         Margin="10"
                         FontSize="14"/>
Create a Region Manager
  1. open HelloWorldModule.cs and replace the content with this:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using Microsoft.Practices.Composite.Modularity;
    using Microsoft.Practices.Composite.Regions;

    namespace HelloWorldModule
    {
        public class HelloWorldModule : IModule
        {
            private readonly IRegionManager regionManager;

            //this is "constructor dependency injection", i.e. the regionManager is being injected into the module
            //because the module depends on it (since the regionManager will place it accordinly in the UI regions)
            public HelloWorldModule(IRegionManager regionManager)
            {
                this.regionManager = regionManager;
            }

            public void Initialize()
            {
                regionManager.RegisterViewWithRegion("MainRegion", typeof(Views.HelloWorldView));
            }

        }
    }
  2. Press F5 again and you will see your view display its content.
 
PRISM HOWTO created on Thursday, March 05, 2009 permalink
How to build a WPF application with Prism v2
This shows you how to build a WPF application with the Composite Application Guidance for WPF and Silverlight - February 2009. It is a streamlined step-by-step that does the same as the WPF Hands-On Lab: Getting Started with the Composite Application Library in the PrismV2 documentation. Use it if you need to build the bases of a Prism application quick. You can also download the code to get the finished solution. I used Microsoft Visual C# Express Edition to create this.
Compile the .DLLs That You Will Need Later
  1. Go to the Prism V2 site and download CompositeApplicationGuidance-Feb2009.exe, execute it, and specify to unpack it in c:\prismv2.
  2. Double-click the file c:\prismv2\Desktop & Silverlight - Open Composite Application Library.bat.
  3. Right-click on the folder Desktop and choose Build.
  4. In window explorer, go to C:\prismv2\CAL\Desktop\Composite.UnityExtensions\bin\Debug and you should see all the .dll files that you will need later.
Create Basic WPF Application
  1. Create a new application, called it HelloWorld.Desktop.
  2. In windows explorer, got to solution folder, and created a new folder called Library.Desktop.
  3. Go to C:\prismv2\CAL\Desktop\Composite.UnityExtensions\bin\Debug again and copy all the .dll and .xml files to your Library.Desktop folder (the .xml files are so that you have intellisense on these libraries).
  4. In your project, add each of these .dll references by using the Browse tab.
  5. Rename Window1.xaml to Shell.xaml.
  6. In Window1.xaml.cs, click on Window1 and refactor/rename it.
  7. In Window1.xaml change the title to Hello World.
Add Region To XAML
  1. Add this namespace: xmlns:cal="http://www.codeplex.com/CompositeWPF".
  2. replace the Grid control with this:
    <ItemsControl Name="MainRegion" cal:RegionManager.RegionName="MainRegion"/>
Add Bootstrapper, Etc.
  1. Add a class called Bootstrapper.cs to your project.
  2. replace the contents with:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using Microsoft.Practices.Composite.Modularity;
    using Microsoft.Practices.Composite.UnityExtensions;
    using System.Windows;

    namespace HelloWorld.Desktop
    {
        class Bootstrapper : UnityBootstrapper
        {
            protected override DependencyObject CreateShell()
            {
                Shell shell = new Shell();
                shell.Show();
                return shell;
            }

            protected override IModuleCatalog GetModuleCatalog()
            {
                ModuleCatalog catalog = new ModuleCatalog();
                return catalog;
            }
        }
    }
  3. replace the contents of App.xaml.cs with this:
    using System;
    using System.Collections.Generic;
    using System.Configuration;
    using System.Data;
    using System.Linq;
    using System.Windows;

    namespace HelloWorld.Desktop
    {
        public partial class App : Application
        {
            protected override void OnStartup(StartupEventArgs e)
            {
                base.OnStartup(e);
                Bootstrapper bootstrapper = new Bootstrapper();
                bootstrapper.Run();
            }
        }
    }
  4. and in App.xaml, take out the StartupUri (since we overrode OnStartup in the code behind):
  5. Press F5 and your application should run at this point.
Add a Module
  1. Right-click your solution and add a Class Library named HelloWorldModule.
  2. add the following references (use the .NET tab):
    PresentationCore.dll
    PresentationFramework.dll
    WindowsBase.dll
  3. then add these references (use the Browse tab):
    Microsoft.Practices.Composite.dll
    Microsoft.Practices.Composite.Presentation.dll
  4. Rename the Class1.cs file to HelloWorldModule.cs, respond yes that you want to rename all instances in the class itself as well.
  5. replace the content of this class with:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using Microsoft.Practices.Composite.Modularity;

    namespace HelloWorldModule
    {
        public class HelloWorldModule : IModule
        {
            public void Initialize()
            {

            }
        }
    }
  6. Add a Views folder to the HelloWorldModule project.
  7. In the HelloWorld.Desktop project, add a reference to the HelloWorldModule (use the Projects tab).
  8. in the BootStrapper.cs file, replace the contents of the GetModuleCatalog() method with this:
                ModuleCatalog catalog = new ModuleCatalog()
                    .AddModule(typeof(HelloWorldModule.HelloWorldModule));
                return catalog;
  9. Compile your application again with F5 to make sure you typed everything in correctly.
Add a View
  1. Right-click on the Views folder, add new item, and add a WPF user control.
  2. add this inside the Grid tags in the HelloWorldView.xaml file:
            <TextBlock Text="Hello World"
                         Foreground="Green"
                         Margin="10"
                         FontSize="14"/>
Create a Region Manager
  1. open HelloWorldModule.cs and replace the content with this:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using Microsoft.Practices.Composite.Modularity;
    using Microsoft.Practices.Composite.Regions;

    namespace HelloWorldModule
    {
        public class HelloWorldModule : IModule
        {
            private readonly IRegionManager regionManager;

            //this is "constructor dependency injection", i.e. the regionManager is being injected into the module
            //because the module depends on it (since the regionManager will place it accordinly in the UI regions)
            public HelloWorldModule(IRegionManager regionManager)
            {
                this.regionManager = regionManager;
            }

            public void Initialize()
            {
                regionManager.RegisterViewWithRegion("MainRegion", typeof(Views.HelloWorldView));
            }

        }
    }
  2. Press F5 again and you will see your view display its content.
 
VS2008 HOWTO created on Tuesday, March 03, 2009 permalink
How to make CTRL-C not select a blank line
Doing CTRL-C / CTRL-V on a line is a quick way to copy it, but if you happen to hit CTRL-C on a blank line, your clipboard contents are gone. This fixes that.
  1. Go to tools | options | text editor | all languages.
  2. uncheck the following box:
 
BLEND HOWTO created on Wednesday, February 25, 2009 permalink
How to make animations more lifelike
Animations are easy to create in Expression Blend, much easier to get going than in Flash. You just drag the shapes where you want them to go, move the time line up a second, repeat, etc. You can also click on the little markers on the keyframe line and them change how the transitions occur so that e.g. you can get less robotic and more life-like motion, very cool
  1. Make a shape, move keyframe line marker to one second, then move object again, press play.
  2. then click on one of the bubble markers:
  3. Then in properties, click on the yellow dot and bend the curve.
  4. Press play again, your motion will speed to the end, then slow down as it approaches, nice.
 
ENTITY HOWTO created on Tuesday, February 24, 2009 permalink
How to set up ADO.NET Entity Framework with SQL Server database (MDF file) in a WPF application
This shows you the exact steps to create a WPF application, SQL Server database (MDF file), an Entity Model, and display the contents of a database table in a WPF ListBox.
Set Up Project and Database
  1. Make a new WPF project called TestEntity.
  2. Make a new directory called App_Data.
  3. Right-click App_Data directory and create a Service-based Database.
  4. Click Finish.
  5. Double-click on Main.mdf.
  6. Right-click on Tables and choose Add new table.
  7. Type in fields.
  8. Rightclick and set primary key.
  9. Change IsIdentity to yet.
  10. Click the Save button (diskette) and name the table Customers.
Add Some Data
  1. Right-click on Customers table and choose Show Table Data.
  2. Type in some data.
Add the Entity Model
  1. Click on Solution Explorer.
  2. Make Model folder.
  3. Right-click, add, new item, ADO.NET Entity Model.
  4. Next, next, check the Customers table.
  5. Click Finish.
  6. Double-click on Main.edmx.
  7. Double-click on Main.mdf and drag the Customers table onto the MainDB.edmx window.
Bind Data To UI
  1. Double-click on Window1.xaml.
  2. replace the Grid element with this:
        <Window.Resources>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="ContentTemplate" >
                    <Setter.Value>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock>
                                    <TextBlock.Text>
                                        <MultiBinding    StringFormat="{}{1}, {0} ({2})">
                                            <Binding Path="FirstName"/>
                                            <Binding Path="LastName"/>
                                            <Binding Path="ID"/>
                                        </MultiBinding>
                                    </TextBlock.Text>
                                </TextBlock>
                            </StackPanel>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>
        <Grid>
            <ListBox x:Name="theCustomers"/>
        </Grid>
  3. Double-click on Window1.xaml.cs.
  4. add this Using:
    using TestEntity.Model;
  5. replace constructor with this:
            public Window1()
            {
                InitializeComponent();

                MainEntities db = new MainEntities();
                var customers = from c in db.Customers
                                select c;

                theCustomers.ItemsSource = customers;
            }
 
ENTITY HOWTO created on Tuesday, February 24, 2009 permalink
How to set up ADO.NET Entity Framework with SQL Server CE (SDF file) in a WPF application
This shows you the exact steps to create a WPF application with a SQL Server CE (i.e. used in mobile devices), an Entity Model, and display the contents of a database table in a WPF ListBox. If you use a normal SQL database file (MDF) it will be 2 MB without data, whereas a SDF file is about 85K.
Set Up Project and Database
  1. Make a new WPF project called TestEntity.
  2. Make a new directory called App_Data.
  3. Right-click App_Data directory and create a Local Database.
  4. Click Finish.
  5. Double-click on Main.sdf.
  6. Right-click on Tables and choose Create table.
  7. Type in Customers fields and set all necessary settings for ID field.
  8. Click OK.
Add Some Data
  1. Right-click on Customers table and choose Show Table Data.
  2. Type in some data.
Add the Entity Model
  1. Click on Solution Explorer.
  2. Make Model folder.
  3. Right-click, add, new item, ADO.NET Entity Model.
  4. Next, next, check the Customers table.
  5. Click Finish.
  6. Double-click on Main.edmx.
  7. Double-click on Main.sdf and drag the Customers table onto the MainDB.edmx window.
    NO_GRAPHIC: customImages/itemTypes/howtos/dragCustomers1.*
Bind Data To UI
  1. Double-click on Window1.xaml.
  2. replace the Grid element with this:
        <Window.Resources>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="ContentTemplate" >
                    <Setter.Value>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock>
                                    <TextBlock.Text>
                                        <MultiBinding    StringFormat="{}{1}, {0} ({2})">
                                            <Binding Path="FirstName"/>
                                            <Binding Path="LastName"/>
                                            <Binding Path="ID"/>
                                        </MultiBinding>
                                    </TextBlock.Text>
                                </TextBlock>
                            </StackPanel>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>
        <Grid>
            <ListBox x:Name="theCustomers"/>
        </Grid>
  3. Double-click on Window1.xaml.cs.
  4. add this Using:
    using TestEntity.Model;
  5. replace constructor with this:
            public Window1()
            {
                InitializeComponent();

                MainEntities db = new MainEntities();
                var customers = from c in db.Customers
                                select c;

                theCustomers.ItemsSource = customers;
            }
 
SILVERLIGHT HOWTO created on Saturday, February 14, 2009 permalink
How to use Application Resources in Silverlight
Application Resources are like a stylesheet that is available to all your pages. This example makes a colored brush available to the whole application, I then use the brush in a rectangle, ellipse and button.
First put your resources in App.xaml:
<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="Second106.App"
             >
    <Application.Resources>
            <LinearGradientBrush x:Key="BackgroundBrushMain">
                <LinearGradientBrush.GradientStops>
                    <GradientStop Offset="0.00" Color="Beige" />
                    <GradientStop Offset="1.00" Color="Orange" />
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
    </Application.Resources>
</Application>


Then use them in any of your pages:
<UserControl x:Class="Second106.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:toolkit="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White" >
        <StackPanel HorizontalAlignment="Left">
            <Button Background="{StaticResource BackgroundBrushMain}"
            Content="Test"/>
        <toolkit:DockPanel Margin="20">

            <Rectangle toolkit:DockPanel.Dock="Top" Fill="{StaticResource BackgroundBrushMain}"
            Width="100"
            Height="100"/>

            <Ellipse toolkit:DockPanel.Dock="Bottom" Fill="{StaticResource BackgroundBrushMain}"
            Width="100"
            Height="100"/>

        </toolkit:DockPanel>
        </StackPanel>
    </Grid>
</UserControl>
 
XAML HOWTO created on Friday, February 13, 2009 permalink
How to get buttons from stretching from right to left
When doing layout with XAML I was always bothered by the fact that buttons would stretch out from the left to right border of the element they were in and I would end up having to hard code widths to fix this, which isn't very flexible down the road. The answer is you have to set the HorizontalAlignment in the parent control since the default value is "stretched" e.g. in StackPanel.
This simple code will have stretched buttons out to 300, the width of the UserControl:
<UserControl x:Class="Second12.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="300" Height="200">
    <Grid Background="Beige" >
        <StackPanel>
            <Button Content="OK"></Button>
            <Button Content="Cancel"></Button>
        </StackPanel>
    </Grid>
</UserControl>

However, if you give the StackPanel any value in HorizontalAlignment, the buttons will be sized to their text contents:
<UserControl x:Class="Second12.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="300" Height="200">
    <Grid Background="Beige" >
        <StackPanel HorizontalAlignment="Center">
            <Button Content="OK"></Button>
            <Button Content="Cancel"></Button>
        </StackPanel>
    </Grid>
</UserControl>
 
PRISM HOWTO created on Wednesday, February 11, 2009 permalink
How to build a base Prism application
This is a list of steps I refer to when I want to build a base Prism application with modules and dependency injection with the Composite Application Library.
These steps are a condensed version of what you learn at the Composite Application Guidance for WPF Hands-On Lab

  1. New WPF application.
  2. Rename Window1 to Shell, also in code behind, also the class and title.
  3. You want to have all five CAL DLLs in a directory somewhere to reference (download them here), add them all as a reference in your project. You have to actually compile these: In Windows Explorer, double-click on Open Composite Application Library Solution.bat to open the Composite Application Library solution in Visual Studio, rightclick Composite.UnityExtensions.Desktop and select Build, then reference the five created .dlls in CAL\Composite.UnityExtensions\bin\Debug.
  4. add namespace to Shell.xaml:
    xmlns:cal="http://www.codeplex.com/CompositeWPF"
  5. add main region to Shell.xaml:
    <ItemsControl Name="MainRegion" cal:RegionManager.RegionName="MainRegion"/>
  6. your Shell.xaml should look like this:
  7. in root directory create Bootstrapper.cs, replace the class with this code:
        class Bootstrapper : UnityBootstrapper
        {

            protected override DependencyObject CreateShell()
            {
                Shell shell = new Shell();
                shell.Show();
                return shell;
            }

            protected override IModuleEnumerator GetModuleEnumerator()
            {
                return new StaticModuleEnumerator()
                    .AddModule(typeof(Modules.ModuleInfo));
            }

        }
  8. and add these using statements:
    using Microsoft.Practices.Composite.Modularity;
    using Microsoft.Practices.Composite.UnityExtensions;
    using System.Windows;
  9. In App.xaml take out the StartupUrl.
  10. add this method to the App.xaml.cs file:
            protected override void OnStartup(StartupEventArgs e)
            {
                base.OnStartup(e);

                Bootstrapper bootstrapper = new Bootstrapper();
                bootstrapper.Run();
            }
  11. Right-click solution, add, new project, choose Class Library and name it: Modules.
  12. Under Modules create a folder named Views.
  13. Right click on the Views folder and choose "Add, New Item, User Control (WPF)" and call it MainView.
  14. double-click on MainView.xaml, take out the Height and Width attribute and replace the Grid tags with this code:
        <StackPanel>
            <TextBlock Text="This is a test." Margin="10"/>
        </StackPanel>
  15. add the following references to Modules (under the .NET tab):
    PresentationCore.dll
    PresentationFramework.dll
    WindowsBase.dll
  16. also add these CAL references to Modules (under the Recent tab):
    Microsoft.Practices.Composite.dll
    Microsoft.Practices.Composite.Wpf.dll
  17. rename Class1.cs to ModuleInfo.cs and replace the content with this code:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using Microsoft.Practices.Composite.Modularity;
    using Microsoft.Practices.Composite.Regions;

    namespace Modules
    {
        public class ModuleInfo : IModule
        {

            private readonly IRegionManager regionManager;

            public ModuleInfo(IRegionManager regionManager)
            {
                this.regionManager = regionManager;
            }

            public void Initialize()
            {
                IRegion mainRegion = this.regionManager.Regions["MainRegion"];

                Views.MainView view = new Views.MainView();
                mainRegion.Add(view);
                mainRegion.Activate(view);

                Views.MainView view2 = new Views.MainView();
                mainRegion.Add(view2);
                mainRegion.Activate(view2);

            }

        }
    }
  18. Now in your main project, reference your Modules project.
  19. run your application and you should see this:
  20. Then go to http://www.codeplex.com/prism to continue on.
 
WPF HOWTO created on Wednesday, February 11, 2009 permalink
How to define styles central and use them in every XAML file
This shows you how to attach "style sheets onto XAML files" as you attach CSS files onto HTML files. There is more to it than this, but if you are a web developer starting with WPF, this will get you started with centralized styles and the separation of form and content in your WPF applications.
  1. Create a new WPF application.
  2. in the Window1.xaml file add this line:
    <Button Content="Reports" Height="30" Width="100"/>
  3. run the application and the button should look like this:
  4. Create a directory in your root called Themes.
  5. Right click that directory and choose "Add New Item, Resource Dictionary" and call it Generic.xaml.
  6. in the Generic.xaml file between the ResourceDictionary tags, copy in this code:
        <Style TargetType="{x:Type Button}">
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="Border" Background="YellowGreen" CornerRadius="4">
                            <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="Gold" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="Orange" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
  7. then in the Window1.xaml file after the opening Window element, copy in this code:
        <Window.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="Themes/Generic.xaml"/>
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
        </Window.Resources>
  8. run your application again and you should have a colorful button:
 
WPF HOWTO created on Saturday, February 07, 2009 permalink
How do styles in WPF similar to HTML/CSS
If you are learning WPF coming from a web developer background, this examples shows you the basics of defining styles in one file and then assigning each element a style as you do in HTML/CSS.
  1. Create a new WPF application.
  2. Build your "style sheet" by right-clicking on your project name, add Item, and add a resource dictionary.
  3. add these styles to your newly created resource dictionary file:
        <Style x:Key="InfoBoxStyle" TargetType="{x:Type Border}">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush>
                        <GradientStop Color="#eee" Offset="0"/>
                        <GradientStop Color="#ccc" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush" Value="LightGray" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="CornerRadius" Value="10" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="Padding" Value="10" />
            <Setter Property="Margin" Value="5,5,5,0" />
        </Style>

        <Style x:Key="InfoBoxContentStyle" TargetType="{x:Type TextBlock}">
            <Setter Property="TextWrapping" Value="Wrap"/>
        </Style>
  4. in your main XAML file, add the reference to your stylesheet:
        <Window.Resources>
            <ResourceDictionary Source="Dictionary1.xaml" />
        </Window.Resources>
  5. then add the XAML that has elements which get their styles from your style sheet (resource dictionary):
        <StackPanel Margin="3">
            <Border Style="{StaticResource InfoBoxStyle}">
                <TextBlock Style="{StaticResource InfoBoxContentStyle}">In a sense, Views and unit tests are just two different types of ViewModel consumers.</TextBlock>
            </Border>
            <Border Style="{StaticResource InfoBoxStyle}">
                <TextBlock Style="{StaticResource InfoBoxContentStyle}">The development team can focus on creating robust ViewModel classes, and the design team can focus on making user-friendly Views. Connecting the output of both teams can involve little more than ensuring that the correct bindings exist in a view's XAML file.</TextBlock>
            </Border>
        </StackPanel>
 
WPF HOWTO created on Thursday, February 05, 2009 permalink
How to create WPF user controls with parameters
This shows you how to create an InfoBox user control that you can use repeatedly in your WPF application, sending it a title and a body. It uses DependencyProperty to pass the parameters so good if you are trying to understand those as well.
  1. Create WPF project.
  2. Create directory Controls.
  3. Right-click Conrols directory, and Add New Item.
  4. Add a UserControl (WPF) called InfoBox.
  5. replace the InfoBox.xaml.cs inner class code with this:
            public static readonly DependencyProperty TitleProperty = DependencyProperty.Register("Title", typeof(string), typeof(InfoBox));
            public static readonly DependencyProperty BodyProperty = DependencyProperty.Register("Body", typeof(string), typeof(InfoBox));

            public string Title
            {
                get { return (string)GetValue(TitleProperty); }
                set { SetValue(TitleProperty, value); }
            }

            public string Body
            {
                get { return (string)GetValue(BodyProperty); }
                set { SetValue(BodyProperty, value); }
            }

            public InfoBox()
            {
                InitializeComponent();
                this.DataContext = this;
            }
  6. replace the InfoBox.xaml inner XAML code with this:
        <Grid>
            <Expander HorizontalAlignment="Left" Header="{Binding Title}"
                        VerticalAlignment="Top" ExpandDirection="Down" Width="160" Padding="2">
                <Expander.Background>
                    <LinearGradientBrush>
                        <GradientStop Color="#ccc" Offset="0"/>
                        <GradientStop Color="#bbb" Offset="1"/>
                    </LinearGradientBrush>
                </Expander.Background>
                <TextBlock TextWrapping="Wrap" Padding="5" Margin="2" Text="{Binding Body}">
                        <TextBlock.Background>
                            <LinearGradientBrush>
                                <GradientStop Color="#eee" Offset="0"/>
                                <GradientStop Color="#ddd" Offset="1"/>
                            </LinearGradientBrush>
                        </TextBlock.Background>
                </TextBlock>
            </Expander>
        </Grid>
  7. add the following attribute to the Window element:
    xmlns:controls="clr-namespace:WpfApplication1.Controls"
  8. also delete the Height="300" Width="300" in the UserControl tag, you should now see this:
  9. then in Window1.xaml replace the inner <Grid></Grid> XAML code with this:
        <StackPanel>
            <controls:InfoBox Title="Overview" Body="This is the overview that will show you how to do certain things in general. This is a very long text."/>
            <controls:InfoBox Title="Reports" Body="This is information about all the reports."/>
            <controls:InfoBox Title="Help" Body="This is general help that is displayed here."/>
        </StackPanel>
 
WPF HOWTO created on Tuesday, February 03, 2009 permalink
How to download, install and use the Codeplex Datagrid component
This will show you step by step how to install the WPF Toolkit from Codeplex and use the Datagrid component. There are a number of steps that may not be clear to people just starting out with .NET and WPF.
  1. Go to: http://www.codeplex.com/wpf.
  2. Click on Downloads.
  3. Click on WPFToolkit_Binaries and click I Agree.
  4. Save the file to your hard drive.
  5. Double click on it, next, next, next install.
  6. Open up Visual Studio 2008.
  7. Create a new WPF application.
  8. Right-click References and choose Add Reference.
  9. Click on the Recent tab and choose WPFToolkit.
  10. In the XAML file, add this namespace to the Window element.
    xmlns:dg="clr-namespace:Microsoft.Windows.Controls;assembly=WpfToolkit"
  11. replace the Grid element with this:
        <Grid    Name="_grid">
            <dg:DataGrid
                 ItemsSource="{Binding Path=.}"
                 Margin="10"
                 x:Name="_dataGrid"
                 ColumnHeaderHeight="30" AutoGenerateColumns="True"
                     AlternatingRowBackground="Cyan" CanUserSortColumns="False">
            </dg:DataGrid>
        </Grid>
  12. your XAML should now look like this:
  13. now replace the contents of the code-behind class with this:
            private DataSet _ds;

            public Window1()
            {
                InitializeComponent();
            }

            protected override void OnInitialized(EventArgs e)
            {
                base.OnInitialized(e);
                _ds = new DataSet();
                DataTable table = new DataTable();
                _ds.Tables.Add(table);

                DataColumn col = new DataColumn("FirstName", typeof(string));
                col.MaxLength = 100;
                table.Columns.Add(col);

                col = new DataColumn("LastName", typeof(string));
                col.MaxLength = 100;
                table.Columns.Add(col);

                DataRow row = table.NewRow();
                table.Rows.Add(row);
                row["FirstName"] = "Edward";
                row["LastName"] = "Tanguay";

                row = table.NewRow();
                table.Rows.Add(row);
                row["FirstName"] = "John";
                row["LastName"] = "Tester";

                _grid.DataContext = _ds.Tables[0];
            }
  14. Run your application.
 
SILVERLIGHT HOWTO created on Monday, February 02, 2009 permalink
How to make a two-page Silverlight application with a button that switches between the pages
This is a little info box that allows the user to switch between two pages by clicking on a button.
  1. Create new silverlight application.
  2. in Page.xaml add this:
        <StackPanel Orientation="Vertical" Width="300" Height="150" Background="#333" >

                <TextBlock Height="129" x:Name="theTextBlock" Foreground="#ddd" Padding="10" Text="This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. "
                TextWrapping="Wrap" />

                <Button Name="Switch" Content="Switch Page"/>

        </StackPanel>
  3. in Page.xaml.cs add this to handle the button:
        public Page()
        {
            // Required to initialize variables
            InitializeComponent();
                Switch.Click += new RoutedEventHandler(Switch_Click);
        }

            void Switch_Click(object sender, RoutedEventArgs e)
            {
                PageSwitcher ps = this.Parent as PageSwitcher;
                ps.Navigate(new Page2());
            }
  4. create a new Page2, and copy in the code for Page2.xaml:
        <StackPanel Orientation="Vertical" Width="300" Height="150" Background="#333" >

            <TextBlock Height="129" x:Name="theTextBlock" Foreground="#ddd" Padding="10" Text="This is page two with other information on it. This is page two with other information on it. This is page two with other information on it. "
                TextWrapping="Wrap" />

            <Button Name="Switch" Content="Switch Page"/>

        </StackPanel>
  5. and the code behind for Page2.xaml.cs:
        public Page2()
        {
            // Required to initialize variables
            InitializeComponent();
            Switch.Click += new RoutedEventHandler(Switch_Click);

        }

            void Switch_Click(object sender, RoutedEventArgs e)
            {

            PageSwitcher ps = this.Parent as PageSwitcher;
            ps.Navigate(new Page());
            }
  6. then create a page called PageSwitcher and in the PageSwitcher.xaml collapse the user control since everything will be in code:
    <UserControl
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        x:Class="MultiplePages.PageSwitcher"
        d:DesignWidth="640" d:DesignHeight="480">

        </UserControl>
  7. then the code behind:
        public partial class PageSwitcher : UserControl
        {
            public PageSwitcher()
            {
                // Required to initialize variables
                InitializeComponent();

                if (this.Content == null)
                {
                    this.Content = new Page();
                }
            }

            public void Navigate(UserControl nextPage)
            {
                this.Content = nextPage;
            }
        }
  8. Run your application and you will see this.
 
SILVERLIGHT HOWTO created on Monday, February 02, 2009 permalink
How to install Codeplex's Silverlight tools to be able to use DockPanel in Silverlight
There are many WPF controls which you do not have access to when developing in Silverlight. This HowTo shows how to get and use the DockPanel control.
  1. Go to http://www.codeplex.com/Silverlight.
  2. Click on get latest release.
  3. Click on the first download link.
  4. Click I agree and download the zip file to your hard drive.
  5. Right-click on references and select add reference.
  6. Click on the browse tab then go to the directory where your .dlls are and (for some reason) your .dlls will not show, so you have to type in Microsoft.Windows.Controls.dll and hit return.
  7. In the UserControl element, add this namespace element: xmlns:toolkit="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls".
  8. in the body of your UserControl type enter this code:
        <toolkit:DockPanel Background="Black" LastChildFill="False">

            <Border Background="Pink" toolkit:DockPanel.Dock="Top"
                Height="55" HorizontalAlignment="Stretch" Margin="0">
                <TextBlock Foreground="Purple" FontSize="32" Padding="5" HorizontalAlignment="Center">THIS IS THE HEADER</TextBlock>
            </Border>

            <Border Background="#ddd" toolkit:DockPanel.Dock="Top"
                Height="20" HorizontalAlignment="Stretch" Margin="0">
                <TextBlock Foreground="Purple" FontSize="12" Padding="5 2 5 2" HorizontalAlignment="Left">this is the menu</TextBlock>
            </Border>

            <Border Background="#ddd" toolkit:DockPanel.Dock="Bottom"
                Height="20" HorizontalAlignment="Stretch" Margin="0">
                <TextBlock Foreground="Purple" FontSize="12" Padding="5 2 5 2" HorizontalAlignment="Right">this is the footer</TextBlock>
            </Border>

            <Border Background="#eee" toolkit:DockPanel.Dock="Left"
                Width="80" HorizontalAlignment="Stretch" Margin="0">
                <TextBlock Foreground="Purple" FontSize="8" Padding="5" HorizontalAlignment="Left" TextWrapping="Wrap">This is the text on the left that can wrap inside the column and be quite long.</TextBlock>
            </Border>

            <Border Background="#eee" toolkit:DockPanel.Dock="Right"
                Width="80" HorizontalAlignment="Stretch" Margin="0">
                <TextBlock Foreground="Purple" FontSize="8" Padding="5" HorizontalAlignment="Left" TextWrapping="Wrap">This is the text on the right that can wrap inside the column and be quite long as well.</TextBlock>
            </Border>

            <Border Background="#fff" toolkit:DockPanel.Dock="Top"
                 Height="210" HorizontalAlignment="Stretch" Margin="0">
                <TextBlock Foreground="Black" FontSize="10" Padding="5" HorizontalAlignment="Left" TextWrapping="Wrap">This is an example of the DockPanel control which you can use in Silverlight but only after you download it from CodePlex and reference it in your project.</TextBlock>
            </Border>

        </toolkit:DockPanel>
  9. Run the application and you will see this.