Combo box styling to show rating and description WPF

Question

Hi all,

I'm not very good with styling in WPF, so I thought that I would ask here and see if anyone can help.

I have a combo box which is bound to a view model that has a rating and description, when I hover my mouse over a item the item changes to show the rating and description for that item.

This works ok however because some of the descriptions are really big and there is no word wrapping it just looks ugly.

I don't know if this possible but what I am after is the list of ratings on one side and a description box on the other, but I only want the description box to show the current highlighted one.

Something like this:

Can anyone help me with this or at least point me in the right direction to get started.

Thanks, Nathan

Answer 1

You could edit a copy of the data template (The internet will tell you how to easily do this with Blend). In that data template, add an area to the right.

It can be another panel, you can extend the grid to the right, or add horizontal extender...however you want to do it.

Then you can add two bindings to whatever you add to the right. One binding will be for the description you want to display (bind it to some textbox). And the second will be to the new panel's visibility. Set it to collapse it when the description is too long.

I would be more descriptive, but I'm guessing that's all you really needed.

Answer 2

Is there a reason you don't want to use a ToolTip for this?

Edit

I just realized what it is that you're actually asking for. You want some way of displaying properties of the item that is the current selection in the ComboBox's list.

You can't do this with the ComboBox as such, because the SelectedItem property it exposes doesn't change while the user is navigating through the pulled-down list, it only changes when the user makes a selection.

But if you edit the ComboBox's control template (and here Blend is useful), you'll have access to the pulled-down list's ItemsControl itself (I forget what kind of ItemsControl, I haven't looked at the template in a while). And you'll be able to access its SelectedItem property.

It might actually be worth building a UserControl based on the ComboBox, adding a CurrentItem dependency property to it, and binding that to the ItemsControl's SelectedItem property. Once you do this, you have a ComboBox that looks just like an ordinary ComboBox, except it exposes a CurrentItem property you can bind another control to.

P.S. I haven't actually done this particular thing, so I don't know what kind of gotchas you'll encounter when you try it.

Answer 3

Use a DataTemplate to completely redefine the line:

    <DataTemplate x:Key="superRow" >
        <StackPanel Orientation="Horizontal">
            <StackPanel.Resources>
                <Style TargetType="{x:Type TextBlock}">
                    <Setter Property="Margin" Value="5,2,0,0"/>
                </Style>
            </StackPanel.Resources>
            <TextBlock Text="{Binding Path=Rating}"/>
            <TextBlock Text="{Binding Path=RatingDescription}"/>
        </StackPanel>
    </DataTemplate>

Then in the combobox:

 <ComboBox ItemTemplate="{StaticResource superRow}" />

(other needed comboBox options missed for simplicity)