ListBox Example

new_example.png

See also Cascading ListBox
See also Group Descriptions for example of grouping
See also ListView Example for example of swapping in custom views
See also Original Updates for a couple more screenshots from my old, original notes

The ListBox is a way to display a list of items within a scrollviewer, either horizontally or vertically (the default). To display items horizontally in a single row, call the UseHorizontalListBox extension method. The items themselves can be any type of Composite that you prefer. In the example below, I make the root container of each Composite a Grid.

The example calls the UseWrapPanel method to make the sure that items wrap as they are added to the ListBox. (In this case, I set the width so narrow that it will wrap immediately after only one Composite.)

Finally, I explicitly set the colors of the vertical and horizontal scrollbars in detail rather than using the simpler, shorthand ApplyToScrollViewer method. Either approach should work fine.

Example Usage - PART 1 - Initialization and Settings

myListBox.Initialize(413D, 450D, ContainerType.Grid, 5, 3); //use overload to set width and height to Auto
myListBox.UseWrapPanel(); 
myListBox.SetCompositeGridDimensions<ListBox>(2, 3, 193, GridUnitType.Pixel);  //set number of rows and columns (as well as column width) on the composite's Grid

//BEGIN SETTINGS . . . END SETTINGS
myListBox.BeginSettings<ListBox>()
                .SetBackgroundColorOnItemsControl(BrushExt.CreateGradientBrush("#DDDDDD", 25, "#33AAFF", 25, 1, 50, 1, 50)) //settings.SetBackgroundColor(Brushes.Wheat)           
                .CreateFontStyleKey("mainFont", "Segoe UI", 27D, FontWeights.Bold, FontStyles.Normal)
                .CreateColorStyleKey("mainColor", Brushes.Snow) //143, 121, 100, 255)
                .SetItemBorderColorAndThickness(Brushes.MidnightBlue, new Thickness(0, 0, 1, 0))
                .SetImageMargin(0, 0, new Thickness(0, 0, 0, 0))
                .SetImageStretch(0, 0, Stretch.Fill)
                .SetImageHorizontalAlignment(0, 0, HorizontalAlignment.Left)
                .SetTextPadding(0, 1, new Thickness(0, 5, 0, 10))
                .SetTextPadding(0, 2, new Thickness(0, 10, 0, 10))
                .SubscribeMouseDoubleClick(new MouseButtonEventHandler(my_MouseDoubleClick), item => { return item.GetText<ListBox>(1, 0).Contains("Lake"); })
                .SubscribeSelectionChangedOnParent((o,e)=>{ MessageBox.Show("hello world!");})

                //VERTICAL SCROLLBAR
                .SetVerticalScrollBarColor(Brushes.WhiteSmoke)
                .SetVerticalScrollUpButtonColors("White", "Orange", "White", "#0088FF", "#DDDDDD", "0", "Gray", new Thickness(1), "Black", "Orange", "M 0 4 L 7 4 L 3.5 0 Z")
                .SetVerticalPageUpButtonColors("#DDDDDD", "Gray", "Gray", "#DDDDDD") //, "2", "White", new Thickness(3, 3, 3, 3))
                .SetVerticalPageDownButtonColors("#DDDDDD", "#DDDDDD", "Gray", "Gray") //,"5", "Gray", new Thickness(3, 3, 3, 3))
                .SetVerticalScrollDownButtonColors("White", "Orange", "#DDDDDD", "#0088FF", "White", "0", "Gray", new Thickness(1), "Black", "Orange", "M 0 0 L 3.5 4 L 7 0 Z")
                .SetVerticalScrollThumbColors("#0088FF", "#0088FF", "Gray", "#DDDDDD", "1", "1")

                //HORIZONTAL SCROLLBAR
                .SetHorizontalScrollBarColor(Brushes.WhiteSmoke)
                .SetHorizontalScrollRightButtonColors("#BBB", "Blue", "Red", "Red", "Red", "0", "#FFEE", new Thickness(1), "Black", "Orange", "M 0 0 L 4 4 L 0 8 Z")
                .SetHorizontalPageRightButtonColors("#DDDDDD", "#DDDDDD", "Gray", "Gray") //, "#FFEE", "0", new Thickness(0, 0, 0, 0))
                .SetHorizontalPageLeftButtonColors("#DDDDDD", "Gray", "Gray", "#DDDDDD") // , "#FFEE", "0", new Thickness(0, 0, 0, 0))
                .SetHorizontalScrollLeftButtonColors("#BBB", "Blue", "Red", "Red", "Red", "0", "#FFEE", new Thickness(1), "Black", "Orange", "M 4 0 L 4 8 L 0 4 Z")
                .SetHorizontalScrollThumbColors("#0088FF", "#0088FF", "Gray", "#DDDDDD", "1", "1")

                .SetScrollViewerCornerRectangleColor(Brushes.White)
                .SetFontToRowByStyleKey("mainFont", 1, 0, 2)
                .SetTextColorToRowByStyleKey("mainColor", 1, 0, 2)
                .SetVerticalAlignment(0, 1, VerticalAlignment.Center)
                .SetHorizontalAlignment(1, 0, TextAlignment.Center)
                .SetVerticalAlignment(0, 2, VerticalAlignment.Center)
                .SetTextWrapping(0, 1, TextWrapping.Wrap)
                .SetTextMaxHeight(0, 1, 50D)
                .SetTextMaxWidth(0, 1, 300D)
                .SetUseLayoutRounding(true)
                .SetHorizontalAlignment(0, 1, TextAlignment.Right)
                //.SetTextVisibility(0,2,Visibility.Hidden)
                //.SetImageVisibility(0,0, Visibility.Collapsed)
                //.SetAlternatingRows(Brushes.Orange, Brushes.Green)
                .SetSelectedContentControlColor(Colors.LightBlue)
                .EndSettings<ListBox>();

Note the SetSelectedContentControlColor method. This allows you to set the highlight color for when an item is selected in the ListBox.

Also, note above that you may call SetAlternatingRows to set alternating row colors. It is commented out in the example above, but see it in action in the additional example below. SetBackgroundColorOnItemsControl can then be used to set the color "between" the rows:

listboxexample.png

.SetAlternatingRows(Brushes.Yellow, Brushes.Khaki)
.SetBackgroundColorOnItemsControl(Brushes.Black)
.SetScrollViewerCornerRectangleColor(Brushes.Green)

SetScrollViewerCornerRectangleColor can be used to change the color of the rectangle that displays in the lower right-hand corner of the control.

Example Usage - PART 2 - Adding Composites with Child Elements

Here is an example of how you might add Images or Text elements to an item/row in the ListBox.

First, choose a container upon initializing the ListBox. If you choose Grid, as in the example, you can insert/update/remove images and text based on row and column indices. You may supply an ID: a simple number (1,2,3,4...) or a set of GUIDs. You may update or remove by this ID as well.

//BEGIN COMPOSITE . . . END COMPOSITE  
myListBox.BeginComposite<ListBox>(myGuid)
                        .AddImage<ListBox>(0, 0, varyImage, UriKind.Absolute, Double.NaN, 1, 2)
                        .AddText<ListBox>(1, 0, varyText + ": ")
                        .AddText<ListBox>(1, 1, tup.Item3)
                        .SetMouseOverColorOnContainer<Grid, ListBox>(Brushes.LightCoral)
                        .EndComposite<ListBox, ListBoxArgs>(null);
example2.png

You may get a direct handle to the child elements via guid-x-y coordinates and adjust at runtime:

myListBox.GetTextBlock(myGUID, 0, 1).TextWrapping = TextWrapping.Wrap;

You can subscribe to MouseDoubleClick, SelectionChanged, or MouseSingleClick or other events as desired, and inside of these events I have added one or two extensions to the event args so you can do things like Retrieve the Key (GUID) that has been double-clicked on from the event args:

e.GetKey(sender)

Or Retrieve the Key of the Selected Row:

e.SelectedKey()

You can also Set the Selected Row by Key (GUID):

myListBox.SetSelectedKey(myGUID);

I store every row (the top-level container is a Border element therefore ListBoxItems are always of type Border) in a Dictionary by key (GUID). I also have a separate Dictionary where I store every child element by a more refined key (GUID-row-column).

Finally, you may Sort by elements within the item/row of the ListBox:

myListBox.SortByText(1, 0, CommonExt.SortOrder.Desc, CommonExt.SortControlType.TextBlock);

See Sorting for more details on how to perform sorting.

Last edited Apr 15, 2014 at 5:13 AM by stagathome0069, version 28

Comments

No comments yet.