Tag Archives: App Store

Quick and Easy: Set the Size of a Items in a List Box in a Windows Store App

Leave a reply

In a Windows Store App I’m creating, I want to show the user various informational messages.  I picked a ListBox as the tool to show it so that they can scroll through them and all that good stuff. 

The messages are informational only, so there’s no need to provide all that extra whitespace around them since the user can never select them for anything.  The default behavior of the ListBox provides a substantial amount of padding and I wanted to get rid of it.  Well …. you can’t do that sort of thing on the ListBox directly.  HOWEVER, you can do it to the items you add:

        private void AddGameStateLogMessage(string theMessage)
        {
            TextBox t = new TextBox();
            t.Text = GameStateCounter++ + ": " + theMessage;
            t.TextWrapping = TextWrapping.Wrap;
            t.MinWidth = 400;
            Thickness thisPadding = new Thickness(5, 0, 5, 0);
            t.Padding = thisPadding;
            t.FontSize = 12;

            ListBoxItem li = new ListBoxItem();
            li.Content = t;
            li.MaxHeight = 25;
            thisPadding = new Thickness(5, 0, 5, 0);
            li.Padding = thisPadding;

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

in the above, I’m creating a TextBox and setting its font, its padding, etc.

Next, I create a ListBoxItem and set its content to the formatted TextBox.

Finally, I insert the ListBoxItem into the ListBox.  (I want to show most recent messages at the top of the list, hence the Insert(0,li) instead of a simple Add() invocation.).

I will be tweaking this a bit before I’m really happy with the ListBox behavior but the pattern shown above has been very fruitful.  Hopefully someone else finds it helpful.

</end>

undefinedSubscribe to my blog.

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

Setting the Height of ListboxItems In a ListBox Programmatically for Windows Store App

Leave a reply

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>

undefinedSubscribe to my blog.

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