Blog

NetAdvantage for Web Client: Silverlight 2009.2

[Infragistics] Devin Rader / Monday, October 26, 2009

Its that time again.  Today we are releasing NetAdvantage for Web Client: Silverlight 2009.2, and for such as short development cycle (only 1 month of actual dev time), we’ve packed a ton of new features into this release including 6 new controls, 3 new grid features and one new framework.  Read on for details on the exciting new things that are included in this release.

xamWebGrid - Date and Image Columns

The xamWebGrid now includes two new specialized column types, the DateColumn and the ImageColumn.  DateColumn embeds the Silverlight DatePicker control into a column and is useful for displaying and editing DateTime typed values.  ImageColumn simplifies embedding images into the grid and accepts a string, URI or BitmapImage as an image source.

To use the new column types you have two options, first if you have AutoGenerateColumns enabled the grid will automatically use these new column types for items source properties of DateTime or BitmapImage types.  If you are explicitly specifying columns, you simply add the other column types to the columns collection and provide a key:

<iggrid:XamWebGrid x:Name="xamWebGrid1" AutoGenerateColumns="False">
    <iggrid:XamWebGrid.Columns>                
        <iggrid:TextColumn Key="Country" />
        <iggrid:ImageColumn Key="FlagString" />
        <iggrid:ImageColumn Key="FlagUri" />
        <iggrid:ImageColumn Key="FlagImage" />
        <iggrid:DateColumn Key="Independence" />
    </iggrid:XamWebGrid.Columns>
</iggrid:XamWebGrid>

xamWebGrid - Row Summaries

Next, the xamWebGrid allows to easily add a Summary Row which lets you show one or more pieces of summary information for columns included in the grid.  Enable the summary row using the new SummaryRowSettings object:

<iggrid:XamWebGrid x:Name="xamWebGrid1"> 
    <iggrid:XamWebGrid.SummaryRowSettings> 
        <iggrid:SummaryRowSettings AllowSummaryRow="Bottom" /> 
    </iggrid:XamWebGrid.SummaryRowSettings>                    
</iggrid:XamWebGrid>

This new object provides a variety of properties that allow you to configure things like when the summary calculation is executed, and what the scope of the calculation should be.

Now that the row is enabled, you can add Summary operands to columns in the grid using the SummaryColumnSettings object on the Column:

<iggrid:XamWebGrid x:Name="xamWebGrid1">
    <iggrid:XamWebGrid.SummaryRowSettings>
        <iggrid:SummaryRowSettings AllowSummaryRow="Bottom" />
    </iggrid:XamWebGrid.SummaryRowSettings>
    <iggrid:XamWebGrid.Columns>
        <iggrid:TextColumn Key="ProductPrice">
            <iggrid:TextColumn.SummaryColumnSettings>
                <iggrid:SummaryColumnSettings>
                    <iggrid:SummaryColumnSettings.SummaryOperands>
                        <iggrid:SumSummaryOperand />
                        <iggrid:AverageSummaryOperand />
                        <iggrid:CountSummaryOperand />
                        <iggrid:MaximumSummaryOperand />
                        <iggrid:MinimumSummaryOperand />
                    </iggrid:SummaryColumnSettings.SummaryOperands>
                </iggrid:SummaryColumnSettings>
            </iggrid:TextColumn.SummaryColumnSettings>
        </iggrid:TextColumn>
    </iggrid:XamWebGrid.Columns>
</iggrid:XamWebGrid>

Adding operands to a column causes a Summary glyph to be shown in the column header, allowing end users to select one or more summaries they want to execute on a column. 

The grid includes five basic operands you can add to a column including:

  • Sum
  • Average
  • Count
  • Min
  • Max

Each operand includes properties that allow you to set the Selection label and Summary Row label strings, a well as automatically enable or disable the summaries for the column.

You can also create your own custom operands by deriving two classes, one from the SummaryOperandBase class and the other from the SynchronousSummaryCalculator class.  The example below demonstrates how you could create an operand that calculates the Standard Deviation of the column values.

<iggrid:TextColumn Key="Age">
    <iggrid:TextColumn.SummaryColumnSettings>
        <iggrid:SummaryColumnSettings>
            <iggrid:SummaryColumnSettings.SummaryOperands>
                <local:StandardDeviationOperand IsApplied="True" />
            </iggrid:SummaryColumnSettings.SummaryOperands>
        </iggrid:SummaryColumnSettings>
    </iggrid:TextColumn.SummaryColumnSettings>
</iggrid:TextColumn>

The grid will automatically detect and display custom operands added to a column:

Drag and Drop Framework

In addition to new controls and control features, we’ve added a new Drag and Drop framework to NetAdvantage for WebClient: Silverlight.  This framework dramatically simplifies the effort needed to add drag and drop operations to your Silverlight application, allowing you to use XAML to do most of the heavy lifting.

The framework leverages attached properties to allow you to designate any UI element in your application as a DragSource (something that can be dragged) or DropTarget (something that can be dropped on) as shown in the simple sample below:

<Grid x:Name="LayoutRoot">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    
    <Rectangle x:Name="RedBox" Fill="Red" Height="200" Width="200" 
                  VerticalAlignment="Center" HorizontalAlignment="Center">
        <igdnd:DragDropManager.DragSource>
            <igdnd:DragSource IsDraggable="True" DragChannels="Box" 
                                 Drop="DragSource_Drop">
                <igdnd:DragSource.DragTemplate>
                    <DataTemplate>
                        <Image Source="{Binding DragImage.Source}" Opacity=".5" />
                    </DataTemplate>
                </igdnd:DragSource.DragTemplate>
            </igdnd:DragSource>
        </igdnd:DragDropManager.DragSource>
    </Rectangle>
    
    <Rectangle x:Name="BlueBox" Fill="Blue" Height="200" Width="200"
                  VerticalAlignment="Center" HorizontalAlignment="Center" 
                  Grid.Column="1">
        <igdnd:DragDropManager.DropTarget>
            <igdnd:DropTarget IsDropTarget="True" DropChannels="Box" />
        </igdnd:DragDropManager.DropTarget>
    </Rectangle>
    
    <Ellipse x:Name="GreenCircle" Fill="Green" Height="200" Width="200"
                VerticalAlignment="Center" HorizontalAlignment="Center" 
                Grid.Column="2">
        <igdnd:DragDropManager.DropTarget>
            <igdnd:DropTarget IsDropTarget="True"  />
        </igdnd:DragDropManager.DropTarget>
    </Ellipse>
</Grid>

In this sample the RedBox element, configured as a DragSource, can be dragged to another area of the application while the the BlueBox and GreenCircle, configured as DropTargets, allows UI elements to be dropped on it.   The framework exposes events that notify you as elements are being dragged or are dropped, allowing you update your application as those interactions occur.

The framework also includes properties that allow you configure Channels on DragSources and DropTargets.  Channels allow for a private connection between a DragSource and a DropTarget, allowing you to control what UI elements can be a DragSource for a particular DropTarget.  For example, I can modify the above sample to specify a DragChannel of “Box” on the RedBox DragSource and a DropChannel also of “Box” on the BlueBox DropSource.  Doing this means that the framework will only allow the RedBox to be dropped onto the BlueBox.  As shown in the screenshot below, trying to drop the RedBox onto the GreenCircle results on the DropNotAllowedHere cursor to be shown:

 

xamWebHtmlViewer

The new xamWebHtmlViewer solves the problem of how to display all of that HTML content formatted content you have stored in your database, or that legacy web application inside of your your shiny new Silverlight application.  The control allows you to overlay HTML content or entire pages on top of your Silverlight application as shown in the screenshot below which shows the Infragistics website being displayed inside of a full frame Silverlight application:


The xamWebHtmlViewer control accepts HTML content from a variety of sources including:

  • Uris 
  • Html Code
  • Element ID

This means that in addition to full web pages, you can use the control to display simple snippets of HTML.

This was create by providing a string of HTML to the xamWebHtmlViewers HtmlCode property:

this.xamWebHtmlViewer.HtmlCode = "<p style=\'font-family:arial;" +
                "font-size:12pt;\'>This is an example of some " +
                "<span style=\'color:Red;\'>styled</span> " +
                "text.</p>";

xamWebSliders

Also introduced in 2009.2 are a set of slider controls collectively called xamWebSliders.  There are four individual controls included that target different slider scenarios:

  • XamWebNumericSlider – A single thumb slider with a Numeric scale
  • XamWebDateTimeSlider – A multi-thumb slider with a Numeric scale
  • XamWebNumericRangeSlider – A single thumb slider with a DateTime scale
  • XamWebDateTimeRageSlider – A multi-thumb slider with a DateTime scale

Using the xamWebNumericSlider is simple, simply specify Minimum and Maximum scale values and a current Value:

<igsld:XamWebNumericSlider Value="50" MinValue="0" MaxValue="100" />

If you need to allow users to set more than one value on the slider, or even set a range you can use the xamWebNumericRangeSlider, which includes a Thumbs collection allowing you to specify as many thumbs as you need:

<igsld:XamWebNumericRangeSlider MinValue="0" MaxValue="100">
    <igsld:XamWebNumericRangeSlider.Thumbs>
        <igsld:XamWebSliderNumericThumb Value="25" />
        <igsld:XamWebSliderNumericThumb Value="50" />
        <igsld:XamWebSliderNumericThumb Value="75" />
    </igsld:XamWebNumericRangeSlider.Thumbs>
</igsld:XamWebNumericRangeSlider>

The xamWebDateTimeSlider and xamWebDateTimeRangeSlider controls function the same as their numeric counterparts but are designed to make dealing with DateTime values easier, rather than making you deal with more generic types like Object.

The control includes options for configuring features like tickmarks, slider interactions, orientation and many other aspects of a slider.

xamWebContextMenu

Finally, based on the xamWebMenu, we are introducing the xamWebContextMenu, which as its name suggests allows you to add context menu capabilities to your Silverlight application, including the ability to show menus in response to the mouse’s right-click.  Because the xamWebContentMenu is based on the same infrastructure as the xamWebMenu, you get all the same menu capabilities like menu item icons and checkboxes, multi-level menus, menu item templates and more. 

To associate the context menu with a specific UI element, you set the ContentMenuService attached property.  Then the user clicks this element, the context menu will appear.  The properties of the ContextMenuService also allow you to set the specific interaction needed to open the menu (right or left click) and any modifier keys (CTRL, Alt, etc) that the end user needs to hold in order for the menu to appear:

<Rectangle x:Name="contentMenuTarget">
    <igmenu:ContextMenuService.Manager>
        <igmenu:ContextMenuManager OpenMode="RightClick">
            <igmenu:ContextMenuManager.ContextMenu>
                <igmenu:XamWebContextMenu>
                    <igmenu:XamWebMenuItem Header="Cut" />
                    <igmenu:XamWebMenuItem Header="Copy" />
                    <igmenu:XamWebMenuItem Header="Paste" />
                </igmenu:XamWebContextMenu>
            </igmenu:ContextMenuManager.ContextMenu>
        </igmenu:ContextMenuManager>
    </igmenu:ContextMenuService.Manager>
</Rectangle>

The ContextMenuService exposes the xamWebContextMenu control which allows you to define the actual menu items that will appear in the menu:

Conclusion

Our 2009.2 release contains some amazing new controls and features, and of course there is far more detail in each one than I can cover here.  To take a deeper dive into all of the features, check out our updated samples browser at http://samples.infragistics.com/silverlight.  Ready to get started implementing the new features, check out our online videos which will walk you through the use of these features.  And finally if you have questions about any of these new feature, you can participate in our online forums.