Category Archives: Visual Studio

Fun with Silverlight

I spent my weekend learning Silverlight, writing a game in Silverlight 1.0. I did all of my project in Visual Studio 2005 and using Silverlight 1.0 runtime. It’s a pretty simple game, I’ll reveal more later in the week and eventually post all the code and blog about the development experience.

The biggest pain was not in the XAML, that was pretty straight forward, it was all the [explicative deleted] Javascript. It’s been a few years since I did any Javascript so I had a lot of relearning to do.

If you are want to look into Silverlight coding, I highly recommend you go to the Getting Started site on Silverlight’s website. http://silverlight.net/getstarted/Default.aspx

After you download all the bits, go to the very bottom of the page under “3. Learn from Samples and Documentation”. Go read all the QuickStarts!!! Very good code samples here to get you started.

After you go through the code samples, there are some really good focus videos at http://silverlight.net/Learn/learnvideos.aspx . These helped me over quite a few hurdles.

The documentation was also very helpful in looking up how some properties worked, going back and forth between Java and Xaml. http://msdn2.microsoft.com/en-us/library/bb188743.aspx

There will be more to come on this subject to be sure, but over the next few days I’ll be preparing my presentaion for Alabama Code Camp 5 on SQL Server 2005 Full Text Searching,

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 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 (https://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!

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.

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>.

WPF ListBox

Another old and faithful control that has made the transition to WPF is the ListBox. It’s pretty simple to create a ListBox, and load some values into it.

      <ListBox>

        <ListBoxItem>Item 1</ListBoxItem>

        <ListBoxItem>Item 2</ListBoxItem>

        <ListBoxItem>Item 3</ListBoxItem>

      </ListBox>

Of course the ListBox isn’t much good if you can’t get the value out of it. To do that we’ll have to add a few things.

      <Button Name=ShowSelected Click=ShowSelected_Click>Show Selected</Button>

      <ListBox Name=lbxDemo>

        <ListBoxItem>Item 1</ListBoxItem>

        <ListBoxItem>Item 2</ListBoxItem>

        <ListBoxItem>Item 3</ListBoxItem>

      </ListBox>

 

Here I added a button that would show which item was selected, then I had to give the ListBox a name we could refer to. Following techniques I’ve previously laid out (https://arcanecode.wordpress.com/2007/09/07/adding-wpf-controls-progrrammatically/) I added a click event for the button.

Now, you might think you could just enter something like

      MessageBox.Show(“You Selected “ + lbxDemo.SelectedValue);

And get a message back. But instead what you get is:

 

wpf033

This is because the SelectedValue is actually a ListBoxItem, and not a value. Instead you need to get the content of the ListBoxItem thusly:  

      ListBoxItem lbi = (lbxDemo.SelectedItem as ListBoxItem);

      MessageBox.Show(“You REALLY selected “ + lbi.Content.ToString());

Now you’ll see:

wpf034

Note that you’re not just restricted to ListBoxItems. I could, for example use checkboxes:

      <ListBox Name=lbxCheckMe>

        <CheckBox>Item 1</CheckBox>

        <CheckBox>Item 2</CheckBox>

        <CheckBox>Item 3</CheckBox>

        <CheckBox>Item 4</CheckBox>

      </ListBox>

wpf035

Like other controls, you can stack other controls inside the contents of a ListBoxItem. Let’s get a little fancy, and create a list box with both text and images.

      <ListBox Name=lbxCool>

        <ListBoxItem>

          <StackPanel Orientation=Horizontal>

            <TextBlock Width=100>Anna</TextBlock>

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

          </StackPanel>

        </ListBoxItem>

        <ListBoxItem>

          <StackPanel Orientation=Horizontal>

            <TextBlock Width=100>Raven</TextBlock>

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

          </StackPanel>

        </ListBoxItem>

        <ListBoxItem>

          <StackPanel Orientation=Horizontal>

            <TextBlock Width=100>Ammie</TextBlock>

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

          </StackPanel>

        </ListBoxItem>

        <ListBoxItem>

          <StackPanel Orientation=Horizontal>

            <TextBlock Width=100>Kids</TextBlock>

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

          </StackPanel>

        </ListBoxItem>

      </ListBox>

    </StackPanel>

(Note you can use any images, I used a few of my kids and wife.) The result is this:

wpf036

This covers some basics on using a ListBox, enough to get you started with your own lists.

Adding WPF Controls Progrrammatically

On August 29th I wrote a posting about the StackPanel (https://arcanecode.wordpress.com/2007/08/29/stacking-the-deck-with-the-wpf-stackpanel/). A commentor asked “how do you add controls programmatically?” Good question, and it turns out to be quite easy.

Let’s create a sample app, and add a new window. I named mine AddControls. Here’s the XAML:

<Window x:Class=WPFSample001.AddControls

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

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

    Title=AddControls Height=114 Width=212

    >

  <StackPanel Name=splMain>

    <Button Name=btnAddMore Click=btnAddMore_Click>Add Another</Button>

  </StackPanel>

</Window>

And here’s what it looks like:

wpf029

A few things I’d like to point out. I’ve given a name to the StackPanel, so it can be manipulated in our C# code. I also added a handler for the Click event for the button, btnAddMore_Click. I also named the button, although it really wasn’t necessary for this sample.

OK, make sure to build the app so intellisense will work, then let’s jump to the C# code behind. (You may get an error about the click handler for the button not being found, that’s fine just ignore it.)

First, we’ll create an event handler for the button, passing in the sender and routed event args, like I discussed yesterday (https://arcanecode.wordpress.com/2007/09/05/the-wpf-button/) . Then, all we have to do is create a button control and add it to the children collection of the StackPanel, like so: 

    public void btnAddMore_Click(object sender, RoutedEventArgs e)

    {

      System.Windows.Controls.Button newBtn = new Button();

      newBtn.Content = “A New Button”;

      splMain.Children.Add(newBtn);

    } 

 

Note in this example I used the fully qualified System.Windows.Controls, I did that just to be explicit where the Button came from. After a new button is created, I set it’s Content property, which in this case will be the text on the button.

In the final line, I add it to the children collection of the StackPanel. When you run it, and press the “Add Another” Button, you will see:

wpf030

Now we have a new problem. We’ve added a button to the StackPanel, but clicking on it does no good as we haven’t tied it to an event handler. Turns out that’s pretty easy too.

    public void btnAddMore_Click(object sender, RoutedEventArgs e)

    {

      System.Windows.Controls.Button newBtn = new Button();

      newBtn.Content = “A New Button”;

      newBtn.Click += new RoutedEventHandler(newBtn_Click);

      splMain.Children.Add(newBtn);

    }

 

What I did was use a delegate. I added a new RoutedEventHandler and tied it to the click event. The code for the event is in a method named newBtn_Click:

    private void newBtn_Click(object sender, RoutedEventArgs e)

    {

      MessageBox.Show(“New Button Clicked!”, “I got pressed.”);

    }

 

The signature for the event handler has to match the signature for a Click event, since that’s what we’re routing to. Here, all I do is display a message box just so you can see something got done. Run it again and press the Add Another button, and the “A New Button” should appear. Press the new button and you should see a message box.

wpf031

Finally, I want to be clear you can use this technique to add any sort of control. Here I’ve added a Label as well as a button:

    public void btnAddMore_Click(object sender, RoutedEventArgs e)

    {

      System.Windows.Controls.Button newBtn = new Button();

      newBtn.Content = “A New Button”;

      newBtn.Click += new RoutedEventHandler(newBtn_Click);

      splMain.Children.Add(newBtn);

 

      System.Windows.Controls.Label newLbl = new Label();

      newLbl.Content = “Hi Mom!”;

      splMain.Children.Add(newLbl);

    }

wpf032

I could have created the entire form in C# (or VB.Net) code, adding the StackPanel directly to the “this” object. However, that gets a bit laborious, and I wouldn’t recommend it as a general practice.

WPF Text Controls

WPF Supports several types of text controls for displaying text on your WPF Windows. First is the TextBlock. The text block is very simple, it just displays whatever text you enter on the window. A very basic control for display of titles and what not.

Next up the food chain is the Label. The Label has several advantages over the TextBlock. First, you can change the contents of a label at run time. Let’s take this simple example. First, let’s add a Label to the Button window we created yesterday. In case you missed it, here’s the XAML:

<Window x:Class=WPFSample001.ButtonWindow

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

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

    Title=Buttons Height=83 Width=194

    >

  <StackPanel>

    <StackPanel>

      <Button Click=Baby_Click>Click Me Baby!</Button>

      <Label Name=lblMyLabel>Before the click</Label>

    </StackPanel>

  </StackPanel>

</Window>

Notice we’ve added a Name property to the Label. This is so we can address it by a specific name within our C# code. After you add the Label here’s an important step: build the application (Build, Build Solution on the menus). You need to do the build so the control will show up in intellisense once you get to the C# window. You can still write the code and make it work, but the intellisense makes it so much easier it’s worth the few seconds to run a build.

OK, you’ve built the app, go to the C# code behind. Locate the event handler for Baby_Click and insert a line to alter the content of the label:

    private void Baby_Click(object sender, RoutedEventArgs e)

    {

      MessageBox.Show(“Hi There!”,“Baby was clicked!”);

    }

If you’ve done traditional WinForms coding in the past, this syntax should look pretty familiar to you. Running the app will produce the expected result. Here’s the before you click:

wpf024

And here’s shot after you click the button:

wpf025 

If you remember the “old days” of WinForms program, you may remember it was possible to use a label as an access key for a textbox. You can still do this with WPF, it just takes a little code. Let’s create a new form, call it LabelForm.

To the LabelForm, add a grid with two rows and two columns, then add two labels and two text boxes. Here’s a sample:

<Window x:Class=WPFSample001.LabelWindow

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

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

    Title=Label Window Height=95 Width=252

    >

  <Grid>

    <Grid.RowDefinitions>

      <RowDefinition></RowDefinition>

      <RowDefinition></RowDefinition>

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

      <ColumnDefinition Width=*></ColumnDefinition>

      <ColumnDefinition Width=2*></ColumnDefinition>

    </Grid.ColumnDefinitions>

    <Label Target={Binding ElementName=FirstBox} Grid.Row=0 Grid.Column=0>_First Box</Label>

    <Label Target={Binding ElementName=SecondBox} Grid.Row=1 Grid.Column=0>_Second Box</Label>

    <TextBox Name=FirstBox Grid.Row=0 Grid.Column=1 />

    <TextBox Name=SecondBox Grid.Row=1 Grid.Column=1>

    </TextBox>

  </Grid>

</Window>

Notice two things. First, we had to give our textboxes a name, via the Name property. Second is the Target property. Inside the property you see curly braces with the word Binding. This is an example of a Markup Extension. Markup Extensions are special WPF classes that are created by the XAML Parser and bound to the item (in this case a Label) we are creating. The items with equal signs, such as ElementName in this example, are named parameters for the Binding class.

I realize that’s a lot of concept in a little space, it might be easier to simply thing of the items in curly braces as a way to define special functionality within WPF.

In this example, the Binding extension binds the label to the textbox passed in the ElementName. When you run the above example, and press the alt key you will see the F (in First) and S (in Second) become underlined.

wpf026 

Pressing F or S will jump you between the text boxes. It’s a bit hard to visualize, but try running the code yourself and you’ll see what I mean.

There’s one more text control I want to mention, the ToolTip. The easy way to create a ToolTip is to simply add it as an item when you create a control. Let’s add a ToolTip to the text boxes.

    <TextBox Name=FirstBox Grid.Row=0 Grid.Column=1 ToolTip=The First Box/>

    <TextBox Name=SecondBox Grid.Row=1 Grid.Column=1 ToolTip=Second Box />

As you can see all I had to do is add a ToolTip= and it’s added.

wpf027 

You can also declare the tooltip as a content item of the main control, using this syntax:

    <TextBox Name=SecondBox Grid.Row=1 Grid.Column=1 >

      <TextBox.ToolTip>

        Second Box

      </TextBox.ToolTip>

    </TextBox>

Why use this second way? Well remember, since it’s content you can get pretty complex with what you declare. Try this out:

    <TextBox Name=SecondBox Grid.Row=1 Grid.Column=1 >

      <TextBox.ToolTip>

        <StackPanel>

          <Label Background=Red Foreground=White>Help Title</Label>

          <TextBlock>This is some descriptive text for the tooltip that tells what it does.</TextBlock>

        </StackPanel>

      </TextBox.ToolTip>

    </TextBox>

Run the app and hover over the second box, and you should see something like this:

wpf028 

Now you begin to gleam a little of the power of WPF, the ability to combine controls and create complex interfaces quickly and easily.

The TextBlock, Label, and ToolTip are the three text controls you can use to display info to your users.

The WPF Button

It’s finally time to quit talking about WPF Containers, and start getting into some of the controls. The first one we’ll hit is the hardest working control in show business, the WPF Button.

I’m sure you’re thinking “what’s so hard about a button?” After all, you slap a button tag on a form like this:

<Window x:Class=WPFSample001.ButtonWindow

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

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

    Title=Buttons Height=83 Width=194

    >

  <StackPanel>

    <Button>Click Me Baby!</Button>

  </StackPanel>

</Window>

I created a window named ButtonWindow, and added a StackPanel with one button. This will give you something like this:

wpf022 

Simple and easy, but there’s much more to the button. First off, you can change the point at which the click event actually fires. The button has a ClickMode property you can set that controls this. The default is “Release”, which pretty much acts as you expect. The other two values are Press and Hover. When the button looks like a button, you would probably want to use release, however it’s possible to morph the button to a graphic of some sort. In that case it might be more intuitive to fire when the button is first pressed, and not when the user releases the mouse.

Speaking of the click, just how do you react to a WPF event in C# anyway? Good question, I thought you’d never ask.

All you have to do is indicate the name of the event you want to respond to, then pass in a string value which is the name of the method to route to. In your XAML, alter the Button line to look like this:

      <Button Click=Baby_Click>Click Me Baby!</Button>

 

Now we need a little C# code to respond. Open the code behind class (in my case ButtonWindow.xaml.cs). Now add a new method:

    private void Baby_Click(object sender, RoutedEventArgs e)

    {

      MessageBox.Show(“Hi There!”,“Baby was clicked!”);

    }

WPF Events must match a certain signature. They will need to have a return type of void (or will be a SUB for you VB folks). They will also accept two arguments, an object that indicates what the sender of the event was, and a set of event arguments encased in the RoutedEventArgs variable, traditionally called e.

Here were doing something pretty simple, and showing a message box.

wpf023 

There’s lots more we can do with the button, but we’ll save that for a more advanced day. Today I just wanted to cover the basics of the button, as it’s one control that will likely see a lot of use in your toolbox.

Wrapping up containers with the WPF WrapPanel

Originally I hadn’t planned to mention the WrapPanel, because in my view it’s not an overly useful control. I have a hard time imagining when you might want to use it, but in playing with it I actually came up with one scenario, perhaps someone will be able to offer some more.

Using the control is easy, simply put <WrapPanel> and it’s ending tag in a Window or Page, then put the controls inside you want. Then as you resize the window, the controls inside will automatically shift around to make use of the available space.

For today’s example, create the WrapPanel tags, and inside put 8 buttons.

  <WrapPanel>

    <Button Width=50>1</Button>

    <Button Width=50>2</Button>

    <Button Width=50>3</Button>

    <Button Width=50>4</Button>

    <Button Width=50>5</Button>

    <Button Width=50>6</Button>

    <Button Width=50>7</Button>

    <Button Width=50>8</Button>

  </WrapPanel>

I then stretched out the window so you can see all 8 horizontally:

wpf019 

Now if I simply resize the window a bit, you’ll see the controls rearrange themselves automatically:

wpf020

And of course I can make them all go vertical if I want:

wpf021 

The one way I can think this might be useful is if you were to create a floating toolbar. In that form it might be handy to have the toolbar buttons moving around. Odds are there are better ways to create a floating toolbar, but if you needed something simple this might be an answer for you.

Other than that one example I can’t think of a lot of uses for it, but if you know some by all means post a comment. Meanwhile at least you’ll be familiar with the WrapPanel container.

The WPF DockPanel

The next container control we need to look at is the DockPanel. It’s a special use control, the individual controls placed inside the DockPanel control can be docked to one of the four sides. Let’s look at an example.

  <DockPanel>

    <Button DockPanel.Dock=Left>Left</Button>

    <TextBlock>Rest of it</TextBlock>

  </DockPanel>

(Note in the code examples I’ve omitted the WINDOW tag, that way you can use this in either Visual Studio or XamlPad) This code produces

wpf016

As you can see, the docked button takes up the entire left side. We could have also set the Dock property to Top, Right, or Bottom. We can have multiple controls with dock property. The order in which they are added is important.

The first control will take up all the space on the docked side first. Then each control will take up the remaining space on the side they are docked on. If multiple controls are docked to the same side, they will be stacked up in the order they were added, the first control being the outermost.

The remaining control added without a dock property will be placed in the middle, and take up all the remaining space. Let’s look at a quick sample that is somewhat realistic.

  <DockPanel>

    <StackPanel DockPanel.Dock=Left>

      <Label>MAIN MENU</Label>

      <Button>Top Left</Button>

      <Button>Left 2</Button>

      <Button>Left 3</Button>

      <Button>Bottom Left</Button>

    </StackPanel>

    <StackPanel DockPanel.Dock=Top Orientation=Horizontal>

      <Label>Secondary Menu</Label>

      <Button>Top Btn 1</Button>

      <Button>Top Btn 2</Button>

    </StackPanel>

    <Grid>

      <Grid.RowDefinitions>

        <RowDefinition></RowDefinition>

        <RowDefinition></RowDefinition>

        <RowDefinition></RowDefinition>

      </Grid.RowDefinitions>

      <Grid.ColumnDefinitions>

        <ColumnDefinition></ColumnDefinition>

        <ColumnDefinition Width=2*></ColumnDefinition>

      </Grid.ColumnDefinitions>

      <Label Grid.Row=0 Grid.Column=0 HorizontalAlignment=Right>First Name:</Label>

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

      <Label Grid.Row=1 Grid.Column=0 HorizontalAlignment=Right>Last Name:</Label>

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

    </Grid>

  </DockPanel>

Will produce this lovely window:

wpf017

Now you can begin to glean the usefulness of the DockPanel. You should note because the StackPanel with “Secondary Menu” in it is listed in the XAML after the MAIN MENU StackPanel, it is to the right.

If you simply move the secondary StackPanel above the MAIN MENU one in the XAML, you’ll see the Secondary Menu now goes all the way across, and the Main Menu is now playing second fiddle, thusly:

wpf018

You can add more items to the other sides as well, for example you could put some sort of status bar across the bottom, or another panel over on the right.

As you can see, while it’s not a container control you’ll use every day, the DockPanel can be exteremely useful and flexible in Window design.

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.