BinarySmartListBox
A strip of cards the user steps through one at a time with round previous and next buttons, the arrow keys or the mouse wheel – for recent documents, news items, products, or a gallery of reports.
public class BinarySmartListBox : ListBox
Inherits from / implements: ListBox
Remarks
Items
Fill it with BinarySmartListBoxItem cards, in XAML or in code. A card with an
BinarySmartListBoxItem.ItemTitle shows an optional picture, the title in bold and a
line or two of BinarySmartListBoxItem.BodyContent; a card with no title shows its
ContentControl.Content instead, so it can hold anything. The cards are laid out in a row
(NavigationOrientationIs.Horizontal, the default) or a column, with no scroll bars: the
list scrolls by bringing the selected card into view.
The control's default ItemsControl.ItemContainerStyle is made for
BinarySmartListBoxItem. To show data objects through
ItemsControl.ItemsSource, give the control an
ItemsControl.ItemContainerStyle of your own for ListBoxItem.
Moving through the items
The previous and next buttons, the arrow keys along the strip (Left and Right in a row, Up and
Down in a column), Home, End and the mouse wheel each move the selection by one item – or, with
nothing selected, to the first – and the selected card is scrolled into view. The buttons disable
themselves at either end, with a tooltip saying why, and the selection does not wrap round. Handle
SelectionChanged to act on the card the
user lands on.
Size
Give the control a height: the strip of cards is made as tall as the control less room for its frame (14 logical pixels in a row, 34 in a column).
Appearance
The buttons take the NavigationButton... brushes, and the cards their own brushes on
BinarySmartListBoxItem. The selected card's colours are theme resources, which
BinarySmartListResources gives the keys of. The defaults given are the ones used with no
Binarymission skin in force; while a skin is applied through BinarySkinManager it supplies its
own, and a brush set on the control still wins.
Examples
A strip of recent reports. The assembly is
Binarymission.WPF.Controls.ListControls.BinarySmartNavigator.
<Window x:Class="Reports.HomeWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:nav="clr-namespace:Binarymission.WPF.Controls.ListControls;assembly=Binarymission.WPF.Controls.ListControls.BinarySmartNavigator"
Title="Reports" Width="900" Height="300">
<nav:BinarySmartListBox x:Name="recentReports" Height="130" Margin="12"
SelectionChanged="OnReportChosen">
<nav:BinarySmartListBoxItem ItemTitle="Sales by region" ItemImage="/Images/Chart.png"
BodyContent="Third quarter, all regions. Updated this morning."
BodyContentMaximumWidthForOneLine="220" Tag="sales-q3" />
<nav:BinarySmartListBoxItem ItemTitle="Aged debtors" ItemImage="/Images/Ledger.png"
BodyContent="Invoices more than 60 days overdue."
BodyContentMaximumWidthForOneLine="220" Tag="aged-debt" />
<nav:BinarySmartListBoxItem ItemTitle="Stock levels" ItemImage="/Images/Boxes.png"
BodyContent="Lines below their reorder point."
BodyContentMaximumWidthForOneLine="220" Tag="stock" />
</nav:BinarySmartListBox>
</Window>private void OnReportChosen(object sender, SelectionChangedEventArgs e)
{
var card = recentReports.SelectedItem as BinarySmartListBoxItem;
if (card != null)
{
OpenReport((string)card.Tag);
}
}See also
Members at a glance
| Constructors | |
|---|---|
BinarySmartListBox | Creates an empty list. |
| Properties | |
ControlAnimationType | Gets or sets how the strip of cards is animated when the selection moves. |
ItemEllipseBorderBrushHover | Gets or sets the ring of a page dot of a template of your own while the pointer is over it. |
ItemEllipseBorderBrushNormal | Gets or sets the ring of the page dots of a template of your own. |
ItemEllipseBorderBrushSelected | Gets or sets the ring of the dot of the selected item in a template of your own. |
ItemEllipseFillHover | Gets or sets the fill of a page dot of a template of your own while the pointer is over it. |
ItemEllipseFillNormal | Gets or sets the fill of the page dots of a template of your own. |
ItemEllipseFillSelected | Gets or sets the fill of the dot of the selected item in a template of your own. |
ItemTitleBackground | Gets or sets the fill of a title strip. |
ItemTitleForeground | Gets or sets the colour of a title strip's text. |
NavigationButtonArrowFill | Gets or sets the colour of the arrow on the previous and next buttons while they can be used. |
NavigationButtonDisabledArrowFill | Gets or sets the colour of the arrow on a previous or next button that is disabled because there is nothing further that way. |
NavigationButtonDisabledBackground | Gets or sets the fill of a previous or next button that is disabled because there is nothing further that way. |
NavigationButtonDisabledBorder | Gets or sets the outer ring of a disabled previous or next button. |
NavigationButtonDisabledBorderBrushForStrokeLayer | Gets or sets the inner ring of a disabled previous or next button. |
NavigationButtonDropShadowColor | Gets or sets the colour of the glow around the previous and next buttons. |
NavigationButtonDropShadowEffect | Gets the effect the previous and next buttons are drawn with to give them their glow. |
NavigationButtonDropShadowSoftness | Gets or sets how far the glow around the previous and next buttons spreads. |
NavigationButtonHasDropShadow | Gets or sets whether the previous and next buttons are drawn with a soft glow around them. |
NavigationButtonHoverBackground | Gets or sets the fill of a previous or next button while the pointer is over it. |
NavigationButtonHoverBorder | Gets or sets the outer ring of a previous or next button while the pointer is over it. |
NavigationButtonHoverBorderBrushForStrokeLayer | Gets or sets the inner ring of a previous or next button while the pointer is over it. |
NavigationButtonNormalBackground | Gets or sets the fill of the round previous and next buttons at rest. |
NavigationButtonNormalBorder | Gets or sets the outer ring of the round previous and next buttons at rest – and the outline of the whole control. |
NavigationButtonNormalBorderBrushForStrokeLayer | Gets or sets the inner ring of the previous and next buttons at rest. |
NavigationButtonPressedBackground | Gets or sets the fill of a previous or next button while it is pressed. |
NavigationButtonPressedBorder | Gets or sets the outer ring of a previous or next button while it is pressed. |
NavigationButtonPressedBorderBrushForStrokeLayer | Gets or sets the inner ring of a previous or next button while it is pressed. |
NavigationOrientation | Gets or sets whether the cards are laid out in a row or a column, and so where the buttons are and which arrow keys move the selection. |
| Methods | |
OnApplyTemplate | Connects the parts of the template: the buttons PART_PreviousListButton and
PART_NextListButton, the ScrollViewer PART_ChildScrollViewer, and the
inner ListBox PART_ChildListBox that shows the items. |
OnItemsChanged | Enables or disables the previous and next buttons again after items are added or removed. |
OnPreviewKeyDown | Moves the selection one item with the arrow keys along the strip, and to the first or last item with Home and End. |
OnPreviewMouseWheel | Selects the next item as the mouse wheel turns towards the user, and the previous one as it turns away. |
OnRenderSizeChanged | Fits the strip of cards to the control's new height. |
OnSelectionChanged | Raises SelectionChanged, then
updates the
previous and next buttons, scrolls the selected card into view and runs the animation. |
| Fields | |
ControlAnimationTypeProperty | Identifies the ControlAnimationType dependency property. |
ItemEllipseBorderBrushHoverProperty | Identifies the ItemEllipseBorderBrushHover dependency property. |
ItemEllipseBorderBrushNormalProperty | Identifies the ItemEllipseBorderBrushNormal dependency property. |
ItemEllipseBorderBrushSelectedProperty | Identifies the ItemEllipseBorderBrushSelected dependency property. |
ItemEllipseFillHoverProperty | Identifies the ItemEllipseFillHover dependency property. |
ItemEllipseFillNormalProperty | Identifies the ItemEllipseFillNormal dependency property. |
ItemEllipseFillSelectedProperty | Identifies the ItemEllipseFillSelected dependency property. |
ItemTitleBackgroundProperty | Identifies the ItemTitleBackground dependency property. |
ItemTitleForegroundProperty | Identifies the ItemTitleForeground dependency property. |
NavigationButtonArrowFillProperty | Identifies the NavigationButtonArrowFill dependency property. |
NavigationButtonDisabledArrowFillProperty | Identifies the NavigationButtonDisabledArrowFill dependency property. |
NavigationButtonDisabledBackgroundProperty | Identifies the NavigationButtonDisabledBackground dependency property. |
NavigationButtonDisabledBorderBrushForStrokeLayerProperty | Identifies the NavigationButtonDisabledBorderBrushForStrokeLayer
dependency property. |
NavigationButtonDisabledBorderProperty | Identifies the NavigationButtonDisabledBorder dependency property. |
NavigationButtonDropShadowColorProperty | Identifies the NavigationButtonDropShadowColor dependency property. |
NavigationButtonDropShadowEffectProperty | Identifies the NavigationButtonDropShadowEffect dependency property. |
NavigationButtonDropShadowSoftnessProperty | Identifies the NavigationButtonDropShadowSoftness dependency property. |
NavigationButtonHasDropShadowProperty | Identifies the NavigationButtonHasDropShadow dependency property. |
NavigationButtonHoverBackgroundProperty | Identifies the NavigationButtonHoverBackground dependency property. |
NavigationButtonHoverBorderBrushForStrokeLayerProperty | Identifies the NavigationButtonHoverBorderBrushForStrokeLayer dependency property. |
NavigationButtonHoverBorderProperty | Identifies the NavigationButtonHoverBorder dependency property. |
NavigationButtonNormalBackgroundProperty | Identifies the NavigationButtonNormalBackground dependency property. |
NavigationButtonNormalBorderBrushForStrokeLayerProperty | Identifies the NavigationButtonNormalBorderBrushForStrokeLayer dependency property. |
NavigationButtonNormalBorderProperty | Identifies the NavigationButtonNormalBorder dependency property. |
NavigationButtonPressedBackgroundProperty | Identifies the NavigationButtonPressedBackground dependency property. |
NavigationButtonPressedBorderBrushForStrokeLayerProperty | Identifies the NavigationButtonPressedBorderBrushForStrokeLayer dependency property. |
NavigationButtonPressedBorderProperty | Identifies the NavigationButtonPressedBorder dependency property. |
NavigationOrientationProperty | Identifies the NavigationOrientation dependency property. |
Constructors
BinarySmartListBox
Creates an empty list.
Remarks
Add BinarySmartListBoxItem cards to
ItemsControl.Items, and give
the control a height.
Properties
ControlAnimationType
Gets or sets how the strip of cards is animated when the selection moves.
- Value
- The control's style sets
ControlItemAnimationType.ContentVanishesAndAppears; the registered default, used under a style of your own that does not set it, isControlItemAnimationType.ScrollUpContent.
Remarks
The animation runs on every change of selection, from the user or from code, and lets go of the strip when it ends.
ItemEllipseBorderBrushHover
Gets or sets the ring of a page dot of a template of your own while the pointer is over it.
- Value
- The default with no skin in force is White; a Binarymission skin supplies its own.
Remarks
The list box's built-in template has no title strip or page dots and does not use this
brush. It is there for a template of your own, and so that one set of colours can be
given to a BinarySmartNavigator and a BinarySmartListBox
alike.
ItemEllipseBorderBrushNormal
Gets or sets the ring of the page dots of a template of your own.
- Value
- The default with no skin in force is Black; a Binarymission skin supplies its own.
Remarks
The list box's built-in template has no title strip or page dots and does not use this
brush. It is there for a template of your own, and so that one set of colours can be
given to a BinarySmartNavigator and a BinarySmartListBox
alike.
ItemEllipseBorderBrushSelected
Gets or sets the ring of the dot of the selected item in a template of your own.
- Value
- The default with no skin in force is Black; a Binarymission skin supplies its own.
Remarks
The list box's built-in template has no title strip or page dots and does not use this
brush. It is there for a template of your own, and so that one set of colours can be
given to a BinarySmartNavigator and a BinarySmartListBox
alike.
ItemEllipseFillHover
Gets or sets the fill of a page dot of a template of your own while the pointer is over it.
- Value
- The default with no skin in force is Yellow; a Binarymission skin supplies its own.
Remarks
The list box's built-in template has no title strip or page dots and does not use this
brush. It is there for a template of your own, and so that one set of colours can be
given to a BinarySmartNavigator and a BinarySmartListBox
alike.
ItemEllipseFillNormal
Gets or sets the fill of the page dots of a template of your own.
- Value
- The default with no skin in force is Transparent, so the dots are rings; a Binarymission skin supplies its own.
Remarks
The list box's built-in template has no title strip or page dots and does not use this
brush. It is there for a template of your own, and so that one set of colours can be
given to a BinarySmartNavigator and a BinarySmartListBox
alike.
ItemEllipseFillSelected
Gets or sets the fill of the dot of the selected item in a template of your own.
- Value
- The default with no skin in force is White; a Binarymission skin supplies its own.
Remarks
The list box's built-in template has no title strip or page dots and does not use this
brush. It is there for a template of your own, and so that one set of colours can be
given to a BinarySmartNavigator and a BinarySmartListBox
alike.
ItemTitleBackground
Gets or sets the fill of a title strip.
- Value
- The default with no skin in force is #A6C5EF, a light blue; a Binarymission skin supplies its own.
Remarks
The list box's built-in template has no title strip or page dots and does not use this
brush. It is there for a template of your own, and so that one set of colours can be
given to a BinarySmartNavigator and a BinarySmartListBox
alike.
ItemTitleForeground
Gets or sets the colour of a title strip's text.
- Value
- The default with no skin in force is White; a Binarymission skin supplies its own.
Remarks
The list box's built-in template has no title strip or page dots and does not use this
brush. It is there for a template of your own, and so that one set of colours can be
given to a BinarySmartNavigator and a BinarySmartListBox
alike.
Methods
OnApplyTemplate
Connects the parts of the template: the buttons PART_PreviousListButton and
PART_NextListButton, the ScrollViewer PART_ChildScrollViewer, and the
inner ListBox PART_ChildListBox that shows the items.
Remarks
The inner list is given this control's items, or bound to its
ItemsControl.ItemsSource, and must bind its SelectedIndex two-way to this
control's, as the built-in templates do. Any part can be left out of a template of your
own; what it
does is then lost.
OnItemsChanged
Enables or disables the previous and next buttons again after items are added or removed.
Parameters
e- The change to the items.
OnPreviewKeyDown
Moves the selection one item with the arrow keys along the strip, and to the first or last item with Home and End.
Parameters
e- The key event data. Keys the list acts on are marked handled.
Remarks
A key pressed in a text box inside a card is left to the text box. The arrow keys across the strip are not used.
OnPreviewMouseWheel
Selects the next item as the mouse wheel turns towards the user, and the previous one as it turns away.
Parameters
e- The wheel event data. It is marked handled whenever the list has items, so the wheel over the list does not also scroll a page it is on.
OnRenderSizeChanged
Fits the strip of cards to the control's new height.
Parameters
sizeInfo- The old and new size.
Remarks
The strip is made as tall as the control less 14 logical pixels in a row, or 34 in a column, and never less than 0.
OnSelectionChanged
Raises SelectionChanged, then
updates the
previous and next buttons, scrolls the selected card into view and runs the animation.
Parameters
e- The items that were selected and unselected.
Remarks
An override should call the base method to keep this behaviour.
Fields
ControlAnimationTypeProperty static
Identifies the ControlAnimationType dependency property.
ItemEllipseBorderBrushHoverProperty static
Identifies the ItemEllipseBorderBrushHover dependency property.
ItemEllipseBorderBrushNormalProperty static
Identifies the ItemEllipseBorderBrushNormal dependency property.
ItemEllipseBorderBrushSelectedProperty static
Identifies the ItemEllipseBorderBrushSelected dependency property.
ItemEllipseFillHoverProperty static
Identifies the ItemEllipseFillHover dependency property.
ItemEllipseFillNormalProperty static
Identifies the ItemEllipseFillNormal dependency property.
ItemEllipseFillSelectedProperty static
Identifies the ItemEllipseFillSelected dependency property.
ItemTitleBackgroundProperty static
Identifies the ItemTitleBackground dependency property.
ItemTitleForegroundProperty static
Identifies the ItemTitleForeground dependency property.