One Size Doesn't Fit All: RangeSlider and Its Motley Crew of Axii

jovca — Wed, 02 Dec 2009 17:04:00 GMT

Standard Silverlight Slider comes with the baked-in numeric axis. While this is sufficient for working with, well, numeric data, it requires extra plumbing to map numeric values to any other data type or collection of data points, including writing a value converter for use in data binding. Apart from having an extra thumb, ComponentArt RangeSlider comes with a variety of feature-rich Axis controls suitable for different uses:

NumericAxis for numerical (double) values
DateTimeAxis for DateTime values
PixelMapAxis allows you to map values to particular pixels in the underlying image or other visual content
ObjectArrayAxis for binding with any collection

All Axis controls are shipped in the same DLL as the RangeSlider, and reside within the same ComponentArt.Silverlight.UI.Input namespace.

NumericAxis

NumericAxis is the most basic type, with similar functionality to the axis of the built-in Slider control. The following example shows a NumericAxis set in the range of 0 to 50, in selection increments of 5, with tickmarks shown both above and below the axis:

<ComponentArt:RangeSlider SelectionStart="5" SelectionEnd="25">
    <ComponentArt:RangeSlider.Axis>
        <ComponentArt:NumericAxis Minimum="0" Maximum="50" SmallChange="5" TickMarkPosition="BothSides"/>
    </ComponentArt:RangeSlider.Axis>
</ComponentArt:RangeSlider>

Tickmarks can be positioned either above (TopLeft), below (BottomRight) or both above and below the axis line (BothSides). In case of the axis in vertical orientation, TopLeft tickmark will be displayed on the left side, and BottomRight on the right side of the axis.

Tick marks can be styled using TopLeftTickMarkTemplate and BottomRightTickMarkTemplate properties, as well as changed dynamically in the BeforeTickMarkShown event handler. SliderAxisBeforeTickMarkShown event args class gives you full control over template, data being displayed and visibility of every tickmark. Default tickmark DataTemplates can be found in the default XAML template for NumericAxis.

NumericAxis supports direct two-way binding with any dependency property accepting numeric input, see our databinding demos.

DateTimeAxis

Main difference between NumericAxis and DateTimeAxis is in the type of values used (DateTime instead of double), and properties used to specify data values and tickmark increments, and tickmark data value formatting. Here's an example of the DateTimeAxis with the range of a week, data increments of a day, and showing day names on each tickmark:

<ComponentArt:RangeSlider SelectionStart="11/3/2009" SelectionEnd="11/5/2009">
    <ComponentArt:RangeSlider.Axis>
        <ComponentArt:DateTimeAxis Minimum="11/1/2009" Maximum="11/7/2009" SmallChange="Day" 
                                   AnnotationFormat="dddd" TickMarkPosition="BottomRight"/>
    </ComponentArt:RangeSlider.Axis>
</ComponentArt:RangeSlider>

AnnotationFormat property is a string used to specify the date/time format for display. For more information on DateTime formatting, please see Silverlight documentation for standard and custom date and time format strings.

Note: due to the nature of XAML processing in Silverlight, Minimum and Maximum dates hard-coded in XAML cannot be localized and always have to be entered in the US format (mm/dd/yyyy). Same goes for dates specified in RangeSlider's SelectionStart and SelectionEnd properties.

To specify tickmark increments like "2 days" or "4 months", you have to combine TickMarkInterval and numeric TickMarkIntervalMultiplier properties, as in:

<ComponentArt:RangeSlider SelectionStart="11/3/2009" SelectionEnd="11/5/2009">
    <ComponentArt:RangeSlider.Axis>
        <ComponentArt:DateTimeAxis TickMarkInterval="Day" TickMarkIntervalMultiplier="2" Minimum="11/1/2009" Maximum="11/7/2009" 
                                   SmallChange="Day" AnnotationFormat="dddd" TickMarkPosition="BottomRight"/>
    </ComponentArt:RangeSlider.Axis>
</ComponentArt:RangeSlider>

For tickmark positioning and templating, please see the NumericAxis section above.

DateTimeAxis can be directly bound to DateTime dependency properties, such as Calendar.SelectedDate.

PixelMapAxis

PixelMapAxis is most useful together with an embedded image. Similar to good olde HTML image maps, it allows you to tie axis data points to specific pixels in the image. In this example, we're combining PixelMapAxis and an image of a chart. Note that the RangeSlider is using a non-default selection thumb.

<ComponentArt:RangeSlider SelectionStart="50" SelectionEnd="299" Theme="{StaticResource windowRangeSlider}">
    <ComponentArt:RangeSlider.Axis>
        <ComponentArt:PixelMapAxis Tickmarks="0 50 100 150 200 250 299 349 399 449 499 549 599" >
            <ComponentArt:PixelMapAxis.Content>
                <Image Source="areaChart.png" Stretch="None" HorizontalAlignment="Left" />
            </ComponentArt:PixelMapAxis.Content>
        </ComponentArt:PixelMapAxis>
    </ComponentArt:RangeSlider.Axis>
</ComponentArt:RangeSlider>

The most important property is Tickmarks, a collection of pixel positions corresponding to data points in the image. Positions do not have to be uniformly distributed, as seen in this example of the educational application with data points tied to the centers of planets (image courtesy of NASA/JPL-Caltech):

<ComponentArt:RangeSlider SelectionStart="127" SelectionEnd="433" ShowTooltip="True" BeforeTooltipShown="RangeSlider_BeforeTooltipShown">
    <ComponentArt:RangeSlider.Axis>
        <ComponentArt:PixelMapAxis Tickmarks="104 116 127 148 182 259 433 626 793">
            <ComponentArt:PixelMapAxis.Content>
                <Image Source="/CATimeline;component/Assets/solar_nasa.jpg" Stretch="None" HorizontalAlignment="Left"/>
            </ComponentArt:PixelMapAxis.Content>
        </ComponentArt:PixelMapAxis>
    </ComponentArt:RangeSlider.Axis>
</ComponentArt:RangeSlider>

All axis controls, including PixelMapAxis allow for custom content (e.g. image) to be embedded via Content property. If the property is set, the default axis line and tickmarks will not be displayed, and all tickmark–related properties ignored.

ObjectArrayAxis

ObjectArrayAxis can display any collection of objects. Here's an example from a real-estate search application, using a collection of strings as a source:

<ComponentArt:RangeSlider SelectionStart="1 Bedroom" SelectionEnd="Penthouse">
    <ComponentArt:RangeSlider.Axis>
        <ComponentArt:ObjectArrayAxis Items="{StaticResource objectAxisSource}" TickMarkPosition="BottomRight"/>
    </ComponentArt:RangeSlider.Axis>
</ComponentArt:RangeSlider>

Data points collection (objectAxisSource) is defined as follows:

public class AxisSource : System.Collections.ObjectModel.Collection<string>
{
  public AxisSource()
  {
      this.Add("Bachelor");
      this.Add("1 Bedroom");
      this.Add("2 Bedroom");
      this.Add("3+ Bedroom");
      this.Add("Penthouse");
      this.Add("Mansion");
  }
}

RangeSlider properties SelectionStart and SelectionEnd will expose actual objects from the source collection, allowing for direct data binding with appropriate dependency properties.

That's all for now. ComponentArt Chart can also act as a RangeSlider axis, but that's a topic for another post.

Did we cover most use cases? Do you have an idea for additional axis type? Please let us know!

Implementing TreeView in a NavBar

jovca — Mon, 30 Nov 2009 18:13:00 GMT

One question that pops up surprisingly often is how to embed a TreeView control (or any other, but TreeView owes its dominant popularity to Outlook navigation pane) inside a NavBar panel and have it fill up the whole panel. This proved trickier than it seems, as NavBar would allow the NavBarItem.Header content to grow without constrains, helpfully providing scrolling chevrons for any content bigger than the visible area. TreeView provides its own scrollbars with additional functionality like autoscrolling on drag & drop, and scrolling-to-reveal children nodes, all of which do not work properly if the TreeView is not constrained to the visible area of the page.

Starting with Web.UI Suite 2009.3 SP1, NavBarItem has a new boolean property: SingleChildMode. When set to true in a group–level NavBarItem, it will allow just one child NavBarItem, and will resize its Header content to fit the entire visible area of the panel. It will also set the child's Style property to null, removing default button–like style and giving the end developer control over the whole area of the panel. Of course, Header style can still be explicitly set via its NavBarItem.HeaderStyle property.

Here's a simple copy of the Outlook navigation pane:

Source code:

<my:NavBar>
    <my:NavBarItem Header="Mail" SingleChildMode="True" IconSource="mail-big.png" IsSelected="True">
        <my:NavBarItem>
            <my:NavBarItem.Header>
                <my:TreeView HeaderVisibility="Collapsed" BorderBrush="Transparent" BorderThickness="0">
                    <my:TreeViewNode Header="Mailbox" IconSource="mailbox.png" IsExpanded="True">
                        <my:TreeViewNode Header="Inbox" IconSource="inbox.png"/>
                        <my:TreeViewNode Header="Drafts" IconSource="drafts.png"/>
                        <my:TreeViewNode Header="Outbox" IconSource="outbox.png" />
                        <my:TreeViewNode Header="Junk E-mail" IconSource="junk.png"/>
                        <my:TreeViewNode Header="Deleted Items" IconSource="deleted.png" />
                        <my:TreeViewNode Header="Sent Items" IconSource="sent.png" />
                        <my:TreeViewNode Header="Search Folders" IconSource="search.png" />
                    </my:TreeViewNode>
                </my:TreeView>
            </my:NavBarItem.Header>
        </my:NavBarItem>
    </my:NavBarItem>
    <my:NavBarItem Header="Options" IconSource="notes-big.png">
    <!-- skipped for brevity -->
    </my:NavBarItem>
</my:NavBar>