Show a list in combobox item from list of lists

Question

I Currently have a List<List<Path>> where I would want to show the inner list in the combobox items. Roughly like this pseudo:

<ComboBox>
    <ComboBoxItem Content="3 paths"/>
    <ComboBoxItem Content="3 paths"/>
    <ComboBoxItem Content="3 paths"/>
    <ComboBoxItem Content="3 paths"/>
</Combobox>

EDIT: added images

This is how it looks now

And this is roughly how i want it

In the images each row is a list containing another list which has the triangles in it.

So if the outermost list has 4 list items in it, each with 3 paths i want them to be shown like the above. My setup right now is like this

Xaml:

<ComboBox ItemsSource="{Binding Path=AvailableCombinationsOfShape}">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <Path Data="{Binding Path=Data}" StrokeThickness="1" Stroke="Black"/>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

Code behind:

AvailableCombinationsOfShape = new List<List<Path>>();

foreach (var combination in combinations)
{
    var r = CombineShapes(GetImageShapes(), combination);
    AvailableCombinationsOfShape.Add(r);
    i++;
}      
private List<Path> CombineShapes(List<SymbolShapeModel> shapes, int[] numbersNotToFill)
{
    var pathList = new List<Path>();
    foreach (var shape in shapes)
    {
        var p = new Path();
        p.Data = shape.Shape;
        pathList.Add(p);
    }
    return pathList;
}

With this, I get the first shape in each list to be displayed in the combobox but I would like to have all 3 shapes displayed.

My reason for wanting it like this is because I want to color some of the shapes in each of the combobox items. (imagine 3 squares. I want the first item to show square 1 and 2 colored, item 2 should show square 2 and 3 colored and the last item should show square 1 and 3 colored.)

Hope someone can help me! Thanks!

What you need is not very clear from the big post. I guess you have a hierarchical list (i.e. List or Items... where each Item can have one or more items). What you want to show (If I am not wrong) is a Combobox whose items are Union of all List Ietms and inner items. Let me know if that is correct. — Prateek Shrivastava, Sep 18 '18 at 08:21
Are you trying to ask the user to select an individual thing, or a group of things? If the latter, how about changing your data template to hold a ItemsControl, with it's ItemsSource set to the inner list? — Robin Bennett, Sep 18 '18 at 08:34
@PrateekShrivastava I've updated with images. hope this makes it a bit more clear :) — Stephan Fuhlendorff, Sep 18 '18 at 08:39
@RobinBennett ItemsControl might work. How would i go about binding to a list in a list for the itemscontrol? :) — Stephan Fuhlendorff, Sep 18 '18 at 08:39

score 1 · Answer 1 · answered Sep 18 '18 at 09:14

1

Thank you @RobinBennett. All i needed was an Itemscontrol

<ComboBox ItemsSource="{Binding Path=AvailableCombinationsOfShape, Mode=OneWay}">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <ItemsControl ItemsSource="{Binding}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Path Data="{Binding Path=Data}" StrokeThickness="1" Stroke="Black"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

The placement is a little weird for the triangles but thats a problem i'm able to handle myself.

answered Sep 18 '18 at 09:14

Stephan Fuhlendorff

303
1
10

1

As a note, you should not have any Path objects in your view model. Use only Geometries. AvailableCombinationsOfShape should be a `List>`, and the Path in the inner ItemTemplate should be bound like ``. – Clemens Sep 18 '18 at 09:15
If you want to arrange the shapes horizontally, set the ItemControl's ItemsPanel property to a horizontal StackPanel. – Clemens Sep 18 '18 at 09:19
@Clemens. Yea i figured i should do something like that but after trying for what seems like forever i gave up. I just couldn't make it work with geometry and the triangles being different colors :) – Stephan Fuhlendorff Sep 18 '18 at 09:25
1

If there also is a fill or stroke color, you should have a ShapeItem class with appropriate properties, e.g. a Geometry and one or two Brushes. Then AvailableCombinationsOfShape would be a `List>` and the Path would be something like ``. Something like this: https://stackoverflow.com/a/40190793/1136211 – Clemens Sep 18 '18 at 09:29
@Clemens do have a class like that. I'm trying to implement it as we speak. I'll let you know how it goes. Thanks for all the feedback! – Stephan Fuhlendorff Sep 18 '18 at 09:36
@Clemens Worked like a charm with my custom class and direct binding to shape and color. The Stackpanel strategy for placement didnt work so i'm currently trying a Canvas approach according to the points given to the geometry to make the line up perfectly. I hope this is a valid approach :) – Stephan Fuhlendorff Sep 18 '18 at 10:05
Canvas is of course better when the Geometries are in the same coordinate system. I didn't see your pictures, so horizontal was just a guess. – Clemens Sep 18 '18 at 10:07
@Clemens Thank you so much for your help. Think i've got it from here! :) – Stephan Fuhlendorff Sep 18 '18 at 10:21

Show a list in combobox item from list of lists

1 Answers1