VIBlend
Home Products Downloads Purchase Support Forum About Blog

Scrolling Animation in VIBlend Silverlight DataGrid

by viblend 28. November 2010 10:20

The latest version of VIBlend Controls for Silverlight features significant improvements to the DataGrid’s scrolling capabilities.  DataGrid now offers fast animated smooth scrolling with inertia for impressive UI performance.  In this blog post, we will introduce you how to use the properties that you need to know, in order to set up the DataGrid’s scrolling behavior. The ScrollAnimationMode property allows you to enable or disable the animated scrolling. The DataGrid’s default animation mode is scrolling with intertia,  In order to disable the scrolling, you need to set the ScrollAnimationMode property to ScrollAnimationMode.No_Animation.

C#

dataGrid.ScrollAnimationMode = DataGrid.ScrollAnimationModes.NO_ANIMATION;

VB .NET

dataGrid.ScrollAnimationMode = DataGrid.ScrollAnimationModes.NO_ANIMATION

Use the following code snippet to enable the smooth scrolling mode:

C#

dataGrid.ScrollAnimationMode = DataGrid.ScrollAnimationModes.SMOOTH_SCROLL;

VB .NET

dataGrid.ScrollAnimationMode = DataGrid.ScrollAnimationModes.SMOOTH_SCROLL

VIBlend DataGrid control also supports a beautiful opacity animation while you scroll its content. You can enable this animation by using the ScrollOpacityAnimationEnabled property. The code snippet below enables the scrolling opacity animation:

C#

dataGrid.ScrollOpacityAnimationEnabled = true;

VB .NET

dataGrid.ScrollOpacityAnimationEnabled = True

The ScrollAnimationTime property allows you to change the duration of the scrolling animation. Here is demonstrated how to the set the duration to 1 second:

C#

dataGrid.ScrollAnimationTime = new TimeSpan(0, 0, 1);

VB .NET

dataGrid.ScrollAnimationTime = New TimeSpan(0, 0, 1)

By default, when the user drags the thumb on a scrollbar, the content view continuously updates. In deferred scrolling, the content is updated only when the user releases the thumb. You can enable the deferred scrolling mode by using the DeferredScrollingEnabled property.

For example:

C#

dataGrid.DeferredScrollingEnabled = true;

VB .NET

dataGrid.DeferredScrollingEnabled = True

Highly optimized new version of VIBlend WPF DataGrid is almost here

by viblend 18. November 2010 23:44

The main focus of the upcoming major release is on the WPF DataGrid control. There are two main areas that were the target of improvement – performance and business-oriented features. The performance is improved in various scenarios including navigation, scrolling and data binding. You can easily create an excel-like spreadsheet with thousands of rows and columns or bind the DataGrid to large datasets. Some of the key new features will be the built-in Clipboard support, Localization Provider, enhanced Data Layer through binding to a DataTable and improved support for MVVM. 


 

If you have already worked with the VIBlend Silverlight and WinForms DataGrids, you will also benefit from the shared codebase between our DataGrid controls.

Another small improvement will be the new default theme: 



We sincerely hope that you'll like the new changes and we'll be glad to hear your feedback. If you have any questions regarding the new release, please feel free to contact us at support@viblend.com 

Using a Context Menu with a TreeView

by viblend 14. November 2010 01:44

This blog post demonstrates how to capture the right click event on a tree view in order to display a context menu.

At first, we need to drag and drop a new instances of the TreeView and ContextMenu controls from the Visual Studio 2010 Toolbox.


 

The xaml markup is shown below:

<UserControl x:Class="TreeViewContextMenu.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:viblendTreeView="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.TreeView" xmlns:viblendMenu="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.Menu">

    <Grid x:Name="LayoutRoot" Background="White">
        <viblendTreeView:TreeView Height="250" HorizontalAlignment="Center"  Name="treeView1" VerticalAlignment="Center" Width="200">
            <viblendTreeView:TreeViewItem DisplayValue="Tree Item 1" IsExpanded="True">
                <viblendTreeView:TreeViewItem DisplayValue="Tree Sub Item 1" />
                <viblendTreeView:TreeViewItem DisplayValue="Tree Sub Item 2" />
                <viblendTreeView:TreeViewItem DisplayValue="Tree Sub Item 3" />
            </viblendTreeView:TreeViewItem>
            <viblendTreeView:TreeViewItem DisplayValue="Tree Item 2" />
        </viblendTreeView:TreeView>
        <viblendMenu:ContextMenu HorizontalAlignment="Left"  Name="contextMenu1" VerticalAlignment="Top">   
            <viblendMenu:MenuItem Click="AddItem_Click" Text="Add" />
            <viblendMenu:MenuItem Click="RemoveItem_Click" Text="Remove" />
            <viblendMenu:MenuItem Click="DisplayItem_Click" Text="Disable" />
         </viblendMenu:ContextMenu>
    </Grid>
</UserControl>

Then we need to subscribe to the MouseRightButtonDown event and we can do this either in the xaml markup or in code-behind:

C#

this.MouseRightButtonDown += new MouseButtonEventHandler(MainPage_MouseRightButtonDown); 

VB .NET

AddHandler MouseRightButtonDown, AddressOf MainPage_MouseRightButtonDown

After we subscribe to the MouseRightButtonDown event, we should implement its event handler. In the event handler, we display the ContextMenu control on the position where the right mouse button is clicked.

C#

void MainPage_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
{
   Point point = e.GetPosition(this.treeView1);
   if (point.X >= 0 && point.X <= this.treeView1.Width)
   {
       if (point.Y >= 0 && point.Y <= this.treeView1.Height)
       {
           Point contextMenuLocation = e.GetPosition(this);
           this.contextMenu1.Open(contextMenuLocation);
           e.Handled = true;
       }
   }
}

VB .NET

Private Sub MainPage_MouseRightButtonDown(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
   Dim point As Point = e.GetPosition(Me.treeView1)
   If point.X >= 0 AndAlso point.X <= Me.treeView1.Width Then
      If point.Y >= 0 AndAlso point.Y <= Me.treeView1.Height Then
          Dim contextMenuLocation As Point = e.GetPosition(Me)
          Me.contextMenu1.Open(contextMenuLocation)
          e.Handled = True
       End If
   End If
End Sub

Finally, we implement the event handlers that will add, remove and disable TreeViewItem objects.

C#

private void AddItem_Click(object sender, EventArgs e)
{
    if (this.treeView1.SelectedItem != null)
    {
        TreeViewItem item = new TreeViewItem("New Item");
        this.treeView1.SelectedItem.Items.Add(item);
    }
}

private void RemoveItem_Click(object sender, EventArgs e)
{
    if (this.treeView1.SelectedItem != null)
    {
        if (this.treeView1.SelectedItem.ParentTreeViewItem != null)
        {
            this.treeView1.SelectedItem.ParentTreeViewItem.Items.Remove(this.treeView1.SelectedItem);
        }
        else if (this.treeView1.Items.Contains(this.treeView1.SelectedItem))
        {
            this.treeView1.Items.Remove(this.treeView1.SelectedItem);
        }
    }
}

private void DisableItem_Click(object sender, EventArgs e)
{
    if (this.treeView1.SelectedItem != null)
    {
        this.treeView1.SelectedItem.IsEnabled = false;
    }
}

VB .NET

Private Sub AddItem_Click(ByVal sender As Object, ByVal e As EventArgs)
    If Me.treeView1.SelectedItem IsNot Nothing Then
        Dim item As New TreeViewItem("New Item")
        Me.treeView1.SelectedItem.Items.Add(item)
    End If
End Sub

Private Sub RemoveItem_Click(ByVal sender As Object, ByVal e As EventArgs)
    If Me.treeView1.SelectedItem IsNot Nothing Then
        If Me.treeView1.SelectedItem.ParentTreeViewItem IsNot Nothing Then
            Me.treeView1.SelectedItem.ParentTreeViewItem.Items.Remove(Me.treeView1.SelectedItem)
        ElseIf Me.treeView1.Items.Contains(Me.treeView1.SelectedItem) Then
            Me.treeView1.Items.Remove(Me.treeView1.SelectedItem)
        End If
    End If
End Sub

Private Sub DisableItem_Click(ByVal sender As Object, ByVal e As EventArgs)
    If Me.treeView1.SelectedItem IsNot Nothing Then
        Me.treeView1.SelectedItem.IsEnabled = False
    End If
End Sub

Here is the result:

Code reuse in Silverlight, WPF and WinForms DataGrid

by viblend 6. November 2010 02:43

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.

VIBlend Silverlight Controls v3.5 - Released

by viblend 1. November 2010 03:14

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.

About the author

Some text that describes me

Tag cloud

Recent comments

Comment RSS
Copyright © 2011 VIBlend  
ALL RIGHTS RESERVED  
 
Terms of Use | Privacy Policy
WinForms Controls Purchase Online About Us
       
DataGrid Navigation Pane Technical Support Blog
ScrollBar TreeView
ListBox ProgressBar Downloads Register
ComboBox Buttons
TabControl Editors Documentation Client Login

VIBlend Blog is powered by BlogEngine.NET