How can I use VisualStateManager to change the color of the text (foreground) of a ListBoxItem?

Question

Here's the deal. I can create a ListBox and create it. I can edit a copy of the template so that the states become available in Expression Blend 3. And I can change the state so that the background color in the position is changed when selected. But I can’t change the foreground color of the text due to ContentPresenter! Does anyone have an example of XAML that shows how to accomplish this seemingly easy task?

It seems like the answer is to remove the ContentPresenter and replace it with some kind of ListBoxItem style or template, but this is where I got stuck. ContentPresenter ListBox refers to some other "TemplateBinding Template" - where is it? In addition, when I try to modify ContentPresenter in any way, the States panel is empty and I remain with the XAML swamp. Fortunately, there is CTRL-Z!

I really think Microsoft should reconsider the XAML approach or make Blend a more complete tool. The way it should work is that I should be able to click on ANY element and define states for it. If I try to break the rules, Blend should tell me this and suggest a way to fix it. It's just that when the States panel is empty, it doesn't help.

Answer 1

Typically, the ListBox not responsible for the contents of the elements themselves, including the Foreground color, if necessary, they use. Elements can be a series of images, in this case Foreground does not make sense. Elements can be a complex multi-element interface containing various text elements, each of which needs different Foreground colors, therefore the ListBox idea supplying one Foreground color Foreground not make sense.

That's why the default template for the Item container uses ContentPresenter , which basically means "place the content of the subordinate element here."

If you want to create a new style for lists in general for using container elements in your styles, you will have to accept this restriction, your VSM will not be able to find out the details of the contained element.

However, if you create a container style for a specific ListBox instance, and you understand the type and nature of the elements presented, you do not need to save the ContentPresenter in the template. You can directly replace what ever Xaml you need to represent each element.

For example, you can replace ContentPresenter in Xaml as follows: -

 <Grid Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"> <TextBlock x:Name="ContentItem" Text="{Binding Property1, Mode=OneWay}" TextWrapping="Wrap" Foreground="#FFDC1C1C"/> </Grid> 

Note that the Padding and HorizontalAlignment elements of the elements are the same as for the presenter. In this case, I use as a single TextBlock called "ContentItem" and bind it to the property of the original objects Property1 .

Now that the template contains a named TextBlock to display the item, I can play Foreground with VSM to change its Foreground for various different Visual states.

Answer 2

Sorry to resurrect the old question, but I was stuck in the same problem and found a solution. I will share it, as anyone knows, it can be useful to someone.

It is very simple: if you replace the ContentPresenter in your ContentControl template, it will work (ContentControl has the Foreground property).

Answer 3

Ah, cool! Thanks for the answer. I think I ended up doing user control and setting the public Foreground property, which set the color, but I can't remember. Your answer in combination with the previous one is very useful.

As an aside, I figured out and learned how to create my own custom controls with dependent properties and as many as 9 yards, and, say, man, it was worth it to me. I feel like I can now do something with WPF / SL.