Arcane Fun Fridays

WHEW! All of this WPF / XAML sure has been a lot of fun. But I think it’s time to come up for air and see what else is happing out there in Dot Net land.

Alabama Code Camp is coming up in just a little over a week, Saturday October 6th to be exact. Still plenty of time to register and even just a bit of time if you want to get in on the Silverlight programming contest. First prize for that is a Zune! http://www.alabamacodecamp.com/home.html

devLink, the large conference for a cheap price comes up right afterward in Nashville, Friday and Saturday October 12th and 13th. http://www.devlink.net/ . You can tell I’ll be there, my name’s on the front page as a winner of a Barnes and Nobel gift card (look for the dude from AL !)

(By the way, anyone know of a good dog repellent? My nephew is coming to house sit and is bringing Marshmallow and Buttercup, his twin Dobermans along because I have a big back yard they can play in. Last time though they ate the garden hose, chewed the handle off my shovel, and bit through one of my lawnmower tires.)

There’s a new add-on for SQL Server Management Studio I’m eager to try out. It’s still in Beta but looks promising. It was blogged about at http://weblogs.sqlteam.com/mladenp/archive/2007/09/20/SSMS-Tools-Pack—an-add-in-for-SQL-Management-Studio.aspx or you can download it directly at http://www.ssmstoolspack.com/ .

If you are a fan of NUnit, you’ll appreciate the new xUnit. Read James’ announcement at http://jamesnewkirk.typepad.com/posts/2007/09/announcing-xuni.html .

In a recent Dot Net Rocks episode, Carl Franklin announced they would be taking over Shrinkster.com. Shrinkster has been down due to spam abuse, as soon as Carl gets everything setup we’ll be able to go back to using short links again!

Speaking of Dot Net Rocks, I especially enjoyed show 274, where the new features of VB.Net and C# for the 2008 release were discussed. Entertaining and lots of good tidbits. I think my favorite feature so far has got to be C#’s extension methods. http://www.dotnetrocks.com/default.aspx?showNum=274

During my long drive to the Tallahassee Code Camp last week, I put together a podcast theme session, and copied a bunch of related podcasts onto my cheapo SanDisk mp3 player. This time I went with a “Millenator” theme and got all the episodes of Dot Net Rocks that Mark Miller appeared on. Good stuff, lots of thoughtful material combined with some humor. Next time you go on a trip, copy a bunch of past episodes of your favorite podcast that are in the same theme and make that long drive go much quicker.

There have been several updates to the world’s greatest Visual Studio Add-In, CodeRush, over the last few weeks ( http://www.devexpress.com/Home/Announces/CodeRush25.xml ). Apparently Mark Miller and the boys have been busy! If you’re not on 2.5.4 go update yours today.

Speaking of Mark Miller, I love his intro slide for his VSLive session coming up in LasVegas. Take a look, pure genius. http://www.doitwith.net/2007/09/11/MyLastVSLiveSessionEver.aspx

A final note, between getting ready for Alabama Code Camp and going to devLink my blogging may get spotty for the next few weeks, bear with me and I’ll have full reports from both code camps and lots of fun new stuff to share.

WPF ToolBars

Similar to Menus, WPF also supports Toolbars for your application. They are fairly simple to use and will hold just about any control. For best usage, you will want to first place a ToolBarTray onto the container (I’m using a DockPanel). The ToolBarTray will handle things like placement and letting users move the toolbars around as needed.

Then, inside your tray place your ToolBar controls. From there simply add whatever controls you wish to place. You would programmatically respond to events on your controls like you normally would, with Click=”” type syntax or whatever is appropriate for the control. Since I’ve demonstrated that in previous lessons I’ll skip it for today.

In this example I’ve created two bars, one with 3 buttons, the other with a mixture of controls.

    <DockPanel>

      <ToolBarTray DockPanel.Dock=Top

                  Background=LightGray>

        <ToolBar Name=ButtonBar >

          <Button>One</Button>

          <Button>Two</Button>

          <Button>Three</Button>

        </ToolBar>

        <ToolBar Name=Mixed>

          <TextBlock>Hunt For it:</TextBlock>

          <TextBox Width=50></TextBox>

          <Button>GO</Button>

        </ToolBar>

      </ToolBarTray>

      <Grid>

        <Grid.ColumnDefinitions>

          <ColumnDefinition Width=3*/>

          <ColumnDefinition Width=*/>

        </Grid.ColumnDefinitions>

        <TextBlock Margin=5,5,0,0

                  VerticalAlignment=Top>

          More Stuff Here

        </TextBlock>

      </Grid>

    </DockPanel>

Note that I put a Grid in the lower half of the Dock area, don’t worry to much about it right now I just wanted to have something to fill the space.

wpf059

Run the app and grab the “Hunt For it” bar down and see what happens:

wpf060 

The ToolBars stack nicely. As you might expect, you may rearrange them as well.

wpf061 

At the end of the ToolBar is the Overflow control, the little thing that looks like a black arrow pointing down. If you resize the Window too small, or drag one ToolBar too close to it’s neighbor, it will act as a drop down with the remaining controls.

wpf062 

Here you can see it even expands outside the boundaries of the Window, in case the Window is not big enough.

wpf063 

It’s possible to lock your ToolBars down, should you not want the users to be able to move them. All you have to do is add a IsLocked=True to the tray declaration.

      <ToolBarTray DockPanel.Dock=Top

                  Background=LightGray

                  IsLocked=True >

If you look carefully, you’ll notice the moving handles are gone, and your ToolBars are locked down as if they were behind jail bars.

wpf064 

While in the above example I’ve placed my ToolBars in a ToolBarTray, it’s not required. You could place a ToolBar out on it’s own. Let’s add one to our Grid, in the column next to the “More Stuff Here” area.

  <DockPanel>

    <!–Tool Bar Tray here, same as previous sample–>

    <Grid>

      <Grid.ColumnDefinitions>

        <ColumnDefinition Width=3*/>

        <ColumnDefinition Width=*/>

      </Grid.ColumnDefinitions>

      <TextBlock Margin=5,5,0,0

                VerticalAlignment=Top>

        More Stuff Here

      </TextBlock>

      <ToolBar Grid.Column=1

              Margin=0,5,0,0

              VerticalAlignment=Top

              ToolBarTray.IsLocked=True >

        <Button>

          <Image Source=D:\Icons\Win9x\DISK06.ico

            Height=16 Width=16 />

        </Button>

        <Button>

          <Image Source=D:\Icons\WinXP\IPML.ICO

            Height=16 Width=16 />

        </Button>

      </ToolBar>

    </Grid>

  </DockPanel>

wpf065

Note something interesting in the ToolBar declaration, ToolBarTray.IsLocked. Even though we are not explicitly creating a tray, WPF takes care of it for us. You are locked in, however, and cannot move the ToolBar anywhere. That’s why I added the IsLocked, to get rid of the useless moving handle.

I could have simulated this with the two buttons placed in columns in the Grid, but this does give us the advantage of the overflow button should the Window get resized smaller than it needs to be.

ToolBars are a common user interface element that will add that professional touch to your major applications.

WPF Menus

The next control in the basic toolkit is the menu. Menus are much like a series of nested buttons in the way you deal with them. Let’s create a simple menu. I’ve added a DockPanel, so we could nest our menu at the top, a very common scenario.

  <DockPanel>

    <Menu DockPanel.Dock=Top >

      <MenuItem Header=_File>

        <MenuItem Header=_Open />

        <MenuItem Header=_Save />

        <MenuItem Header=Save As… />

        <MenuItem Header=E_xit Click=mnuFileExit_Click />

      </MenuItem>

      <MenuItem Header=_Edit>

        <MenuItem Header=_Cut />

        <MenuItem Header=C_opy />

        <MenuItem Header=_Paste />

      </MenuItem>

      <MenuItem Header=_Help>

        <MenuItem Header=_About />

        <MenuItem Header=_Contents />

        <MenuItem Header=_Help />

      </MenuItem>

    </Menu>

  </DockPanel>

wpf054

The underscore acts as an indicator to underline in the menu, designating a “hot key”. When the user hits the ALT key, they are then able to combine with the hot key to activate the menu option. ALT+F opens the File menu, O will then trigger the open.

Responding to the users click is just like working with many other controls, simply add a Click=”” in the MenuItem. Above you will notice I did this for one item, the Exit menu choice under File. Here’s the code I created in C#:

    void mnuFileExit_Click(object sender, RoutedEventArgs e)

    {

      this.Close();

    }

Since all the other menus work the same way I won’t bother to wire them up, but you get the idea.

It’s also possible to insert a separator, a visual line the separates one menu option from the rest. In this example, I think Exit should be separated from the other options.

  <!– …snip… –>

  <MenuItem Header=_File>

    <MenuItem Header=_Open />

    <MenuItem Header=_Save />

    <MenuItem Header=Save As… />

    <Separator></Separator>

    <MenuItem Header=E_xit Click=mnuFileExit_Click />

  </MenuItem>

  <!– …snip… –>

And now we have a nice clean line across the menu:

wpf055

OK, I can hear you now, “Hey, this is WPF, what about all the pretty pictures?” No problem, the menus support the addition of icons to each item.

One thing I’ve found many developers don’t realize is that Visual Studio actually ships with a nice array of graphics for your use. If you are using Visual Studio 2005, navigate to the C:\Program Files\Microsoft Visual Studio 8\Common7\VS2005ImageLibrary folder. There you will find a zip file named VS2005ImageLibrary.zip.

I extracted the icons folders to my D drive, as you’ll notice in the next code snippet. Adjust the sample according to where you decide to put them. I did find that on Vista, I needed to move them out of my Program Files folder or they didn’t render correctly, a security permissions issue.

      <MenuItem Header=_File>

        <MenuItem Header=_Open >

          <MenuItem.Icon>

            <Image Height=16 Width=16

              Source=D:\Icons\WinXP\folderopen.ico />

          </MenuItem.Icon>

        </MenuItem>

        <MenuItem Header=_Save >

          <MenuItem.Icon>

            <Image Height=16 Width=16

              Source=D:\Icons\Win9x\DISK06.ico />

          </MenuItem.Icon>

        </MenuItem>

        <MenuItem Header=Save As… />

        <Separator></Separator>

        <MenuItem Header=E_xit Click=mnuFileExit_Click />

      </MenuItem>

For the MenuItems I wanted to add icons to, I need to define the MenuItem.Icon tag, then inside place an Image. The Source property I set to files I’d mentioned earlier. Note also I explicitly set the Height and Width to 16×16, in order to make them fit nicely into the menu. However, you are free to make them any size you wish, the menu item height will adjust automatically to compensate.

wpf056

Ah, a work of art even Leonardo da Vinci would be proud of. But our artistic menus are not limited to the the top of the Window. It’s also possible to attach a menu to nearly any control, in the form of a ContextMenu. ContextMenus appear when you Right Click with the mouse on the control.

  <DockPanel>

    <Menu>

    <!–Menu omittied for brevity, same as previous–>

    </Menu>

    <Grid>

      <Grid.RowDefinitions>

        <RowDefinition></RowDefinition>

        <RowDefinition></RowDefinition>

      </Grid.RowDefinitions>

      <Grid.ColumnDefinitions>

        <ColumnDefinition></ColumnDefinition>

        <ColumnDefinition></ColumnDefinition>

      </Grid.ColumnDefinitions>

      <TextBlock Grid.Row=0

                Grid.Column=0

                Grid.ColumnSpan=2>

        Enter some text, right click for menu options.

      </TextBlock>

      <TextBox Grid.Row=1 Grid.Column=0>

        <TextBox.ContextMenu>

          <ContextMenu>

            <MenuItem Header=_Cut />

            <MenuItem Header=C_opy />

            <MenuItem Header=_Paste />

            <Separator></Separator>

            <MenuItem Header=_Save >

              <MenuItem.Icon>

                <Image Height=16 Width=16

                  Source=D:\Icons\Win9x\DISK06.ico />

              </MenuItem.Icon>

            </MenuItem>

          </ContextMenu>

        </TextBox.ContextMenu>

      </TextBox>

    </Grid>

  </DockPanel>

I’m adding a Grid to the body of the DockPanel. In the Grid I’m putting a TextBlock with some instructions, then a TextBox. Try right clicking on the TextBox, and take a look at what you get:

wpf057

To get this to work, I first had to create a ContextMenu tag specific for the control, in this case TextBox.ContextMenu. Within that tag I was then able to place my ContextMenu. Inside it I treated it just like a normal Menu control, the code in there I simply copied from the other menus. I could even have the Click events route to the same code in the code behind module if I wished.

It’s worth pointing out that a menu may appear anywhere on the Window. Here I will create a menu to the right of the TextBox, in the next column of the Grid.

  <DockPanel>

    <Menu DockPanel.Dock=Top >

      <!–Omitted, see previous–>

    </Menu>

    <Grid>

      <!–Omitted, see previous–>

      <TextBox Grid.Row=1 Grid.Column=0>

        <!–Omitted, see previous–>

      </TextBox>

      <Menu Grid.Row=1 Grid.Column=1>

        <MenuItem Header=Load>

          <MenuItem Header=From File></MenuItem>

          <MenuItem Header=From Database></MenuItem>

        </MenuItem>

        <MenuItem Header=Reset>

          <MenuItem Header=This Item />

          <MenuItem Header=Entire Form />

        </MenuItem>

      </Menu>

    </Grid>

  </DockPanel>

wpf058

The menu code is the same as before, except I located in the Grid instead of at the top of the Window.

Virtually any application of decent size will need to employ a menu structure of some kind. Getting to know the basics of menu controls will get you ready for that first big WPF app.

WPF Tab Control

Continuing the series on visual grouping controls in WPF, the Tab control is a common UI element that has been around for some time. It makes a convenient way to organize your window when there is more than could realistically fit and still be comprehensible.

In WPF, Tabs are very easy to implement. Create a new WPF Window, remove the default Grid tags, and add the following XAML:  

  <TabControl>

    <TabItem Header=Tab 1>Here’s Tab 1</TabItem>

    <TabItem Header=2nd Tab>A second Tab</TabItem>

  </TabControl>

Run the app, and you’ll see the two tabs on a window:

wpf042

The TabItem, just like most controls, can hold a container control that can hold much more, thus making the tab really useful. In this example, let’s add a third tab item, with a grid. We’ll put in a few text boxes and a button.

  <TabControl Name=tabMyTabs >

    <TabItem Header=Tab 1>Here’s Tab 1</TabItem>

    <TabItem Header=2nd Tab>A second Tab</TabItem>

    <TabItem Header=Cool Tab>

      <Grid>

        <Grid.RowDefinitions>

          <RowDefinition></RowDefinition>

          <RowDefinition></RowDefinition>

          <RowDefinition></RowDefinition>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

          <ColumnDefinition Width=*></ColumnDefinition>

          <ColumnDefinition Width=2*></ColumnDefinition>

        </Grid.ColumnDefinitions>

        <Label Grid.Column=0 Grid.Row=0

              HorizontalAlignment=Right>

          First Name:

        </Label>

        <Label Grid.Column=0 Grid.Row=1

              HorizontalAlignment=Right>

          Last Name:

        </Label>

        <TextBox Name=FirstName

                Grid.Column=1

                Grid.Row=0 />

        <TextBox Name=LastName

                Grid.Column=1

                Grid.Row=1 />

        <Button  Grid.Column=1

                Grid.Row=2

                Height=23 Width=75

                HorizontalAlignment=Left

                Name=CoolTabButton

                Click=CoolTabButton_Click

                VerticalAlignment=Top>

          OK

        </Button>

      </Grid>

    </TabItem>

  </TabControl>

Using techniques already described in my post on Grids (http://arcanecode.wordpress.com/2007/08/28/grid-yourself-its-wpf/ , in case you missed it) I was able to create a tab with some useful content. Running it, you can see the results for yourself:

wpf043

It’s also possible to determine the current tab via code. Let’s wire up a click event to that OK button you see. This requires we name the tab (I called it tabMyTabs), and the button, and add a Click=”CoolTabButton_Click” to the button declaration. Now all we have to do is add a little code:

    private void CoolTabButton_Click(object sender, RoutedEventArgs e)

    {

      TabItem ti = tabMyTabs.SelectedItem as TabItem;

      MessageBox.Show(“Tab Index=” + ti.Header);

    } 

 

Running and clicking on the OK button will result in a message box with the words “Tab Index=Cool Tab”

Granted my design won’t win any awards, but it gives you the general idea of how to use a tab control in WPF.

WPF Expander

Last Friday I discussed the GroupBox as a way to organize and sets of controls into distinct groups. There are several controls that will allow you to group controls, so today I’d like to highlight another named the Expander.

The expander is a nifty control that will allow you to show and hide the controls you place on it. Let’s start by putting an Expander control onto a Window. Inside we’ll add a StackPanel, and in it I’ll copy a couple of the RadioButtons from last week’s examples.

<Expander>

    <StackPanel>

      <RadioButton GroupName=One IsChecked=True>Option 1</RadioButton>

      <RadioButton GroupName=One IsChecked=False>Option 2</RadioButton>

    </StackPanel>

  </Expander>

wpf049

Sort of uninspiring, just that button sitting there. But click it and the magic happens.

wpf050

The arrow is nice, but it’d be nice to know what the expander is supposed to do. To that end the Header property is provided. Let’s expand our example with a second Expander control.

  <StackPanel>

    <Expander>

      <StackPanel>

        <RadioButton GroupName=One IsChecked=True>Option 1</RadioButton>

        <RadioButton GroupName=One IsChecked=False>Option 2</RadioButton>

      </StackPanel>

    </Expander>

    <Expander Header=Expander Header>

      <StackPanel>

        <TextBlock>Here is some instructional text for your viewing pleasure.</TextBlock>

        <CheckBox>Check me out!</CheckBox>

      </StackPanel>

    </Expander>

  </StackPanel>

wpf051

Here you can see the group header named “Expander Header”. You may notice, however, that the text scrolls off the side of the screen. That’s easy enough to fix though, all we have to do is add TextWrapping=Wrap” to the TextBlock, which you’ll see in the next sample.

Speaking of which, you may decide there are times when you want to have the Expander control already open when the dialog appears. The most common scenario would be with additional instructions for the user. Perhaps your program has modes for new users and experts. In “new user” mode, you want these to appear already expanded, but in “expert” mode they should not appear. Easy enough to achieve with the IsExpanded property.

  <StackPanel>

    <Expander>

      <StackPanel Margin=15,3,1,1>

        <RadioButton GroupName=One IsChecked=True>Option 1</RadioButton>

        <RadioButton GroupName=One IsChecked=False>Option 2</RadioButton>

      </StackPanel>

    </Expander>

    <Expander Header=Expander Header>

      <StackPanel>

        <TextBlock TextWrapping=Wrap>Here is some instructional text for your viewing pleasure.</TextBlock>

        <CheckBox>Check me out!</CheckBox>

      </StackPanel>

    </Expander>

    <Expander IsExpanded=True Header=Expanded to start with>

      <TextBlock TextWrapping=Wrap>Expanded using the IsExpanded property</TextBlock>

    </Expander>

  </StackPanel>

Here is the dialog, just as it appears to the user when it’s first run.

wpf052

Play around with the other two headers as well. You’ll notice I added a Margin tag to the first group, to bump the options over a bit and make them look a little nicer. I also added the TextWrapping tags to the various TextBlocks.

Finally, you may not always want the Expander to expand down. Fear not, it’s possible to have the expansion go to the right, left, or up via the ExpandDirection tag. Getting it to look right, however, is not a straight forward task. Let’s take a look at what I want to achieve.

wpf053

As you can see, I have a button, and to the right of the button is the expander control, with the ExpandDirection set to Right. You might think you could just drop them into a Horizontally aligned StackPanel, but it won’t work. The StackPanel just expands to take up the room it needs, even if that means going off the edge of the form. The TextWrapping property then of the TextBlock is useless, since it’s container, the StackPanel, seems to be wide enough. It’s not looking at the Window.

There are a couple of ways we could solve this, such as tieing the width of the StackPanel to the Window. But the most straightforward way is to not use the StackPanel at all, but instead to use a Grid.  

  <StackPanel>

    <!–First 3 Expanders omitted for brevity–>

    <Grid>

      <Grid.ColumnDefinitions>

        <ColumnDefinition Width=47></ColumnDefinition>

        <ColumnDefinition></ColumnDefinition>

      </Grid.ColumnDefinitions>

      <Grid.RowDefinitions>

        <RowDefinition></RowDefinition>

      </Grid.RowDefinitions>

      <Button Grid.Column=0 Height=25 VerticalAlignment=Top HorizontalAlignment=Left>Button</Button>

      <Expander Grid.Column=1 ExpandDirection=Right>

        <TextBlock TextWrapping=Wrap Margin=5,3,3,3>Expanded to the right using the ExpandDirection property gives interesting possibilities</TextBlock>

      </Expander>

    </Grid>

    <TextBlock>Some text just below the Right Expander</TextBlock>

  </StackPanel>

Here you can see a grid with one row and two columns. Note in the grid, I’ve fixed the width of the first column to be a good size for the button. If that’s not done, the Grid will keep changing size as the Window changes, and thus changing the button width which gets rather disconcerting to the user, who typically expects buttons to remain a constant size.

In addition, in the Button control I set a fixed height, again to avoid the resize issue. I’ve also set the alignment to the upper left, otherwise the button will move around as the Expander is opened and closed.

Now for the heart of all this, in the Expander control I set the ExpandDirection to Right, so it will go in the direction I want.

Within the TextBlock I added a slight margin to the TextBlock, to make it appear a little nicer. Finally I put another TextBlock under the Grid in the StackPanel, just so you could see it move up and down with the Expander.

Expander controls have a lot of possibilities with WPF. I’ve already mentioned the instructions scenario for new / expert users. They could also be used to hide seldom used options. Expression Blend uses these over in the properties window. If you come up with new design possibilities for this control, feel free to post a comment and let us know what you came up with.

Tallahassee Code Camp A Blast!

I got home a little while ago from spending all day Saturday at the Tallahassee Code Camp. And I have to say, it was a blast! Despite a six hour drive, which included driving through the remains of a tropical storm, it was well worth my time.

The day opened with me actually giving a presentation on SQL Server 2005 Compact Edition. I always like giving my presentations in the first slot, as the attendees are awake (mostly) and energized (or at least heavily caffeinated). They typically ask great questions, and this group was no exception. After my presentation, I was able to spend the rest of the day relaxing and learning about all sorts of great technologies. I attended sessions on Silverlight, LINQ, Windows WorkFlow (WF), and Ajax. All great, and very informative.

The Tallahassee User Group really knows how to put on a good show. Registration was extremely fast, they had more than enough doughnuts and coffee at breakfast and great pizza at lunch. The rooms were nice, all in all quite well run.

And the swag, baby! I have to brag and say I scored some great stuff, primarily a stack of new books on various .Net 3.0 technologies. My best score though came from Joe Healy (http://www.devfish.net/) who gave me one of those cool oval Microsoft stickers which I’ve now proudly affixed to the top of my laptop, just under my Coding Horror sticker.

I also have to give and extra special thanks to my long suffering wife the Southern TinkerBelle ( http://southerntinkerbelle.com/ ), who bent over backwards to arrange things so I could attend. Thanks sweetie!

Thanks again to everyone for a great time, and I look forward to going back next year!

WPF GroupBox

In yesterday’s discussion on RadioButtons, I mentioned it would be a good idea to give a visual cue to the users that certain buttons were associated with each other. The GroupBox is one such way of doing that.

Let’s go back to the RadioButton example from yesterday. You’d think all that’s needed is to surround our sets of radio buttons with the <GroupBox> tags. Unfortunately, the GroupBox can only have one child in it’s content, hence the need to insert a StackPanel, Grid, or other container control.

  <StackPanel>

    <GroupBox>

      <StackPanel>

        <RadioButton GroupName=One IsChecked=True>Option 1</RadioButton>

        <RadioButton GroupName=One IsChecked=False>Option 2</RadioButton>

      </StackPanel>

    </GroupBox>

    <GroupBox>

      <StackPanel>

        <RadioButton GroupName=Two IsChecked=False>Option 3</RadioButton>

        <RadioButton GroupName=Two IsChecked=True>Option 4</RadioButton>

      </StackPanel>

    </GroupBox>

  </StackPanel>

Produces

wpf046

If you look carefully, you can see thin lines surrounding each set of buttons. You can go further and add headers to the GroupBox frame.

  <GroupBox Header=Group One>

Adds a header to the first box.

wpf047

You can even go further, and add true content to the header area. Here we’ll add a button.

  <StackPanel>

    <GroupBox Header=Group One>

      <StackPanel>

        <RadioButton GroupName=One IsChecked=True>Option 1</RadioButton>

        <RadioButton GroupName=One IsChecked=False>Option 2</RadioButton>

      </StackPanel>

    </GroupBox>

    <GroupBox>

      <GroupBox.Header>

        <Button>Group Two</Button>

      </GroupBox.Header>

      <StackPanel>

        <RadioButton GroupName=Two IsChecked=False>Option 3</RadioButton>

        <RadioButton GroupName=Two IsChecked=True>Option 4</RadioButton>

      </StackPanel>

    </GroupBox>

  </StackPanel>

Gives us

wpf048

Using a GroupBox can be a simple but visually appealing way to organize your visual elements.

The WPF RadioButton

Being an old VB coder, I fondly remember this control as the Option Button, but these days it’s been renamed to the RadioButton. They are used to present the user with a set of mutually exclusive options.

Adding them is simple, just use the <RadioButton> tag. For the button you wish to be the default (if any) you add the IsChecked=”true” flag.

WPF adds a huge improvement over it’s predecessor. No longer are you forced to use a container control to group your radio buttons. Instead, WPF adds a GroupName property. Take a look at this example:  

  <StackPanel>

    <RadioButton GroupName=One IsChecked=True>Option 1</RadioButton>

    <RadioButton GroupName=One IsChecked=False>Option 2</RadioButton>

    <RadioButton GroupName=Two IsChecked=False>Option 3</RadioButton>

    <RadioButton GroupName=Two IsChecked=True>Option 4</RadioButton>

  </StackPanel>

wpf045

Note the GroupName, for the first two items, I’ve set it to One, on the second two it’s Two. This means you can change Option 1 and Option 2 without affection Options 3 or 4. Go ahead and run the app, click on the options a bit and watch what happens.

In my example, I only entered two items for each, the actual number you can do is limited only by the space you have available on your Window.

The C# code for checking the value is identical to yesterday’s code for the CheckBox so I won’t reiterate it, all you have to do is look at the IsChecked property.

One last point, event though adding containers are not required to separate the option groups, it’s important to provide some sort of visual indicator so the user knows which groups do what.

The WPF CheckBox

Checkboxes in WPF are very straight forward controls, very similar to their WinForms predecessors. Adding them is a simple matter of using the <CheckBox> tag. Likely you’ll need to give each a name, so you can reference it in code.

There are also two properties that may be of use to you. First is IsChecked, this is set to true or false and as you might expect sets whether the check is in the box or not. The second is IsEnabled, and determines whether users may use the control. You can combine these in any combination, as you can see in the example below.  

    <StackPanel>

      <CheckBox Name=cbxOne IsChecked=False>Check Box One</CheckBox>

      <CheckBox Name=cbxTwo IsChecked=True>Check Box Two</CheckBox>

      <CheckBox Name=cbxThree IsChecked=False IsEnabled=False>Check Box Three</CheckBox>

      <CheckBox Name=cbxFour IsChecked=True IsEnabled=False>Check Box Four</CheckBox>

      <Button Name=btnShowMe Click=btnShowMe_Click>Show Me</Button>

    </StackPanel>

This little bit of code produces this attractive dialog:

wpf044

Note I’ve added a button, the purpose of the button is to show you a dialog that determines whether a box is checked.  

    void btnShowMe_Click(object sender, RoutedEventArgs e)

    {

      StringBuilder sb = new StringBuilder();

 

      if (cbxOne.IsChecked==true)

        sb.AppendLine(“Box One is Checked”);

      else

        sb.AppendLine(“Box One is Unchecked”);

 

      if ((bool)cbxTwo.IsChecked)

        sb.AppendLine(“Box Two is Checked”);

      else

        sb.AppendLine(“Box Two is Unchecked”);

 

      MessageBox.Show(sb.ToString(), “CheckBox”);

 

    }

Here you can see all that’s needed is to check (no pun intended) the IsChecked property. You may wonder why I had to use the bool case in the cbxTwo example. It turns out the IsChecked is actually of type bool? and not bool. A bool? is a bool that can hold a null value in addition to true/false.

In the cbxOne area, the .Net Framework can handle converting the bool? to a bool before it does the equal. In the second example, .Net needs that conversion to be made explicit.

Go ahead and run the app, check the boxes and click the Show Me to see the messages. I didn’t bother to repeat the same code for boxes three and four, since they are disabled, but they’d work the same way.

The WPF CheckBox is something you should check out! (OK, that time the pun was intended! ;-)

The WPF ComboBox

The other major listing control to cover is the ComboBox. It turns out that they are almost identical to ListBoxes. This simple code will add a combo box to your container (I’m using a StackPanel) and put two items into it.

      <ComboBox>

        <ComboBoxItem>Item 1</ComboBoxItem>

        <ComboBoxItem>Item 2</ComboBoxItem>

      </ComboBox>

Running will produce the predictable window with a drop down combo box and two items. If you want the user to be able to edit or enter his own text, you will need to set the IsEditable property to true and IsReadOnly to false in the <ComboBox> header.

Also like the ListBox, the ComboBox can contain complex items.

      <ComboBox>

        <ComboBoxItem>

          <StackPanel Orientation=Horizontal>

            <TextBlock Width=100>Anna</TextBlock>

            <Image Source=D:\Presentations\100Anna.jpg Height=100 />

          </StackPanel>

        </ComboBoxItem>

        <ComboBoxItem>

          <StackPanel Orientation=Horizontal>

            <TextBlock Width=100>Raven</TextBlock>

            <Image Source=D:\Presentations\100Rave.jpg Height=100 />

          </StackPanel>

        </ComboBoxItem>

        <ComboBoxItem>

          <StackPanel Orientation=Horizontal>

            <TextBlock Width=100>Ammie</TextBlock>

            <Image Source=D:\Presentations\100Ammie.jpg Height=100 />

          </StackPanel>

        </ComboBoxItem>

        <ComboBoxItem>

          <StackPanel Orientation=Horizontal>

            <TextBlock Width=100>Kids</TextBlock>

            <Image Source=D:\Presentations\100Kids.jpg Height=100 />

          </StackPanel>

        </ComboBoxItem>

 

      </ComboBox>

wpf040

Note from the image above, if the contents of the drop down are too big it wil drop below the bottom of your current Window. Additionally, if you use automatic sizing the combo box will adjust itself rather oddly depending on the contents. For that reason, you may wish to set a default width rather than letting the combo box do it for you.

So how do we get data back out of the ComboBox? Well, if all we have is text, we can do just like we did with the ListBox, convert the selected item to a combo box item and get it’s Content.ToString property. But what if it’s like the above example, a mixture of text and images? Well we have to dig just a little, but it’s not that difficult if you understand the tree WPF creates.

  <StackPanel>

    <ComboBox Name=myComboBox  >

      Item Data Omitted for Brevity

    </ComboBox>

    <Button Name=myButton Content=OK Click=myButton_Click />

  </StackPanel>

Note I made two changes. First I added a name to the ComboBox, that way I can address it in code. Next I added a simple button control, we’ll use it to show what is currently selected. Just for the fun of it, I used the Content tag instead of placing it between the <Button></Button> tags, you may run across that form of syntax at some point and should be aware of it.

Now we need to add a little code to the myButton_Click event.

    public void myButton_Click(object sender, RoutedEventArgs e)

    {

      ComboBoxItem cbi = myComboBox.SelectedItem as ComboBoxItem;

      if (cbi != null)

      {

        StackPanel sp = cbi.Content as StackPanel;

        TextBlock block = sp.Children[0] as TextBlock;

        MessageBox.Show(“You picked “ + block.Text);

      }

      else

      {

        MessageBox.Show(“You haven’t picked anything yet”);

      }

    }

First, I got the current ComboBox item, and stored it in the cbi variable. I then check to see if it’s null, which it will be if the user hasn’t selected anything. If it is, we can show them the traditional “hey dummy” message, as I did in the else clause.

If you recall, the contents of the ComboBoxItem are a StackPanel control, so next I get a reference to it in the sp variable.

Next, I suppose I could iterate of the Children of the StackPanel, but since I know that the TextBlock I want is the first child, I’ll simply reference it directly as element zero and return it to the block variable.

Finally we can get to the actual text for the row the user picked. We can simply reference the TextBlock’s text property in the message box. When the app is run, you should see these results:

wpf041

The same techniques I use here would also be applicable to the ListBox we’ve seen previously, simply replace ComboBoxItem with ListBoxItem.

The WPF ComboBox can be quite useful for providing a compact way for users to select complex items.

Downloading a Virtual PC Image of Visual Studio 2008 Beta 2

During last week’s WPF class, several of my coworkers expressed an interest in using the 2008 edition to experiment with WPF. They were concerned installing the beta on their production box could damage their boxes, even though in theory part of the beauty of .Net is the ability to run multiple versions of the framework side by side.

To alleviate those fears, Microsoft has provided a Beta of 2008 already in a ready to run Virtual PC. First, you’ll need to have Microsoft Virtual PC 2007 installed on your box. If you don’t, you can grab a copy from

http://www.microsoft.com/downloads/details.aspx?familyid=04D26402-3199-48A3-AFA2-2DC0B40A73B6&displaylang=en

(Even though the instructions indicate it should work with VPC 2004 SP1 or Virtual Server, I haven’t tried it with them. Virtual Server should be fine, but I would highly suggest upgrading your VPC 2004 to 2007 if you haven’t done so already, there’s lots of nice new features that make it worth the effort.)

Now you can grab the 2008 image. You will actually need two sets of files, the base image and the 2008 Beta 2 image. You can download the 2008 Beta 2 from

http://www.microsoft.com/downloads/details.aspx?FamilyID=3b72271c-e996-4989-898d-72d684966ce6&DisplayLang=en

The download is in the form of 7 files, the first is an exe and the rest are rar files. Download all 7 to a folder and run the exe, and it will combine all 7 to create the virtual pc image.

Make sure to read all of the instructions on this page! The user ID and password to login to the virtual image, along with a link to the needed base image, are contained in the instructions!

Now you need the Orcas base image. If you read through the instructions you saw the link to the compressed file, right above the user id / password. Right click on the link and “Save As…” to the same folder where you saved the other items. Run it to uncompress the base image.

OK, in a folder you should now have OrcasBeta2_VSTS.vmc, OrcasBeta2_VSTS.vhd, Base01.vmc, and Base02.vhd. I also copied the user id and password from the above linked page and saved it in a text file called “Orcas Beta 2 user id and password.txt”, just so I could remember it easily.

When you login, it tells you that the password expries today, and asks if you wish to change it. I’ve always just said no, and it seems to work fine, but you are welcome to change it if you want.

When you shut down the Virtual PC, you will be prompted first for why you are shuting down. This is a Windows Server 2003 prompt, I just select “Other (Planned) under the option and put an ‘x’ for the comment. Once you do the OK button will be enabled.

Next, Virtual PC prompts you, to see if you want to commit your changes or abandon them. If you select “Commit changes to the virtual hard disk”, any changes you made will be saved and ready for next time. If you choose “Delete undo disk changes”, everything you did during that session will be lost forever.

Since it’s just a virtual image, I usually pick commit, but if you have really hosed things up you might want to know about the Delete option.

All of the software I’ve mentioned here is free, so there’s no reason why you can’t run this at home, even if you don’t have an MSDN subscription. Be warned, although Microsoft hasn’t specified a date I would think the image will expire not long after the release of the full Visual Studio 2008 product.

Using the virtual image will allow you to experiment with WPF, as well as the new 2008 features in a safe, risk free environment.

Note: If you want to use Visual Studio 2005 to write WPF (as well as other .Net 3.0 projects), I have documented the bits you need to download in this post:

http://arcanecode.wordpress.com/2007/08/20/installing-the-wpf-bits/

More WPF Resources

Walt Ritscher of Wintellect was in our offices this week, teaching us WPF. Great guy, really knows his stuff, and has a blog well worth checking out at

http://wpfwonderland.wordpress.com/

There’s a great training site on XAML/Silverlight called Nibbles. Be warned the site is done in Silverlight, so for now you’ll need to use IE and have Silverlight installed.

http://www.nibblestutorials.net/

Fellow southern blogger Keith Rome has a blog on WPF and Silverlight:

http://www.mindfusioncorp.com/weblog/

Tim Sneath has a lot of good info on Silverlight:

http://blogs.msdn.com/tims/default.aspx

Finally, this isn’t specifically a WPF resource, but our regional developer evangelist and all around swell guy Doug Turnure has a posting of .Net bloggers in Georgia, Alabama, and Mississippi:

http://blogs.msdn.com/dougturn/archive/2007/08/19/most-popular-bloggers-in-georgia-alabama-and-mississippi.aspx

Update: September 15, 2007 – I wanted to add one more resource. I picked up Pro WPF by Matthew MacDonald (http://www.amazon.com/Pro-WPF-Windows-Presentation-Foundation/dp/1590597826/ref=pd_bbs_3/104-6226587-5048708?ie=UTF8&s=books&qid=1189884771&sr=8-3 or http://tinyurl.com/2pw8z9) I have several of Matthew’s books and have always enjoyed his writing, and this book appears to be another winner. It’s a good companion to the Adam Nathan book, as each book goes into some areas the other doesn’t.

Pro WPF

TouchCursor 1.3 Released

If you’re not familiar with TouchCursor, it’s a great utility for turning the “home” keys (keys like i, j, k, l, etc) into up arrow, left, down, right, etc. For my initial review, see my post at http://arcanecode.wordpress.com/2007/05/11/arcane-software-touchcursor-for-us-keyboard-geeks/

Now, I have an incredible story of customer service to share. Late last Saturday night I was on the forums on Scott Hanselman’s site ( http://www.hanselman.com/forum/ ) and was having a ‘conversation’ with someone in the Productivity Tools area on TouchCursor. I wondered aloud how hard it would be to change the activiation key from the spacebar to something user assignable. So I shoot off an e-mail to the support site and head off to bed.

When I wake up Sunday, I have an e-mail from the author saying he didn’t think it would be all that hard, it’d be more work getting all the help updated. I thanked him and since I’d made the suggested offered to do any beta testing. And off I went thinking it’d be a while.

I get home from work Monday, to find an e-mail with a link to the Beta version of TouchCursor! Gleefully I download and test away, finding no issues and trying a variety of activation keys.

And what a list! Check this out, and this is just a sample:

touchcursor_activation_options

For now I’m trying caps lock as my activation key because I seldom use it, and it’s close to my pinky just between shift and tab. Seems the most natural so far. But to get back to my story…

I reported my results back, and on Wednesday morning got the e-mail the new version had been released! Talk about swift response.

Take a look for yourself, download the current version at http://touchcursor.com/ . It’s shareware, so you can try it before you buy, and buying is pretty painless, a mere twenty dollars (US). There’s even a “no install” version, in case you want to run it as a portable app from your USB drive.

TouchCursor has made it to the short list of must have tools in my arsenal. After service packs, virus protection and firewalls it’s one of the first things that gets installed. I challenge you to try it for 30 days and see if you don’t get hooked!

Standard Disclaimer: I have no financial association with Rare Pebble Software, other than having purchased the TouchCursor software. Just a very satisfied customer.

Scrolling in WPF

I realized in my last post on WPF ListBoxes I overlooked a basic concept, how to make the ListBox scroll when there’s more items than can fit. Let’s return to the code from Monday, but resize the Window so only the top two pictures show. Running the app doesn’t change anything, the top two still show with no way to scroll down.

It turns out this is quite easy to fix, in several ways. First, many controls such as the containers (WrapPanel, for example) or listing controls (ListBox, TreeView to name two) have built in ScrollBars. The reason they did not appear in our example is because the ListBox was inside a StackPanel, and the StackPanel extended below the window edge. As such the ListBox didn’t realize it wasn’t fully displayed.

The simple way to fix then, is to remove the StackPanel and have the ListBox be the only thing on the window. As soon as we do, Vertical Scrollbars automatically appear.

wpf037

Next, if we wanted to, we could wrap the entire panel in <ScrollViewer> tags. ScrollViewer is a XAML tag that will take whatever is inside and move with scrollbars, as needed. What you need to understand though is you’re moving the entire StackPanel, not just the ListBox.

To demonstrate, let’s add a text block to stack panel, just above the list box.  

  <ScrollViewer>

    <StackPanel>

      <TextBlock Background=LightBlue>Pick A Row</TextBlock>

      <ListBox Name=lbxCool>

      <!– ListBoxItems omitted for brevity –>

      </ListBox>

    </StackPanel>

  </ScrollViewer>

Now if you run the program, you’ll see the text block scrolls up with the list box.

wpf038

Note the text block has indeed scrolled up off the screen.

The best way to solve this would be to move the contents to a Grid. The grid sizes correctly take up the space, and allows the list box to automatically display it’s scrollbars.  

  <Grid Name=myGrid >

    <Grid.RowDefinitions>

      <RowDefinition Height=20></RowDefinition>

      <RowDefinition></RowDefinition>

    </Grid.RowDefinitions>

    <TextBlock Grid.Row=0 Background=LightBlue>Pick A Row</TextBlock>

    <ListBox Name=lbxCool Grid.Row=1>

      <!– ListBoxItems omitted for brevity –>

    </ListBox>

  </Grid>

wpf039

If you need horizontal scrollbars, you can add the  ScrollViewer.HorizontalScrollBarVisibility=Visible” tag to the ListBox declaration.

And there you go, a few ways you can add scrolling to your ListBox, or to an entire container using the <ScrollViewer>.

Tallahassee, FL Code Camp III

I’m pleased to announce I’ll be speaking at Tallahassee Code Camp III. The event takes place in Tallahassee Florida on Saturday, September 22nd. I’ll be speaking on SQL Server Compact Edition.

For more info, please visit their site at:

http://codecamp.tlhdotnet.net/

Hope to see you there!

Follow

Get every new post delivered to your Inbox.

Join 93 other followers