The previous version of Intersoft’s Silverlight tools named Aqua, consisted of WebFishEye and WebCoverFlow, have been rebranded to UXDock and UXFlow respectively. These controls, now part of ClientUI, were rewritten from the ground-up to take advantage of latest Silverlight 4 technology such as items template, items panel, and full support for MVVM pattern development.

This section provides a list of breaking changes from the previous version of Aqua to the new version which is now part of the ClientUI family.

Control Name

In Intersoft WebUI Studio 2009 R2, there are two controls included in WebAqua for Silverlight, they are WebFishEye and WebCoverFlow. In Intersoft WebUI Studio 2010 R1, these controls’ name has changed. WebFishEye is currently known as UXDock and WebCoverFlow is known as UXFlow. Consequently, both UXDock and UXFlow have now become part of Intersoft ClientUI controls.

Namespace

The namespace of the WebFishEye control is ISNet.Silverlight.WebAqua.WebFishEye. The namespace of the new version of this control, UXDock, is Intersoft.Client.UI.Aqua.UXDock.UXDock.
The namespace of the WebCoverFlow control is ISNet.Silverlight.WebAqua.WebCoverFlow. The namespace of the new version of this control, UXFlow, is Intersoft.Client.UI.Aqua.UXFlow.UXFlow.

Tag Prefix

Since the control name has changed, there are also changes in the tag prefix of the corresponding controls. For example, the WebFishEye control that used ISNet_Silverlight_WebAqua:WebFishEye as the tag prefix is now simplified to Intersoft:UXDock. WebCoverFlow that used ISNet_Silverlight_WebAqua:WebCoverFlow as the tag prefix, now becomes Intersoft:UXFlow.

New Structure in UXDock

The previous version of WebFishEye for Silverlight has structure as shown in the following example:

<ISNet_Silverlight_WebAqua:WebFishEye Height="128" HorizontalAlignment="Left"
    VerticalAlignment="Bottom" BackgroundMode="ComplexImages" ...>
    <ISNet_Silverlight_WebAqua:WebFishEye.Buttons>
        <ISNet_Silverlight_WebAqua:WebFishEyeButton ImageSource="HD.png"
            Text="Windows HD (C:)"/>
            <ISNet_Silverlight_WebAqua:WebFishEyeButton.StackButtons>
                <ISNet_Silverlight_WebAqua:WebFishEyeStackButton
                    ImageSource="Automator.png" Text="Automator"/>
            </ISNet_Silverlight_WebAqua:WebFishEyeButton.StackButtons>
        </ISNet_Silverlight_WebAqua:WebFishEyeButton>
    </ISNet_Silverlight_WebAqua:WebFishEyeButtons>
</ISNet_Silverlight_WebAqua:WebFishEye>

In the new UXDock, the structure is simplified as shown in the following example:

<Intersoft:UXDock x:Name="SampleControl1" Height="128" HorizontalAlignment="Left"
    VerticalAlignment="Bottom" BackgroundMode="ComplexImages" ...>
    <Intersoft:UXDockButton Icon="HD.png" Text="Windows HD (C:)" ...>
        <Intersoft:UXStackItem Icon=" Automator.png " Text="Automator"/>
    </Intersoft:UXDockButton>
</Intersoft:UXDock>

WebFishEye has WebFishEye.Buttons object that keeps the collection of WebFishEyeButton. Each WebFishEyeButton can have a collection of WebFishEyeButton.StackButtons. As UXDock is redesigned to take advantage of latest Silverlight technology, it does no longer use the WebFishEye.Buttons collection as in the previous version. You can specify a collection of UXDockButton in the content of UXDock directly. A collection of UXStackItem can be specified as the items of a UXDockButton.

To programmatically access the buttons collection of UXDock, use the Items property. For more information about ItemsControl architecture used in UXDock, see Items Control Overview.

New Structure in UXFlow

The previous version of WebCoverFlow for Silverlight has structure as shown in the following example:

<ISNet_Silverlight_WebAqua:WebCoverFlow DefaultPicture="defaultPicture.png" ...>
    <ISNet_Silverlight_WebAqua:WebCoverFlow.Items>
  <ISNet_Silverlight_WebAqua:WebCoverFlowItem ImageSource="Beach1.jpg"
                  Title="Beach" />
    </ISNet_Silverlight_WebAqua:WebCoverFlow.Items>
</ISNet_Silverlight_WebAqua:WebCoverFlow>

In the new UXFlow, the structure is simplified as shown in the following example:

<Intersoft:UXFlow x:Name="SampleControl1" DefaultPicture="defaultPicture.png" ...>
    <Intersoft:UXFlowItem ImageSource="Beach1.jpg" Title="Beach" />
</Intersoft:UXFlow>

WebCoverFlow has WebCoverFlow.Items property that contains a collection of WebCoverFlowItem.  As UXFlow is redesigned to use latest Silverlight standards, it does no longer require an explicit XAML definition to the Items property, although the Items property is still made available for programmatic access purpose. As seen in the example above, the UXFlowItem can be defined directly inside the UXFlow declaration.

UXDock Background Mode

WebFishEye provides three modes in BackgroundMode property: Simple, ComplexImages, and Custom. UXDock now provides two modes in BackgroundMode property: Simple and ComplexImages. Custom background is still supported in UXDock using template.

Simpler Dock Background Declaration

The following example code shows the definition of complex image background in the WebFishEye control.

<ISNet_Silverlight_WebAqua:WebFishEye Height="128" HorizontalAlignment="Left"  
    VerticalAlignment="Bottom" BackgroundMode="ComplexImages" ...>
    <ISNet_Silverlight_WebAqua:WebFishEye.BackgroundImageRight>
        <Image Source="../../Images/Docks/GlassRightGlow.png" Height="81"/>
    <ISNet_Silverlight_WebAqua:WebFishEye.BackgroundImageRight>
    <ISNet_Silverlight_WebAqua:WebFishEye.BackgroundImageLeft>
        <Image Source="../../Images/Docks/GlassRightGlow.png" Height="81"/>
    <ISNet_Silverlight_WebAqua:WebFishEye.BackgroundImageLeft>
    <ISNet_Silverlight_WebAqua:WebFishEye.BackgroundImageCenter>
        <Image Source="../../Images/Docks/GlassRightGlow.png" Height="81"/>
    <ISNet_Silverlight_WebAqua:WebFishEye.BackgroundImageCenter>
</ISNet_Silverlight_WebAqua:WebFishEye>

In contrast, the following example code shows the definition of complex image background in the UXDock control.

<Intersoft:UXDock x:Name="SampleControl1" 
    BackgroundImageLeft="../../Images/Docks/GlassRightGlow.png"
    BackgroundImageCenter="../../Images/Docks/GlassRightGlow.png"
    BackgroundImageRight="../../Images/Docks/GlassRightGlow.png"
    BackgroundMode="ComplexImages" ...>

As seen in the above example code, the complex background images are now specified as simple properties which makes it easier to use.

More Properties Added in UXDock

UXDock adds more properties that enable developers to do more customization over Arc stack mode. Five properties that related to Arc stack mode is added in the UXDockButton, which are StackArcItemHeight, StackArcItemWidth, StackArcLaunchOffset, StackArcTextOffset and StackArcTextPosition.

Drag and Drop Support

Both UXDock and UXFlow now support drag and drop behavior. This behavior is not supported in the WebFishEye and WebCoverFlow.

For more information about the drag and drop framework in ClientUI, see Drag-drop Framework Overview.

Simpler Separator Declaration

To add a separator in WebFishEye, you define it as WebFishEye button with its Type property set to Separator.

The following example shows the XAML definition of separator in the WebFishEye.

<ISNet_Silverlight_WebAqua:WebFishEyeButton Type="Separator" Opacity="0.2"/>

In UXDock, the separator is defined as UXDockSeparator object, which is shown in the following example:

<Intersoft:UXDockSeparator Opacity="0.5"/>

Default Behavior of Grid Stack Mode

In WebFishEye for Silverlight, the caption of the selected item is displayed as the stack grid header. In UXDock, each stack items contain of image and text. The text of each stack item is displayed at the bottom of the item’s image. In UXDock, the stack grid can have stack grid header text and stack grid footer text such as shown in the following illustration.

Support MVVM Pattern in DataBinding

WebCoverFlow for Silverlight supports data binding to collection type of datasource such as List<T> or IEnumerable type of datasource. The datasource is assigned to ItemSource property at runtime.

In addition to the traditional object data binding, the new UXFlow has supported the most recent databinding pattern such as the MVVM pattern.

The following example code shows the two-way data binding XAML definition using MVVM pattern in the UXFlow.

<Intersoft:UXPage.Resources>
    <Assets:HotelsViewModel x:Key="HotelsData"/>
</Intersoft:UXPage.Resources>
 
<Grid x:Name="LayoutRoot">
        <Intersoft:DockPanel FillChildMode="Custom" DataContext="{StaticResource
            HotelsData}">
            <Intersoft:UXFlow x:Name="SampleControl1" BorderBrush="{x:Null}"
                EnableLoadOnDemand="False" Intersoft:DockPanel.IsFillElement="True"
                SelectedItem="{Binding SelectedItem, Mode=TwoWay}" MaxHeight="480"
                ItemsSource="{Binding Hotels}" ImageMemberPath="Hotel.Image"
                TitleMemberPath="Hotel.Name" SubTitleMemberPath="Hotel.Location"
                Background="{x:Null}"/>
        </Intersoft:DockPanel>
</Grid>

To learn more about MVVM pattern support in ClientUI, see MVVM Pattern Overview.

For more information about the new UXDock and UXFlow controls, see UXDock and UXFlow respectively.

For more questions and issues related to migration, please visit ClientUI Community Forum at http://www.intersoftpt.com/Community/ClientUI/.