New Customer Feedback Program at Microsoft

Microsoft has announced an exciting new initiative, a customer feedback program that allows folks like us to interact directly with the developers and let them know just how we feel. Rory Blyth wrote a really good post on the things that are wrong with Windows, and all I can say is “Amen and pass the crunchy peanut butter!” Read his post at http://www.neopoleon.com/home/blogs/neo/archive/2007/08/24/26758.aspx and see if you don’t feel like saying exactly the same thing.

Anyway, if you want to learn more about the new program from Microsoft, go to http://www.microsoft.com/emea/itsshowtime/sessionh.aspx?videoid=9999 and click the “See a Preview” link.

Rumor has it that Scott Hanselman, Microsoft’s newest employee will be the very first developer they will be trying this on.

Arcane Stuff

Stepping away from WPF for a brief moment to pass along some interesting tidbits. First, there’s a new blog at Microsoft, the hackers blog. Should be interesting reading for those interested in security.

http://blogs.msdn.com/hackers/

Next, if you are one of the few people in the universe who has not yet heard, Scott Hanselman’s incredibly useful list of tools for 2007 is up.

http://www.hanselman.com/blog/ScottHanselmans2007UltimateDeveloperAndPowerUsersToolListForWindows.aspx

The Alabama Code Camp, which is scheduled for October 6th, has had it’s site updated. Note, it’s done in Silverlight, so you’ll need the latest Silverlight plug in to see it. (Don’t worry, the site will prompt you, quick and painless.)

You should also note there’s going to be a Silverlight Game contest. Design your own Silverlight game and you could win a Zune! See the site for details.

http://www.alabamacodecamp.com/

Finally, there’s an interesting looking conference going on in Nashville on October 12th and 13th called DevLink. They have some really big name speakers, with a really low admission. I’m planning on going, so maybe I’ll see you there!

http://www.devlink.net/

Stacking the deck with the WPF StackPanel

Yesterday we dove into the grid, in all likelihood it will be the container you’ll use the most. There’s another container control however that’s very popular, the StackPanel. You will often see the StackPanel used in demos because of it’s simplicity. It’s also used frequently for nesting controls inside another control.

Many controls have a contents property. The contents properties typically can hold only one thing, however that one thing can be a StackPanel, which in turn can house multiple items.

In Visual Studio, either start a new Windows WPF Project, or simply add a new Window (make sure to pick “Add New Item”, then “Window (WPF)”, if you had picked “Add New Windows Form” you’d have gotten and old fashioned WinForm) to the current sample we were using yesterday. Also, to make this the startup form, open the App.xaml file and change the startupuri to the new form:

  <Application x:Class=WPFSample001.App

      xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

      xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

      StartupUri=Window2.xaml

    >

    <Application.Resources>

    </Application.Resources>

  </Application>

You can see I changed mine to Window2.xaml. OK, back to the Window2.xaml file.

In the XAML area remove the <Grid> tags and add the following code:

  <StackPanel>

    <Button>Here’s a Button</Button>

    <TextBlock HorizontalAlignment=Center Background=Red>Hello There</TextBlock>

    <TextBox>A Text Box</TextBox>

    <CheckBox>Check Me!</CheckBox>

    <Button>One More Button</Button>

  </StackPanel>

What you will see is the controls stacked in a vertical fashion:

 [Picture of StackPanel in Action]

The StackPanel only has one real property with fiddling with, that’s the Orientation. By default Orientation is Vertical, however you can set it to Horizontal thusly:

  <StackPanel Orientation=Horizontal>

 

When you do, you’ll see this (well, once you resize the window a tad to be able to see everything):

[Picture of StackPanel with Horizontal layout] 

This would be useful if you wanted to create a status bar, or row of action buttons in your app.

I said the Orientation property was the main one you’ll be adjusting, however there is one more you may need, although probably not often. That’s the margin property. In the example below I set the margin to 20 so you can easily see the effect.

  <StackPanel Margin=20 Orientation=Horizontal>

[Picture of StackPanel with Margin of 20] 

You may, however want things oriented a bit differently. The StackPanel lacks an easy way to do this, however we can achieve a rotated text effect using the RenderTransform method of the various controls. Take a look:

[Picture of StackPanel with Rotated Text] 

Here’s the source (with the Window tags omitted):

  <Window x:Class=WPFSample001.Window2

      xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

      xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

      Title=WPFSample001 Height=152 Width=400

    >

    <StackPanel Orientation=Horizontal>

      <Button RenderTransformOrigin=0.5,0.5>

        <Button.RenderTransform>

          <RotateTransform  Angle=270 />

        </Button.RenderTransform>

        Here’s a Button

      </Button>

      <TextBlock RenderTransformOrigin=0.5,0.5 VerticalAlignment=Center Background=Red>

        <TextBlock.RenderTransform>

          <RotateTransform Angle=90 />

        </TextBlock.RenderTransform>

        Hello There

      </TextBlock>

      <TextBox>A Text Box</TextBox>

      <CheckBox>Check Me!</CheckBox>

      <Button>

        <TextBlock RenderTransformOrigin=0.5,0.5 VerticalAlignment=Center HorizontalAlignment=Center>

          <TextBlock.RenderTransform>

            <RotateTransform Angle=270 />

          </TextBlock.RenderTransform>

          One More Button

        </TextBlock>

      </Button>

    </StackPanel>

  </Window>

What I especially want to point out are the two buttons. In the first button, “Here’s a Button”, I applied the RenderTransform to the entire button. When I did this, WPF flipped the button on it’s side, but did not resize it. Instead, it left it at the default size the StackPanel had come up with. Not pretty, certainly not desireable for your app.

The solution then, is to do what I did for button two, the “One More Button” button. I replaced the contents with a TextBlock. I then used the same RenderTransform technique I had done with the “Hello There” TextBlock to flip the text on it’s side. Now it looks like the buttons text is flipped sideways, but the button retains the correct sizing.

The StackPanel will be an often used tool in your arsenal. Indeed, from what I have seen it may be THE most used WPF control in your kit.

Grid yourself… it’s WPF

It’s time to begin building a WPF Window. First though, we need to know something about the controls. In most cases you don’t want to place your controls directly on the window. Instead you want to use a container control that will help you group controls and arrange their placement.

While there are several, the most common of the containers is the Grid. It’s so common, both Visual Studio and the Expressions tool use the Grid as the default. Remember the project from yesterday? Take a look at the Xaml window (note you can click on most of these images to get a larger view):

[Picture of WPF Base Code]

With the Grid, you can simply drop several controls, such as buttons into it, or code them:

[Picture of two buttons]

Above you can see I dropped two buttons. In order to manage the placement of the second button, a “Margin” property was added to specify where WPF should place the button. A better way, however, might be to divide the grid into rows and columns. Then in the button declaration you specify which row / column to place the button in.

[Picture of Grid laid out]

Here we define the number of rows in the <Grid.RowDefinitions> area. As you see there are three rows defined. The column definitions are defined likewise, using <Grid.ColumnDefinitions>. Note the dotted blue lines Visual Studio thoughtfully drew on our window, to indicate where our grid lies.

Inside the Button tag, you see I indicated the row / column to put the button by using Grid.Row and Grid.Column syntax. Note that the numbering is zero based.

There are some simple ways you can enhance the grid’s usability. For example, let’s say button1’s Width was 150, and not 75. The resulting window looks like this:

[Picture of... hey who stole my button!]

See how the button is cut off (look where the arrow is pointing). There’s an easy way to fix this however. To the button, add Grid.ColumnSpan=“2”. And thus the problem is fixed!

[Picture of... oh wait, I found the button, it was with that missing sock from the dryer.]

While there’s a lot more we can do with the grid, there’s one thing left for today to discuss. Sizing of the rows and columns.

The height / width is established in the Definitions area. There are three ways to define a height / width. The first is automatic, and you simply set Height=”Auto” (or width) and WPF will take care of sizing for you.

The second way is absolute. With absolute, you simply give a number which represents the number of pixels. Width=”100” sets it to 100 pixels.

The final method is proportional. Unlike ASP.Net, which used percentages, WPF uses an * (asterisk). When only one row (or column) is set to *, that row (or column) takes up all the remaining space. When multiple rows (or columns) have an *, the remaining space is divided evenly between those rows (or… yes, you guessed it, columns).

Finally, you can affix a multiplier to the * . If, for example, one column was 2*, and the other two columns were set to *, the first column would be twice as wide as the others. Let’s look at a quick example…

[Picture of proportional columns]

Look closely at the dotted lines of the grid. You can see the center is twice as wide as the left and right columns. Note the multiplier can be a decimal as well, I could have specified 2.5* if I’d wanted. And, even though I did this sample with Columns, the same rules apply in the RowDefinition area.

Personally, I really love this * syntax. No more do I have to fiddle with trying to add up percentages or divide them. I simply use easy numbers to indicate how wide I want a column (or row) in relation to the others.

As I mentioned, there’s much more that can be done with the grid, but this covers a few nice basics that should get us started.

 

Update (29 Aug 2007): After looking at the post today, I realized some of the images could be a bit small. So here is the final XAML code in text format, in case you are interested:

  <Window x:Class=WPFSample001.Window1

      xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

      xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

      Title=WPFSample001 Height=99 Width=300

    >

    <Grid>

      <Grid.RowDefinitions>

        <RowDefinition></RowDefinition>

        <RowDefinition></RowDefinition>

        <RowDefinition></RowDefinition>

      </Grid.RowDefinitions>

      <Grid.ColumnDefinitions>

        <ColumnDefinition Width=*></ColumnDefinition>

        <ColumnDefinition Width=2*></ColumnDefinition>

        <ColumnDefinition Width=*></ColumnDefinition>

      </Grid.ColumnDefinitions>

      <TextBlock Grid.Column=0 Grid.Row=0 HorizontalAlignment=Center>Hi There</TextBlock>

      <Button Grid.ColumnSpan=2 Grid.Column=0 Grid.Row=2 Height=23 Width=150 HorizontalAlignment=Left Name=button1 VerticalAlignment=Top >Button</Button>

      <Button  Grid.Column=2 Grid.Row=2 Height=23 Width=75 HorizontalAlignment=Left Name=button2 VerticalAlignment=Top>2</Button>

    </Grid>

  </Window>

Starting a WPF Project

Head colds are nasty things. Yeah, I know folks like Scott Hanselman and Jeff Atwood say we shouldn’t talk much about ourselves, but I offer this as explanation for dropping off the face of the earth last week. A nasty head cold, followed by busy work week and my houses air conditioning dying in the middle of an Alabama triple digit heat wave… well something had to give.

But hey, odds are you’re not hear to offer your chicken soup recipe, but find out about WPF. So let’s kick this week off by starting a WPF project. Assuming you followed my instructions in my last post ( http://arcanecode.wordpress.com/2007/08/20/installing-the-wpf-bits/ ), you now have all the bits installed. Open Visual Studio 2005, and create a new project.

In your “New Project” window, navigate down to the “NET Framework 3.0” branch. In the templates area you see some new ones. One, WCF Service Library, is for creating Windows Communication Services projects and is outside the scope of this discussion.

The other three are WPF oriented projects. Windows Application (WPF) is for creating general windows applications using WPF. This is what you’ll probably use the most, and what we’ll pick for today’s demo. I named mine WPFSample001, as you can see above.

Before you click OK, let me just mention the other two. Custom Control Library (WPF) is analogus to it’s “old fashioned” WinForms counterpart. It lets you create a custom control comprised of WPF pieces for use in WPF Windows projects.

XAML Browser Application (WPF) is used to create a WPF App that will run inside a browser. Note this isn’t Silverlight. This is more like a Click Once deployment that opens the app inside the browser. MSDN (Sep 2007) had a good example of one you can see for yourself at http://ttpdownload.bl.uk/browserapp.xbap .

OK, that covers the various WPF project types. For today, we’ve decided on a standard WPF Windows Application, so click OK as you see in the screen above.

Let’s take a quick tour of what you see. Over on the left is the Toolbox. Under Common Controls, we see some with names look familiar. Button, CheckBox, Lable, etc. These are the WPF versions of the old Windows Forms controls. There are some new controls too, such as the DockPanel, the StackPanel, and a Grid which is unlike any Grid you’ve used in the past. We’ll get into these as time goes by.

Over on the right, in the Solution Explorer you see the Files that make our WPF project. App.xaml (and it’s corresponding App.xaml.cs) is the starting point for our Windows WPF app. Here you can respond to events like application starting and stopping, or you can blissfully ignore it.

The Window1.xaml is your main focus now, since it’s where you can do all your work. If you look at the center pane, you’ll notice it’s a bit different from traditional Windows Forms or even ASP.Net designer, in that it gives you the nice split screen. Changes in one are reflected in the other.

If you don’t like the split, you can modify it by either moving the mouse in the middle area and adjusting where the spit occurs, or manipulate it using the controls on the right side of the tab area:

The left most button flips the split from the default horizontal to a vertical one, nice if you have a really wide screen monitor. The middle button returns the split to the default horizontal orientation. The right most button removes the split all together, putting two tabs at the bottom (one for designer, one for xaml), not unlike the experience you get today when designing ASP.Net html pages.

Before I close out today, I want to mention that the designer tool under 2005 is not fully baked. You will see a lot of “whoops” screens appear. In addition, control placement is more like the ASP.Net experience than WinForms. As such, most folks I’ve seen so far prefer to type the XAML code directly in.

To start with I’ll be doing just that, typing in the XAML which will help me learn the behind the scenes syntax. Later I’ll shift to using the Expression Blend tool as the main XAML designer.

This is a good start, tomorrow we’ll pick up with creating a simple XAML app.

Installing the WPF Bits

OK, looking back I’m thinking my instructions last week for getting to the WPF bits installed were a tad confusing, so I’m going to give it one more shot.

Step 1 – Install .Net 3.0.

If you’re already on Vista, skip this step. If you are on XP, you can download .Net 3.0 from: http://www.microsoft.com/downloads/details.aspx?FamilyId=10CC340B-F857-4A14-83F5-25634C3BF043&displaylang=en . Make sure your XP has been patched with Service Pack 2.

Step 2 – Have a copy of Visual Studio.

If you have Visual Studio already, skip this step. If not, you can grab an express edition version at http://msdn2.microsoft.com/en-us/express/default.aspx . You’ll want to select Windows Development, and pick either C# or VB.Net.

Step 3 – The Windows Software Development Kit

The Windows SDK has lots of cool tools, what you are interested in is one called XAMLPad. You can find the SDK at: http://www.microsoft.com/downloads/details.aspx?FamilyId=C2B1E300-F358-4523-B479-F53D234CDCCF&displaylang=en . Even though it says Vista, the SDK will also install on XP with SP2, or Windows Server 2003.

Step 4 – Visual Studio extensions for WCF & WPF

Finally, you’ll want to install the Visual Studio extensions, these will allow you to create new projects for both the WCF and WPF. There are two prerequisites to installing the extensions. First, make sure you have the SDK (from Step 3) installed first. There are some bits in there the extensions need.

Second, all of the help for the extensions is local, so make sure you go into Visual Studio and set the help to “Local, then On-line”, other wise the installer will complain. OK, with those to prerequesites handled you’re ready to proceed.

Below is the website to download the extensions. Even though the title reads CTP, these are the latest (and final) bits you’ll see for this, Microsoft is putting all it’s efforts into Visual Studio 2008. You can get the extensions at http://www.microsoft.com/downloads/details.aspx?familyid=f54f5537-cc86-4bf5-ae44-f5a1e805680d&displaylang=en

Step 5 – Reboot

I generally find it a good idea to do a reboot after installing new bits, especially ones from Microsoft. After the reboot it might also be a good idea to run a Windows Update, just in case there are any security bits that need installing / updating.

Bonus Step – If you have an MSDN subscription, you should also download and install the Expression Blend tool, it will make your job of generating XAML much easier.

New version of CodeRush/RefactorPro

Just thought I’d take a short break from WPF to make you aware there has been a new release to that wonderful Visual Studio add-in CodeRush. The product has now broken the 100 refactorings mark!

You can read the announcement from DevExpress at http://www.devexpress.com/Home/Announces/CodeRush25.xml

If you are not familiar with DevExpress’ CodeRush/RefactorPro tools, you can read my original post at http://arcanecode.wordpress.com/2007/01/09/visual-studio-add-ins-coderush/

The new version already works with Visual Studio 2008. Talk about being on the ball, VS2008 is still in Beta and they’ve already got refactorings out there just for it!

Follow

Get every new post delivered to your Inbox.

Join 101 other followers