We are proud to announce that we made a lot of progress with Tools Silverlight for Essential Studio 2010 Volume 3, and here you can preview the details. Commonly, we target toward providing compatibility with Silverlight 4, seamless integration with Visual Studio & Blend, built-in skins, blendability, MVVM support, localization, and other usability-related fixes and features based on customers’ feedback. Here I am going to briefly tell you about the new features/controls that we created for this release.

Ribbon Control

Volume 3 will add dynamic resizing, a command manager, a ribbon window, and a context menu to the ribbon control. Synchronization and a customization dialog will be included for the quick-access toolbar—which can add items through the context menu. Also, keyboard navigation, localization, and WPF code compatibility will be added as well as design-time extensibility for VS and MS Blend. Please see this post, which talks about these new features in detail.

Docking Manager

The DockingManager will support the Maximize button and be able to display Menu, AutoHide, and Close buttons in individual windows. Freezing layouts will be supported as well as new themes, context menus, and methods for docking, and tabbed groups. You’ll also be able to show a different caption foreground for an active window, and display a border when hovering over an unselected tab item. Localization support and the ability to customize templates with Blend will also be included.

TreeViewAdv

The Volume 3 release will add context menus, new themes, Blend support, and many revamped features.

Editor Controls

We have completely revamped all text boxes, such as IntergerTextBox, PercentTextBox, DoubleTextBox, and CurrencyTextBox with the following additional features: culture support, different colors for values of zero, built-in themes, and mouse-wheel scrolling. You’ll also be able to set minimum and maximum values, and insert watermarks.

MaskedTextBox

Keyboard and mouse support will be revamped, all cultures will be supported, and built-in themes will be added.

DateTimeEdit

Culture support, different colors for values of zero, built-in themes, and mouse-wheel scrolling will be added. You’ll also be able to set minimum and maximum values, and insert watermarks.

HierarchyNavigator

This new control looks similar to Windows 7 bread crumbs. It also supports customizing templates with MS Blend; binding data to business objects, XML, and WCF services; and supporting command binding. Volume 3 will also include keyboard navigation, an edit mode with AutoComplete, multiple new skins, navigation history, and ToolTips.

Context Menu

With this new control, you can provide context menu support for all of your controls with the following features: radio buttons, check boxes, and icons. Data can be bound through data templates and hierarchical data templates. Built-in themes will be added along with cross-browser support.

Window Control

This is a new control that will be added in Volume 3. You’ll be able to display modal and modeless dialogs, choose from different alerts and prompt windows, and utilize different resize modes. MS Blend will be completely supported, new animations will be added for closing a window, and built-in themes will be included.

Window Control

Window Control in Prompt Mode

Button Controls

We added a set of button-related controls (ButtonAdv, Split Button, and DropDown Button) in Volume 3 that will provide you with the following cool features: MS Blend support, command binding, built-in themes, drop-down styles, and various size modes.

DropDownButton with TreeViewAdv

Introduction

Localization is the process of providing controls in different cultures, allowing end-users to set their own culture. In the globalized world, you cannot just ship software with only one language; you have to be in a position to provide an application with localized culture support. In Essential Studio Volume 3, Syncfusion Silverlight Tools controls ship with complete support for localization, which makes your life easier by being able to localize your entire application.

Here we will discuss how you can enable localized support for your application with Syncfusion controls.

Getting Started

Here are the primary things to do for localizing Syncfusion Silverlight controls in your application:

1. Add resources for different cultures with localized content.
2. Add the supported cultures.
3. Assign the current UI culture to the application.

Step 1 - Add Resources

To localize Syncfusion Silverlight controls, you need to create resource files with the proper naming convention for each culture. The following steps need to be done when localizing strings for your culture.

1. Add Resource (.resx) files in the Resources folder for different cultures. (Here, .resx files in different cultures or invariant cultures should be placed in the Resources folder of your project).
2. Resource files should be named AssemblyName.CultureName.resx and AssemblyName.resx for invariant cultures.

In step two, AssemblyName is the Syncfusion Silverlight control assembly name and CultureName is the culture code of the resource you want to show in the UI. If your conversion is only for an invariant culture, the .resx file does not need to contain a culture suffix. 

For example …

• Syncfusion.Tools.Silverlight.fr-FR.resx – Is the French resource for Syncfusion.Tools.Silverlight assembly.
• Syncfusion.Tools.Silverlight.resx – Is an invariant culture resource for Syncfusion.Tools.Silverlight assembly.

     3. Apply the localized content in the Syncfusion.Tools.Silverlight.fr-FR.resx file for each string variable, as given below, for localizing the Ribbon Control Customization dialog and context menu.

Note: This table shows the necessary string variable names that are needed only for this post. You may need to apply many other string variables based on the control feature. Complete information will be published with the 2010 Volume 3 documentation.

Step 2 - Add Supported Cultures

It’s very important to add supported cultures in the sample application project before running the application.

1. In the Solution Explorer, right-click your sample application project and choose Unload Project from the context menu. Notice that the project will be unavailable.
2. Right-click the project again and select the Edit SampleProjectName.csproj option.
3. In the .csproj file, find the <SupportedCultures></SupportedCultures> tags. By default, the tags will be empty. So, add the cultures that you want to be supported, separating each with a semicolon if there are many.

For example: <SupportedCultures>fr-FR</SupportedCultures>

     4. Save the project and reload it by right-clicking on the SampleProjectName.csproj. Then choose Reload SampleProjectName.csproj.

Step 3 - Assign Current UI Culture to the Application

By default, the current culture will be “en-US,” which you can check from System.Threading.Thread.CurrentThread.CurrentUICulture.

Now you can change CurrentUICulture as you want, as seen below.

Here, CurentUICulture should be set before IntializeComponent in your StartUp page (MainPage.xaml.cs) or you can set it in App.xaml.cs in the Application_Startup event.

   1: public MainPage()

   2: {

   3: System.Threading.Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo("fr-FR");

   4:  

   5: InitializeComponent();

   6: }

Or in the App.xaml.cs file ...

   1: private void Application_Startup(object sender, StartupEventArgs e)

   2: {

   3: System.Threading.Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo("fr-FR");

   4: this.RootVisual = new MainPage();

   5: }

Output

Ribbon Control for Invariant Culture

French Culture Assigned as Current UI Culture for Ribbon Control

Customization Dialog for Invariant Culture

French Culture Assigned as Current UI Culture for Customization Dialog

Conclusion

The same pattern is applicable to all other Syncfusion Tools Silverlight controls, and other packages will have this support added on or before the 2010 Volume 4 release. We welcome your valuable feedback about this feature to enhance support for Volume 3, which is scheduled for mid July.

Silverlight Ribbon is a powerful user interface library that allows users to create UIs similar to Office 2007 packages. Our product exposes most of the features of the new UI and keeps in tack with the Silverlight architecture. Configuring and designing the layout is very easy through XAML code and Expression Blend.

Interactive Features

Ribbon Command Manager

Ribbon Command Manager allows users to register custom commands. Those commands will be shown in the Customize Quick Access Toolbar (QAT) dialog. End-users can pick the commands and add them to the QAT.

The Customize QAT dialog implementation focuses mainly on end-user customization. Using this window, end-users can easily customize the QAT and register the custom commands, using the Ribbon Command Manager Class, so that end-users can pick the commands from this Dialog.

Dynamic Resizing of Ribbon Control

Dynamic resizing support prevents ribbon items from being hidden or clipped when resizing the ribbon; ribbon items will resize themselves so that they can fit into the ribbon. The property IsAutoSizeFormEnabled decides whether the item has to change size or not.

The following illustrations will explain the concept step-by-step.

Highly Customizable ScreenTip

A ScreenTip is a small pop-up that appears when the mouse cursor hovers over an icon or a ribbon element (command). The pop-up provides details that explain the command's function. When the mouse is moved away from the ribbon element, the ScreenTip will disappear.

Parts of the ScreenTip

Header – Specifies the header of the ScreenTip.

Description – Specifies the actual content of the ScreenTip

Image – Specifies the image for the ScreenTip

Help Text – Specifies the text used for help information

Help Image – Specifies the image used for help information

Ribbon Context Menu

The ribbon context menu provides several options, through which the user can customize the QAT, minimize the ribbon, or add an item to the QAT.

Ribbon Window

Users can also host the ribbon control in a ribbon window, which provides a complete Office 2007 look and feel.

More Features

Other than the above features, this control also ships with the following basic features:

· Automatic resizing and minimization

· Ribbon galleries and ribbon menu groups

· Application menu

· Quick access toolbar (QAT)

· QAT customization dialog

· Easy customization using Expression Blend

· Command support

· Localization support

· Keyboard interaction

· Out of Browser support

Conclusion

The ribbon control enables users to organize an application into exact Office 2007 UI with neat tabs, buttons, and menu items. Enhanced design time and Blend support reduce the design-time and increase application quality.

Introduction

Model-View-ViewModel (MVVM) is a pattern Microsoft strongly suggests you use with Silverlight or WPF applications. The main intention of this pattern is to split your application development model into designer and developer parts. In order to satisfy the MVVM pattern, our Syncfusion controls support MS Blend, command binding, and data binding. All of our Syncfusion Silverlight controls satisfy these needs in Essential Studio 2010 Volume 3. However, I am not going into detail about blendability in this post. I will just talk about leveraging command-binding support with Syncfusion controls.

Most of the Syncfusion Silverlight controls support command binding to make life easier for developers, who can have their user-defined logics and custom commands in the view model.

The following code explains a typical view model for the ribbon control.

ViewModel

Create a new ViewModel class named SyncfusionViewModel, which contains Ribbon control (View), Rich Textbox Editor (view) and Command properties to connect the view with the model. SyncfusionViewModel is used as DataContext for the main view.

Silverlight doesn’t have built-in delegate commands, so we need to created delegate commands. Here, this is named RibbonCommand.

public class RibbonCommand : ICommand

{

    public event EventHandler CanExecuteChanged;

    readonly Predicate<Object> _canExecute = null;

    readonly Action<Object> _executeAction = null;

    public RibbonCommand(Action<object> executeAction, Predicate<Object> canExecute)

    {

        _executeAction = executeAction;

        _canExecute = canExecute;

    }

    public RibbonCommand(Action<object> executeAction)

        : this(executeAction, null)

    {

        _executeAction = executeAction;

    }

    public void UpdateCanExecute()

    {

        if (CanExecuteChanged != null)

            CanExecuteChanged(this, new EventArgs());

    }

    public bool CanExecute(object parameter)

    {

        return _canExecute == null || _canExecute(parameter);

    }

    public void Execute(object parameter)

    {

        if (_executeAction != null)

            _executeAction(parameter);

        UpdateCanExecute();

    }

}

For the sample ribbon control application, there are three RibbonCommands (Cut, Copy, and Paste) created and bound with the view (ribbon control).

public class SyncfusionViewModel

{

    public SyncfusionViewModel()

    {

    }

    RibbonControl myRibbon = new RibbonControl();

    public RibbonControl MyRibbon

    { 

        get 

        {

            return myRibbon; 

        } 

    }

    RibbonEditor editor = new RibbonEditor();

    public RibbonEditor Editor

    {

        get 

        {

            return editor; 

        } 

    }

    RibbonCommand cut;

    public RibbonCommand Cut

    {

        get

        {

            if (cut == null)

            {

                cut = new RibbonCommand(param => OnCutExecute());

            }

            return cut;

        }

    }

    RibbonCommand copy;

    public RibbonCommand Copy

    {

        get

        {

            if (copy == null)

            {

                copy = new RibbonCommand(param => OnCopyExecute());

            }

            return copy;

        }

    }

    RibbonCommand paste;

    public RibbonCommand Paste

    {

        get

        {

            if (paste == null)

            {

                paste = new RibbonCommand(param => OnPasteExecute(), param => OnPasteCanExecute());

            }

            return paste;

        }

    }

    public void OnCutExecute()

    {

        if (Editor != null)

        {

            Clipboard.SetText(Editor.Selection.Text);

            MessageBox.Show("Cut Command Executing For" + "\n \"" + Editor.Selection.Text + "\"");

            Editor.Selection.Text = "";

        }

    }

    public void OnCopyExecute()

    {

        if (Editor != null)

        {

            Clipboard.SetText(Editor.Selection.Text);

        }

    }

    public void OnPasteExecute()

    {

        if (Editor != null)

        {

            Editor.Selection.Text = Clipboard.GetText();

            MessageBox.Show("Paste Command Executing For" + "\n \"" + Clipboard.GetText() + "\"");

        }

    }

    public bool OnPasteCanExecute()

    {

        return Clipboard.ContainsText();

    }

}

View

Here, the ribbon control and rich-text box are two views connected by SyncfusionViewModel.

<syncfusion:RibbonButton Name="_Cut" Command="{Binding Cut}" SizeMode="Small" Label="Cut" SmallIcon="/ToolBoxRibbonIssue;component/Images/OfficeUI/Cut16.png" />

<syncfusion:RibbonButton Name="_Copy" Command="{Binding Copy}" SizeMode="Small" Label="Copy" SmallIcon="/ToolBoxRibbonIssue;component/Images/OfficeUI/Copy16.png" />

<syncfusion:RibbonSplitButton Name="_Paste" Command="{Binding Paste}" SizeMode="Small" Label="Paste" SmallIcon="/ToolBoxRibbonIssue;component/Images/OfficeUI/Paste16.png" />

Command Executing

The Cut command will be executed whenever an end-user clicks on the Cut button.

The Paste command will be executed whenever an end-user clicks on the Paste button.

Conclusion

I have explained only the Ribbon Button control above. In a similar way, all of our Syncfusion Silverlight controls support command binding, which enables your application to satisfy the clean MVVM pattern. Please free to provide a comment about this feature here. We are glad to hear valuable suggestions from you.

Introduction

Silverlight Docking Manager new version which will be coming in our Volume 3 enables us to use the similar and complete docking functionality what we see in Visual Studio. We can customize the behavior of Docking Manager using many useful Properties and Events found in our class libraries. Main important thing to be notified is, we provide several new events to determine the behavior of a particular docking window at runtime.

You can listen each state changes and you can allow or cancel the each and every transition at runtime also. We can restrict a window from docking, dragging, resizing and autohiding directly or depending upon certain conditions. This post completely describes about the various possibilities of behavior customization with our Silverlight Docking Manager.

DockAbility

Indicates where the user can dock a window inside another window. It is flagged enumeration. By default, DockAbility will be set as DockAbility.All. So all drag indicators appear for all windows. It contains the following values,

Following code illustrates the DockAbility,

   1: <syncfusion:DockingManager Name=”dockingManager”>

   2:             <!—DockAbility of Solution Explorer window is set to Left, Right, Top and Bottomà

   3:             <system:TreeView syncfusion:DockingManager.Header=”Solution Explorer” syncfusion:DockingManager.SideInDockedMode=”Right” syncfusion:DockingManager.DockAbility=”Left,Right,Top,Bottom” syncfusion:DockingManager.DockState=”Dock” syncfusion:DockingManager.WindowName=”solutionexplorer” syncfusion:DockingManager.DesiredWidthInDockedMode=”150”>

   4:                 </system:TreeView>

   5:            ...

   6:         </syncfusion:DockingManager>

C#

   1: DockingManager.SetDockAbility(this.treeView, DockAbility.Left | DockAbility.Right | DockAbility.Top | DockAbility.Bottom);

In the image, center drag indicator does not appear in the Solution Explorer window since its DockAbility is set only for Left, Right, Top and Bottom.

OuterDockAbility

Controls the visibility of outer drag providers. It is a flagged enumeration. By default, OuterDockAbility will be set as OuterDockAbility.All so all the outer drag indicators appear. It contains the following values,

Following code illustrates the OuterDockAbility to allow only for Left & Right side of the application,

   1: <!—OuterDockAbility is set to Left and Right-->

   2:         <syncfusion:DockingManager Name="dockingManager" OuterDockAbility="Left,Right">

   3:             ...

   4:         </syncfusion:DockingManager>

C#

   1: this.dockingManager.OuterDockAbility = OuterDockAbility.Left | OuterDockAbility.Right;

In the below image, only left and right outer drag indicators are displayed since OuterDockAbility is set only for Left and Right.

FreezeLayout

The entire layout can be frozen by setting FreezeLayout property. When this property is set to false we cannot resize all the windows. This allows us to maintain the same layout.

XAML

   1: <syncfusion:DockingManager Name="dockingManager" FreezeLayout="True">

   2:             <!--Text window is Autohidden at top-->

   3:             <TextBox syncfusion:DockingManager.Header="Text" syncfusion:DockingManager.SideInDockedMode="Top" syncfusion:DockingManager.CanResize="False" syncfusion:DockingManager.DockState="AutoHidden" syncfusion:DockingManager.WindowName="text" />

   4:         </syncfusion:DockingManager>

C#

   1: this.dockingManager.FreezeLayout = true;

Prevent docking of a window into another docking window

A window can be prevented from docking in to another window in two ways.

1. Using CanDock property

2. Using DockAllow event

CanDock

If this property is set to false, a window cannot be docked to the side of other window. By default, this property will be set to True.

XAML

   1: <TextBox x:Name="textBox"

   2: syncfusion:DockingManager.Header="Text" syncfusion:DockingManager.SideInDockedMode="Top" syncfusion:DockingManager.CanDock="False" syncfusion:DockingManager.DockState="AutoHidden" syncfusion:DockingManager.WindowName="text" />

C#

   1: DockingManager.SetCanDock(this.textBox, false);

DockAllow

This event will be fired when a control is about to be docked by mouse. This event can be cancelled. The event handler will have two parameters- sender and DockAllowEventArgs.

DockAllowEventArgs will have the following properties,

Following code shows that when an element is about to be docked to TreeView element, event is cancelled.

C#

   1: void dockingManager_DockAllow(object sender, DockAllowEventArgs args)

   2:         {

   3:             if (args.TargetElement == this.treeView)

   4:             {

   5:                 args.Cancel = true;

   6:             }

   7:         }

Cancel the floating of docking window

We can cancel the floating of docked window in two ways,

1. Using CanFloat

2. Using DockStateChanging event.

CanFloat

When this property is set to false, a window can be dragged but it won’t allow it to float if we release the mouse. By default this property will be set to True.

XAML

   1: <TextBox x:Name="textBox" syncfusion:DockingManager.Header="Text" syncfusion:DockingManager.SideInDockedMode="Top" syncfusion:DockingManager.CanFloat="False" syncfusion:DockingManager.DockState="AutoHidden" syncfusion:DockingManager.WindowName="text" />

C#

   1: DockingManager.SetCanFloat(this.textBox, false);

DockStateChanging

We can cancel the floating of a window by cancelling this event whenever a DockState is changing to Float .

C#

   1: void dockingManager_DockStateChanging(object sender, DockStateChangingEventArgs args)

   2:         {

   3:             if ((DockState)args.NewState == DockState.Float)

   4:             {

   5:                 args.Cancel = true;

   6:             }

   7:         }

Cancel state transition completely

State transition can be cancelled using DockStateChanging event. This event can be cancelled. The event handler has two parameters- sender object and DockStateChangingEventArgs.

DockStateChangingEventArgs has three properties,

C#

   1: void dockingManager_DockStateChanging(object sender, DockStateChangingEventArgs args)

   2:         {

   3:            args.Cancel = true;

   4:         }

Prevent a window from Autohiding

If we set CanAutoHide property to false for a window, the window cannot be autohidden. It can also be achieved by cancelling DockStateChanging event when the window’s state is changing to Autohide.

C#

   1: void dockingManager_DockStateChanging(object sender, DockStateChangingEventArgs args)

   2:         {

   3:             if ((DockState)args.NewState == DockState.AutoHidden)

   4:             {

   5:                 args.Cancel=true;

   6:             }

   7:         }

Prevent closing of a docking window

We can prevent docking window from closing in three ways,

CanClose

When this property is set to false, we will not be able to close a window.

XAML

   1: <TextBox x:Name="textBox" syncfusion:DockingManager.Header="Text" syncfusion:DockingManager.SideInDockedMode="Top" syncfusion:DockingManager.CanClose="False" syncfusion:DockingManager.DockState="AutoHidden" syncfusion:DockingManager.WindowName="text" />

C#

   1: DockingManager.SetCanClose(this.textBox, false);

PreviewWindowClosed

This event will be raised before a window is getting closed. CloseEventArgs contains two properties,

If the event is cancelled we cannot close the window.

C#

   1: void dockingManager_PreviewWindowClosed(object sender, CloseEventArgs args)

   2:         {

   3:             args.Canceled = true;

   4:         }

DockStateChanging

This event is raised when DockState is changing for a window. If the DockState is changing to Hidden state it indicates that window is closing. Here we can cancel the window.

   1: void dockingManager_DockStateChanging(object sender, DockStateChangingEventArgs args)

   2:         {

   3:             if ((DockState)args.NewState == DockState.Hidden)

   4:             {

   5:                 args.Cancel=true;

   6:             }

   7:         }

Maximize a particular window on load itself

Particular window can be maximized on load by specifying its maximized state using MaximizedState property. It accepts two values MaximizedState.Maximized and MaximizedState.Restored. Only one window can be maximized at a time.

XAML

   1: <syncfusion:DockingManager Name="dockingManager" DockFill="True" ShowMaximizeButton="True">

   2:   <!-- Solution Explorer window is Maximized-->

   3:  

   4:                     <system:TreeView syncfusion:DockingManager.Header="Solution Explorer" syncfusion:DockingManager.SideInDockedMode="Right" syncfusion:DockingManager.MaximizedState="Maximized" syncfusion:DockingManager.DockState="Dock" syncfusion:DockingManager.WindowName="solutionexplorer" syncfusion:DockingManager.DesiredWidthInDockedMode="150">

   5:                     </system:TreeView>

   6:        ... 

   7:         </syncfusion:DockingManager>

C#

   1: DockingManager.SetMaximizedState(this.treeView, MaximizedState.Maximized);

Prevent a particular window from maximizing

We can prevent a particular window from maximizing by setting MaximizeButtonVisible property to false or we can cancel the Maximizing event. This event will be raised when a particular window is maximizing. In the below example it checks whether the window containing TreeView is Maximizing. If so, event is cancelled.

C#

   1: this.dockingManager.Maximizing += new MaximizingEventHandler(dockingManager_Maximizing);

   2:  

   3:  

   4: void dockingManager_Maximizing(object sender, MaximizingEventArgs args)

   5:         {

   6:             if (args.UIElement == this.treeView)

   7:             {

   8:                 args.Cancel = true;

   9:             }

  10:         }

Conclusion

I hope you would have enjoyed with these features since we provide maximum extent possibilities of behavior customization with our Silverlight Docking manager. We welcome more feedback from you to enhance this feature based on real time experience.