Welcome to WindowsClient.net | My Blog | Sign in | Join

Windows Client Videos

How Do I: Customize the Appearance of ListBox ListItems in WPF

WPF introduces the concept of “lookless controls”. Now a developer can select a control based on its functionality and not concern themselves with its appearance. The appearance can be customized to the developers needs. In this video, Todd Miranda demonstrates how to customize the appearance of ListBox ListItems using templates.

By: Todd Miranda

Posted: May 23 2008, 12:57 PM by jaytayl | with 5 comment(s)
Filed under:

Comments

dirty_harry said:

Very nice explanation, thanks.

Is ist possible to reference a subclass in the listbox like:

<TextBlock Text="{Binding Path=Standard.L}" FontSize="10"/> ???

# August 20, 2008 11:45 AM

dirty_harry said:

solved it - has to be a property ;)

# August 20, 2008 1:04 PM

tmiranda said:

dirty_harry,

  Sorry for missing your first question.  I've been without net access for a couple days.  Glad to see you answered your own question! :)  Thanks for the feedback.

Todd

# August 22, 2008 8:39 AM

BurkeJones said:

Is it possible to control the forecolor of a highlighted record?

Here's what I'm doing:

<ListBox.Resources>

               <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red"/>

               <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Red"/>

</ListBox.Resources>

the SystemColors.HighlightTextBrushKey seems to be readonly.  any ideas how to get around this?

# October 6, 2008 12:00 PM

tmiranda said:

You are correct.  The SystemColors are readonly from the perspective that they relate directly to values that can be set by the user in Windows settings.  We can't set them directly.  However doing what you want to do is very possible.

The way to accomplish what you want is to further expose the templates that make up the listbox items.

Let's say you have a listbox with one listitem:

    <ListBox>

         <ListBoxItem>hello</ListBoxItem>

    </ListBox>

if you look at the template for this, you would see something that looks like this:

ListBox

  Border

     ....

    ItemsPresenter

        ....

        ListBoxItem

            Border

                 ContentPresenter

                      TextBlock

A listitem's highlight color is set at the Border element of the ListBoxItem.  However the font forecolor is set at the TextBlock element.  So in order to change some of these lower level properties, you need to override the control templates at these levels.

Hopefully this summay will give you the direction to solve your problem.

Todd

# October 7, 2008 10:36 PM