C# WPF Combobox dropdown list to multiple columns

Question

Is it possible to "force" the combobox items in list to appear in say two columns?

For example like this:

CB Selected Item

CB Item 1 | CB Item 4

CB Item 2 | CB Item 5

CB Item 3 |

Solution 1

You can change the ItemsPanel to a WrapPanel, just be careful on the height (you could write a converter to calculate it according to the number of items) :

<ComboBox>
    <ComboBox.Resources>
        <Style TargetType="ComboBox">
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <WrapPanel IsItemsHost="True" Orientation="Vertical" Width="100" Height="50" />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="ComboBoxItem">
            <Setter Property="Width" Value="50" />
        </Style>
    </ComboBox.Resources>

    <ComboBoxItem Content="Value 1" />
    <ComboBoxItem Content="Value 2" />
    <ComboBoxItem Content="Value 3" />
    <ComboBoxItem Content="Value 4" />
    <ComboBoxItem Content="Value 5" />
</ComboBox>

Solution 2

Well, you can, here's the XAML:

<ComboBox Name="ComboBox">
    <ComboBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="2"/>
        </ItemsPanelTemplate>
    </ComboBox.ItemsPanel>
</ComboBox>

Now a simple test, adding numbers from 0 to 8 gives:

Now you can style it all you want... :)

Of course every item (every number, in this particular case) is separate, clickable item, just so there are no misunderstandings.

[EDIT] I have just noticed you want to do it 'the opposite way', that is in 'rows' direction, if so, then maybe it's better to use the WrapPanel instead, as someone suggested in the other answer. The UniformGrid fills the grid in the column-wise direction first.

Maybe there's a way to do it with UniformGrid, but there's no apparent and easy one-click change (I was wrong here before :) )

Solution 3

You would need to put a WrapPanel into the ItemsPanel of the combobox.

<ComboBox>
    <ComboBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Vertical" Height="100" />
        </ItemsPanelTemplate>
    </ComboBox.ItemsPanel>

    <ComboBoxItem Content="Value 1" />
    <ComboBoxItem Content="Value 2" />
    <ComboBoxItem Content="Value 3" />
    <ComboBoxItem Content="Value 4" />
    <ComboBoxItem Content="Value 5" />
    <ComboBoxItem Content="Value 6" />
    <ComboBoxItem Content="Value 7" />
    <ComboBoxItem Content="Value 8" />
    <ComboBoxItem Content="Value 9" />
    <ComboBoxItem Content="Value 10" />
    <ComboBoxItem Content="Value 11" />
    <ComboBoxItem Content="Value 12" />
    <ComboBoxItem Content="Value 13" />
    <ComboBoxItem Content="Value 14" />
    <ComboBoxItem Content="Value 15" />
</ComboBox>

Comments

[markdorison]

If he had 100 or 1000 entries, he'd better not use a Combo anyway :)

[Bob.]

@UğurGümüşhan I was thinking functionality wise, if he had 100 entries, to get to the 50th the client would have to scroll to the bottom of the ComboBox list (since they'd be ordered in half (vertically) instead of two-by-two), instead of halfway. What happens when he has thousands?

[Uğur Gümüşhan]

it's about flow layout. not columns.

[Bob.]

Would this also work if you use an ItemTemplate for the ComboBox and using an ItemsSource instead of putting in the ComboBoxItem individually?

[Uğur Gümüşhan]

you represent it as a transpose matrix compared to the original, which doesn't give what the op wants

[Patryk Ćwiek]

@UğurGümüşhan Yeah, I have noticed that, hence the EDIT section. :)

[TYY]

Yeah I see what you mean. Looking at the example that people provided, I realize what he/she was asking for.

[Kristo]

thanks anyways for the input, i might use UniformGrid later on ;)

[Kristo]

yes it does work well with DataTemplate and ItemsSource ... thanks a lot @mathieu :)