I’m working on a windows store application and one of the things I want to do in the app is display a log that shows status messages and other informational tidbits as the user works things.  To this end, I added a ListBox as follows:

<ListBox x:Name="GameStateLog" HorizontalAlignment="Center" Height="221" VerticalAlignment="Top" Width="499" Padding="0" FontSize="10">

 

The C# code to populate the listbox at runtime was along the lines of:

GameStateLog.Items.Insert(0, GameStateCounter++ + ": New game state: waiting for player 1 name");

This worked out fine enough but the UI showed a crazy amount of padding around the individual messages as they were added.  That makes sense if I want end users to be able to select these items but does not make sense when I just want to show a running series of log messages – users won’t select these, just view them.  It was strangely hard to find an easy way to do this and arguably, the way I found it isn’t necessarily “easy” but I got it working OK.  The key insight came from this posting here (http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/c4a6f694-bd46-4779-ab83-b1c2fcb2397c) from Bob Relyea.  Instead of adding strings to the Items collection on the ListBox, add ListBoxItems.  By adding a string, the ListBox was creating its own ListBoxItem on its own.  I wasn’t able to affect anything about that ListBoxItem after the fact.  The new code is:

        private void AddGameStateLogMessage(string theMessage)
        {
            ListBoxItem li = new ListBoxItem();
            li.Content = theMessage;
            li.MaxHeight = 25;

            Thickness thisPadding = new Thickness(5, 0, 5, 0);
            li.Padding = thisPadding;

            GameStateLog.Items.Insert(0,li);
        }

 

Here I’m creating ListBoxItem’s and inserting them.  I removed the excess padding by setting its thickness.

This is pretty flexible as I do intend to do some color coding to highlight particular types of messages and by directly adding ListBoxItems I get to style them any way I want.

Hope this helps someone!

</end>

Subscribe to my blog.

Follow me on Twitter at http://www.twitter.com/pagalvin