We are happy to announce the availability of VIBlend Silverlight Controls 6.0.  The newest version of VIBlend Silverlight Controls includes a set of new Metro UI Themes - Metro Blue, Metro Green and Metro Orange themes.

VIBlend RibbonBar offers an easy way to execute commands using Key Tips.  When an end-user presses the Space or F10 key, Key Tips automatically appear. They disappear when the command associated to a KeyTip is executed, or when the user presses the Esc key or clicks a mouse button.

The example code below demonstrates how to create a KeyTip for a UIElement: 

<viblendRibbonBar:RibbonBar.QuickAccessItems>
      <editors:Button Command="{Binding SaveCommand}" viblendRibbonBar:QuickAccessToolbar.MenuItemText="Save" viblendRibbonBar:KeyTipService.Text="1" viblendRibbonBar:KeyTipService.Command="{Binding SaveCommand}" viblendRibbonBar:KeyTipService.Key="D1"/>
      <editors:Button Command="{Binding RedoCommand}" viblendRibbonBar:QuickAccessToolbar.MenuItemText="Redo" viblendRibbonBar:KeyTipService.Text="2" viblendRibbonBar:KeyTipService.Command="{Binding RedoCommand}" viblendRibbonBar:KeyTipService.Key="D2"/>
      <editors:Button Command="{Binding UndoCommand}" viblendRibbonBar:QuickAccessToolbar.MenuItemText="Undo" viblendRibbonBar:KeyTipService.Text="3" viblendRibbonBar:KeyTipService.Command="{Binding UndoCommand}" viblendRibbonBar:KeyTipService.Key="D3"/>
</viblendRibbonBar:RibbonBar.QuickAccessItems>

The KeyTip.Text property allows you to set the text which will be displayed in the KeyTip. The Command and CommandParameter properties allow you to associate a Command to the KeyTip. The command is executed when the user presses the Key associated to the KeyTip.

The sample code below demonstrates how to create the commands from the above code.

C#

public RibbonCommand SaveCommand { get; set; }
public RibbonCommand UndoCommand { get; set; }
public RibbonCommand RedoCommand { get; set; }

public KeyTips()
{          
    InitializeComponent();

    this.SaveCommand = new RibbonCommand(Save, CanExecuteCommand);
    this.UndoCommand = new RibbonCommand(Undo, CanExecuteCommand);
    this.RedoCommand = new RibbonCommand(Redo, CanExecuteCommand);
    this.ribbonBar1.DataContext = this;
 }

private void Save(object parameter)
{
    MessageBox.Show("Save Command");
}

private void Undo(object parameter)
{
    MessageBox.Show("Undo Command");
}

private void Redo(object parameter)
{
    MessageBox.Show("Redo Command");
}

private bool CanExecuteCommand(object parameter)
{
     return true;
}

VB.NET

Private privateSaveCommand As RibbonCommand
Public Property SaveCommand() As RibbonCommand
    Get
        Return privateSaveCommand
    End Get
    Set(ByVal value As RibbonCommand)
        privateSaveCommand = value
    End Set
End Property
Private privateUndoCommand As RibbonCommand
Public Property UndoCommand() As RibbonCommand
    Get
        Return privateUndoCommand
    End Get
    Set(ByVal value As RibbonCommand)
        privateUndoCommand = value
    End Set
End Property
Private privateRedoCommand As RibbonCommand
Public Property RedoCommand() As RibbonCommand
    Get
        Return privateRedoCommand
    End Get
    Set(ByVal value As RibbonCommand)
        privateRedoCommand = value
    End Set
End Property

Public Sub New()
    InitializeComponent()

    Me.SaveCommand = New RibbonCommand(AddressOf Save, AddressOf CanExecuteCommand)
    Me.UndoCommand = New RibbonCommand(AddressOf Undo, AddressOf CanExecuteCommand)
    Me.RedoCommand = New RibbonCommand(AddressOf Redo, AddressOf CanExecuteCommand)
    Me.ribbonBar1.DataContext = Me
End Sub

Private Sub Save(ByVal parameter As Object)
    MessageBox.Show("Save Command")
End Sub

Private Sub Undo(ByVal parameter As Object)
    MessageBox.Show("Undo Command")
End Sub

Private Sub Redo(ByVal parameter As Object)
    MessageBox.Show("Redo Command")
End Sub

Private Function CanExecuteCommand(ByVal parameter As Object) As Boolean
     Return True
End Function

You can change the KeyTips activation and deactivation keys by using the RibbonBar's KeyTipsActivationKey and KeyTipsDeActivationKey properties. 

This example demonstrates how to bind the VIBlend DataGrid for Silverlight to a list of invoices that has nested properties. The schema of data source contains the following DataFields / Properties: SalesPerson(string), ShipperCompany(string), ProductName(string), UnitPrice(double),
Quantity(double), Discount(double), ExtendedPrice(double), Freight(double) and Address(Address). The address object has the following properties: City(string), Region(string) and Country(string).

We'll create a Pivot Table with 3 pivot rows - City, Country and Region and 1 pivot column - Shipper Company.

<viblend:DataGrid ItemsSource="{Binding}" x:Name="dataGrid1" Margin="4" Background="White" AutoGenerateColumns="True">
    <viblend:DataGrid.BoundFields>
        <viblend:BoundField Text="Country" DataField="Address.Country" Width="160" SortMode="NotSortable"/>
        <viblend:BoundField Text="City" DataField="Address.City" Width="140" SortMode="NotSortable"/>
        <viblend:BoundField Text="Region" DataField="Address.Region" Width="140" SortMode="NotSortable"/>
        <viblend:BoundField Text="Carrier" DataField="ShipperCompany" Width="140" SortMode="NotSortable" />
        <viblend:BoundField Text="ExtendedPrice" DataField="ExtendedPrice" Width="140" SortMode="NotSortable" />
    </viblend:DataGrid.BoundFields>
    <viblend:DataGrid.BoundPivotRows>
        <viblend:BoundField Text="Country" DataField="Address.Country" Width="160" SortMode="NotSortable"/>
        <viblend:BoundField Text="Region" DataField="Address.Region" Width="160" SortMode="NotSortable"/>
        <viblend:BoundField Text="City" DataField="Address.City" Width="140" SortMode="NotSortable"/>
    </viblend:DataGrid.BoundPivotRows>
    <viblend:DataGrid.BoundPivotColumns>
        <viblend:BoundField Text="Carrier" DataField="ShipperCompany" Width="140" SortMode="NotSortable"/>
    </viblend:DataGrid.BoundPivotColumns>
    <viblend:DataGrid.BoundPivotValues>
        <viblend:BoundValueField Width="120" CellHorizontalContentAlignment="Center" Text="Count of Sales" Function="Count" DataField="ExtendedPrice"></viblend:BoundValueField>
         <viblend:BoundValueField Width="120" CellHorizontalContentAlignment="Right" CellVerticalContentAlignment="Center" CellTextFormatString="{}{0:C}" Text="Amount of Sales" Function="Sum" DataField="ExtendedPrice"></viblend:BoundValueField>
        <viblend:BoundValueField Width="120" CellHorizontalContentAlignment="Right" CellVerticalContentAlignment="Center" CellTextFormatString="{}{0:C}" Text="Avg Sale Amount" Function="Average" DataField="ExtendedPrice"></viblend:BoundValueField>
    </viblend:DataGrid.BoundPivotValues>
</viblend:DataGrid>

The following code generates the sample data in the example:

C#

public PivotTableDemo()
{
    InitializeComponent();
    PrepareGridData();
    this.DataContext = this.lst;
}

public class Invoice
{
    public Invoice(
        string City,
        string Region,
        string Country,
        string SalesPerson,
        string ShipperCompany,
        string ProductName,
        double UnitPrice,
        double Quantity,
        double Discount,
        double ExtendedPrice,
        double Freight)
    {
        this.SalesPerson = SalesPerson;
        this.Address = new Address();
        this.Address.City = City;
        this.Address.Region = string.IsNullOrEmpty(Region) ? "All Regions" : Region;
        this.Address.Country = Country;
        this.ShipperCompany = ShipperCompany;
        this.ProductName = ProductName;
        this.UnitPrice = UnitPrice;
        this.Quantity = Quantity;
        this.Discount = Discount;
        this.ExtendedPrice = ExtendedPrice;
        this.Freight = Freight;
    }

    public string SalesPerson { get; set; }
    public string ShipperCompany { get; set; }
    public Address Address { get; set; }
    public string ProductName { get; set; }
    public double UnitPrice { get; set; }
    public double Quantity { get; set; }
    public double Discount { get; set; }
    public double ExtendedPrice { get; set; }
    public double Freight { get; set; }
}

public class Address
{
    public string City { get; set; }
    public string Region { get; set; }
    public string Country { get; set; }
}

public List<Invoice> lst = new List<Invoice>();
private void PrepareGridData()
{
    try
    {
        StreamResourceInfo sri = Application.GetResourceStream(new Uri("IntegratedDemo;component/Examples/Grid/invoices.tab", UriKind.Relative));
        System.IO.StreamReader sr = new System.IO.StreamReader(sri.Stream);
        string line = null;
        sr.ReadLine();
        while ((line = sr.ReadLine()) != null)
        {
            string[] tabs = line.Split('\t');
            lst.Add(new Invoice(tabs[0], tabs[1], tabs[2], tabs[3], tabs[4], tabs[5], double.Parse(tabs[6]), double.Parse(tabs[7]), double.Parse(tabs[8]), double.Parse(tabs[9]), double.Parse(tabs[10])));
        }
        sr.Close();
    }
    catch (System.Exception)
    {
    }
}

VB .NET

Public Sub New()
    InitializeComponent()
    PrepareGridData()
    Me.DataContext = Me.lst
End Sub

Public Class Invoice
    Public Sub New(ByVal City As String, ByVal Region As String, ByVal Country As String, ByVal SalesPerson As String, ByVal ShipperCompany As String, ByVal ProductName As String, ByVal UnitPrice As Double, ByVal Quantity As Double, ByVal Discount As Double, ByVal ExtendedPrice As Double, ByVal Freight As Double)
        Me.SalesPerson = SalesPerson
        Me.Address = New Address()
        Me.Address.City = City
        Me.Address.Region = If(String.IsNullOrEmpty(Region), "All Regions", Region)
        Me.Address.Country = Country
        Me.ShipperCompany = ShipperCompany
        Me.ProductName = ProductName
        Me.UnitPrice = UnitPrice
        Me.Quantity = Quantity
        Me.Discount = Discount
        Me.ExtendedPrice = ExtendedPrice
        Me.Freight = Freight
    End Sub

    Private privateSalesPerson As String
    Public Property SalesPerson() As String
        Get
            Return privateSalesPerson
        End Get
        Set(ByVal value As String)
            privateSalesPerson = value
        End Set
    End Property
    Private privateShipperCompany As String
    Public Property ShipperCompany() As String
        Get
            Return privateShipperCompany
        End Get
        Set(ByVal value As String)
            privateShipperCompany = value
        End Set
    End Property
    Private privateAddress As Address
    Public Property Address() As Address
        Get
            Return privateAddress
        End Get
        Set(ByVal value As Address)
            privateAddress = value
        End Set
    End Property
    Private privateProductName As String
    Public Property ProductName() As String
        Get
            Return privateProductName
        End Get
        Set(ByVal value As String)
            privateProductName = value
        End Set
    End Property
    Private privateUnitPrice As Double
    Public Property UnitPrice() As Double
        Get
            Return privateUnitPrice
        End Get
        Set(ByVal value As Double)
            privateUnitPrice = value
        End Set
    End Property
    Private privateQuantity As Double
    Public Property Quantity() As Double
        Get
            Return privateQuantity
        End Get
        Set(ByVal value As Double)
            privateQuantity = value
        End Set
    End Property
    Private privateDiscount As Double
    Public Property Discount() As Double
        Get
            Return privateDiscount
        End Get
        Set(ByVal value As Double)
            privateDiscount = value
        End Set
    End Property
    Private privateExtendedPrice As Double
    Public Property ExtendedPrice() As Double
        Get
            Return privateExtendedPrice
        End Get
        Set(ByVal value As Double)
            privateExtendedPrice = value
        End Set
    End Property
    Private privateFreight As Double
    Public Property Freight() As Double
        Get
            Return privateFreight
        End Get
        Set(ByVal value As Double)
            privateFreight = value
        End Set
    End Property
End Class

Public Class Address
    Private privateCity As String
    Public Property City() As String
        Get
            Return privateCity
        End Get
        Set(ByVal value As String)
            privateCity = value
        End Set
    End Property
    Private privateRegion As String
    Public Property Region() As String
        Get
            Return privateRegion
        End Get
        Set(ByVal value As String)
            privateRegion = value
        End Set
    End Property
    Private privateCountry As String
    Public Property Country() As String
        Get
            Return privateCountry
        End Get
        Set(ByVal value As String)
            privateCountry = value
        End Set
    End Property
End Class

Public lst As List(Of Invoice) = New List(Of Invoice)()
Private Sub PrepareGridData()
    Try
        Dim sri As StreamResourceInfo = Application.GetResourceStream(New Uri("IntegratedDemo;component/Examples/Grid/invoices.tab", UriKind.Relative))
        Dim sr As New System.IO.StreamReader(sri.Stream)
        Dim line As String = Nothing
        sr.ReadLine()
        line = sr.ReadLine()
        Do While line IsNot Nothing
            Dim tabs() As String = line.Split(ControlChars.Tab)
            lst.Add(New Invoice(tabs(0), tabs(1), tabs(2), tabs(3), tabs(4), tabs(5), Double.Parse(tabs(6)), Double.Parse(tabs(7)), Double.Parse(tabs(8)), Double.Parse(tabs(9)), Double.Parse(tabs(10))))
            line = sr.ReadLine()
        Loop
        sr.Close()
    Catch e1 As System.Exception
    End Try
End Sub

Note: The 'invoices.tab' file is included in the installation package of VIBlend Controls for Silverlight. The default path to the file is: C:\Program Files\VIBlend\SilverlightControls v.5.0\Source Code\CSharp\Examples\Grid\invoices.tab.

In the next version of VIBlend Controls for Silverlight, we will introduce a new control - Silverlight ChildWindow. The ChildWindow control allows you to direct a user’s attention to a particular activity in your application such as entering data or viewing information. This new control resembles a standard Window and can be displayed in a modal or non-modal popup. When the control is displayed in a modal mode, the interaction with the underlying user interface is blocked.

Built-In Features:

• Animated Open and Close Effects - the window is opened and closed with a smooth animation.
• Resizing Support - users can choose to drag edges to resize the window.
• Modal Mode - when the window is opened in a modal mode, the end-users cannot access any part of the interface outside of the dialog.
• Non-Modal Mode - this mode enables the end-users to access the application's user interface.
• Startup Position - you can choose the window's startup position. By default, the window is started at the application's middle-center.
• Minimized and Maximized states - the window can be maximized or minimized similar to the standard Windows.
• Application Boundaries Detection - end-users cannot drag or resize the window outside of the application's boundaries.

We are proud to announce the immediate availability of VIBlend Silverlight Controls v4.0.0 - the next generation of user interface controls for Silverlight from VIBlend.

Highlights of the new features and improvements in the new version are:

• Smooth scrolling animation in TreeView, ListBox, ComboBox and CheckedListBox,
• DataGrid Pivot table aggregation functions - StDev, StDevP, Var, VarP ,
• New Controls: Ribbon Bar, vScrollViewer, DataGrid Pivot Design Panel, DataGrid Grouping Panel
• New Default Theme for all controls in the package.

One of our main goals while developing our DataGrid controls for Silverlight, WPF and WinForms was to keep our programming model as similar as possible. The benefit of having a similar programming model is that it enables easy code reuse between multiple platforms and shortens your learning curve.

Going through an Example

Let's consider the sample application shown in Figure 1. The application presents a form with a WinForms DataGrid which is filled with data in unbound mode.

^{_{Figure 1}}

The sample data is shown below:

C#

        string[] firstNames = new string[]
        {
            "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylène"
        };
        string[] lastNames = new string[]
        {
            "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Björn", "Nodier"
        };
        string[] productNames = new string[]
        {
            "Black Tea", "Green Tea", "Doubleshot Espresso", "Caffè Espresso", "Caffè Latte", "White Chocolate Mocha", "Caramel Latte", "Caffè Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
        };

VB .NET

        Dim firstNames() As String = { "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylène" }
        Dim lastNames() As String = { "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Björn", "Nodier" }
        Dim productNames() As String = { "Black Tea", "Green Tea", "Doubleshot Espresso", "Caffè Espresso", "Caffè Latte", "White Chocolate Mocha", "Caramel Latte", "Caffè Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist" }

Here is the code that loads the data into the DataGrid control:

C#

        private void LoadData(vDataGridView dataGrid)
        {
           HierarchyItem firstName = dataGrid.ColumnsHierarchy.Items.Add("First Name");
           HierarchyItem lastName = dataGrid.ColumnsHierarchy.Items.Add("Last Name");
           HierarchyItem productName = dataGrid.ColumnsHierarchy.Items.Add("Product");
           HierarchyItem date = dataGrid.ColumnsHierarchy.Items.Add("Date");
           Random random = new Random();

           for (int i = 0; i < 100; i++)
           {
               HierarchyItem row = dataGrid.RowsHierarchy.Items.Add(i.ToString());
               dataGrid.CellsArea.SetCellValue(row, firstName, firstNames[random.Next(0, firstNames.Length - 1)]);
               dataGrid.CellsArea.SetCellValue(row, lastName, lastNames[random.Next(0, lastNames.Length - 1)]);
               dataGrid.CellsArea.SetCellValue(row, productName, productNames[random.Next(0, productNames.Length - 1)]);
               dataGrid.CellsArea.SetCellValue(row, date, DateTime.Now.AddDays(i));
           }

          dataGrid.RowsHierarchy.AutoResize(AutoResizeMode.FIT_ITEM_CONTENT);
          dataGrid.ColumnsHierarchy.AutoResize(AutoResizeMode.FIT_ALL);
       }

VB .NET

        Private Sub LoadData(ByVal dataGrid As vDataGridView)
           Dim firstName As HierarchyItem = dataGrid.ColumnsHierarchy.Items.Add("First Name")
           Dim lastName As HierarchyItem = dataGrid.ColumnsHierarchy.Items.Add("Last Name")
           Dim productName As HierarchyItem = dataGrid.ColumnsHierarchy.Items.Add("Product")
           Dim [date] As HierarchyItem = dataGrid.ColumnsHierarchy.Items.Add("Date")
           Dim random As New Random()

           For i As Integer = 0 To 99
               Dim row As HierarchyItem = dataGrid.RowsHierarchy.Items.Add(i.ToString())
               dataGrid.CellsArea.SetCellValue(row, firstName, firstNames(random.Next(0, firstNames.Length - 1)))
               dataGrid.CellsArea.SetCellValue(row, lastName, lastNames(random.Next(0, lastNames.Length - 1)))
               dataGrid.CellsArea.SetCellValue(row, productName, productNames(random.Next(0, productNames.Length - 1)))
               dataGrid.CellsArea.SetCellValue(row, [date], DateTime.Now.AddDays(i))
           Next i

In the sample code, we have successfully created Rows and Columns in unbound mode and filled the WinForms DataGrid control with data. You will be able to use the same approach for both Silverlight and WPF applications.

A typical Silverlight application is built from a tree of objects where UserControl is the root of the tree. In turn, the UserControl element contains a number of child elements laid out in a variety of ways. The following markup creates a new instance of the VIBlend Silverlight DataGrid:

<UserControl x:Class="SilverlightApplication38.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" xmlns:viblendDataGrid="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.DataGrid">
    <Grid x:Name="LayoutRoot" Background="White">
        <viblendDataGrid:DataGrid Height="250" Name="dataGrid1" Width="350" />
    </Grid>
</UserControl>  

It is now time to reuse the code from our Windows Forms application and here is the result:


_{^{Figure 2}}

In order to port the code from the WinForms application to Silverlight and WPF, we need to change only the parameter type of the LoadData method from vDataGridView to DataGrid.

Here is the markup of our WPF application.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" xmlns:viblend="clr-namespace:VIBlend.WPF.Controls;assembly=VIBlend.WPF.DataGrid">
    <Grid>
        <viblend:DataGrid Height="250" Name="dataGrid1" Width="450" />
    </Grid>
</Window>

In figure 3 is shown the sample application with our WPF DataGrid.

_{^{Figure 3}}

In summary, with a little effort you can easily create desktop applications with the VIBlend WinForms DataGrid or WPF DataGrid and convert them to Web applications running the Silverlight DataGrid.

We are proud to announce the availability of VIBlend Controls for Silverlight ver. 3.5.0 - the next generation of user interface controls for Silverlight from VIBlend. Our main efforts for this release were focused on improving the DataGrid’s rendering and performance.

Highlights of the new features and improvements in the new version are:

• DataGrid performance optimizations
• New themes for all VIBlend Controls for Silverlight
• New controls - TabControl, Toolbar and BannerRotator
• Design Time improvements 

To help you create themes and skins for your applications, we added a new ‘CustomTheme’ project to our installation package. This project includes C# and VB .NET samples and xaml style definitions for our controls.

  See our Silverlight Controls Live Demo and Download a free trial today.

We are coming close to yet another big release of VIBlend Controls for Silverlight. In the last 2 months, we spent much time on samples, themes and documentation. With the new release you will get 4 new themes for all of our controls.

Another highly anticipated addition to our DataGrid control is the enhanced cells and headers styling.

VIBlend is announcing the immediate availability of the VIBlend Controls for Silverlight ver. 3.0.

With 19 new controls, Themes and enhanced functionality in the DataGrid, Menu and SpinEditor, VIBlend Controls for Silverlight empower developers to build full featured and great looking line-of-business applications.

New features:

• Menu and ContextMenu controls now have 17 built-in Themes including Office 2010 Blue, Black and Silver and Office 2007 Blue, Black and Silver
• DataGrid Enhancements  - The latest release introduces Export to Excel, CSV, HTML and XML.
• 19 new editors such as ComboBox, ListBox, CheckedListBox, GroupBox, ColorPicker, RadioButton, CheckBox, Slider, Button, ToggleButton, etc.
• Data Input Editors and NavigationPane now have an improved Data Binding capabilities.