XAML Wrap Panel Tip

I recently need to display a set of items in a ListBox in a grid that wrapped based on the width of the ListBox. Simple right?

My XAML started out something like this:

<Grid x:Name="LayoutRoot">
        <ListBox Margin="170,57,134,150">
          <ListBox.ItemsPanel>
             <ItemsPanelTemplate>
                  <WrapPanel/>
              </ItemsPanelTemplate>
          </ListBox.ItemsPanel>
           <Button Width="75" Content="Button"/>
           <Button Width="75" Content="Button"/>
           <Button Width="75" Content="Button"/>
           <Button Width="75" Content="Button"/>
           <Button Width="75" Content="Button"/>
        </ListBox>
    </Grid>

and it produced the following result:

Notice how the 5th button is cutoff and is not wrapping. For awhile I was stumped and started looking at ways to modify the WrapPanel itself.  One solution might be to give the WrapPanel a fixed width, but that is not very elegant. The solution I landed on (and what I believe to be the correct solution) is to disable the Horizontal Scrolling functionality on the ListBox.

The XAML changes to this:

<Grid x:Name="LayoutRoot">
        <ListBox Margin="170,57,134,150" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
          <ListBox.ItemsPanel>
             <ItemsPanelTemplate>
                  <WrapPanel/>
              </ItemsPanelTemplate>
          </ListBox.ItemsPanel>
           <Button Width="75" Content="Button"/>
           <Button Width="75" Content="Button"/>
           <Button Width="75" Content="Button"/>
           <Button Width="75" Content="Button"/>
           <Button Width="75" Content="Button"/>
        </ListBox>
    </Grid>

The attached ScrollViewer.HorizontalScrollbarVisibility property tells the Scrollviewer the ListBox (and thus its containing panel) not to scroll horizontally. Thus the WrapPanel doesn’t assume it has an infinite width (this is a non-developer interpretation of what is going on).

The result is just what I want:

Hope this helps!

A Professional Introduction

I have been meaning to, for awhile, start writing about bits and pieces of what I do at work on a day to day basis. Trouble is, most of what I do at work cannot be revealed until we release our product.

I work at Autodesk, in Marin County, as a Senior Product Designer on the AutoCAD team. For a certain portion of the product I am in charge of designing the user experience - everything from UI layout to business logic.

My education entails a BS in Computer Science so my first passion, I guess you could say, would be coding. I graduated near the top of my class, and really did like coding, but the dot com bubble had just burst (2002) and jobs were harder to find.

I had already been an intern at Autodesk since high school and eventually a position in QA opened up. I took that and eventually moved to product design making the 'decision' (although nothing is ever definite) to forego a career coding away.

But I still loved tinkering with code and kept up on new technologies and even flirted with them for awhile making silly games and other applications (Snake and an Outlook Contact Status Bar utility come to mind).

Whereas some Product Designers on my team opt for mockups in Illustrator or Photoshop, I would always start in Visual Studio and add interactivity as I went along.

Then WPF and XAML came along. Ah, what a wondrous piece of technology. Finally I was able to please the code tinkering with my designing side. Such a beautiful union. I am now one of the only designers in the company working on WPF related projects and actually contributing real, working XAML to the code stream. Last year, members of the development team and I pioneered a true designer~developer workflow for AutoCAD using XAML.

The experience has been amazing although there have been some frustrating days where I am sure I was experiencing what most developers experience when they are under the gun trying to fix bugs, get to code complete, and finish off their respective features.  When you are working with XAML, you *are* still working with code. Not to mention WPF is a huge, robust set of functionality with lots to learn.

Which brings me to why I started this post. Since I cannot talk much about what I am doing on a day to day basis with AutoCAD, I was going to post some interesting WPF tidbits I find through my work. Hopefully I can post some stuff about AutoCAD too, with respect to our last release, AutoCAD 2009. Stay tuned!