viblend silverlight controls documentation - componentsource · range of business scenarios. the...

VIBlend Silverlight Controls Documentation

INTRODUCTION

VIBlend Silverlight Controls is a library of easy to use and feature complete .NET user interface controls for Microsoft Silverlight. It allows you to develop cross-platform rich internet applications (RIA) for a wide range of business scenarios. The library includes controls which are not available in the standard set of Silverlight controls included in the Silverlight Toolkit. Some of the controls provide extended functionality and extra benefits compared to alternatives in other open source and commercial toolkits. VIBlend Silverlight Controls is the first toolkit to introduce a fully functional OLAP DataGrid control for Silverlight. VIBlend DataGrid for Silverlight brings together the features of traditional data grid controls, hierarchical grids and pivot tables, and delivers consistent and powerful end-to-end functionality.

VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)

Contents

LICENSING .............................................................................................................................................................. 4

LICENSE AGREEMENT ............................................................................................................................................. 6

INSTALLATION AND DEPLOYMENT....................................................................................................................... 11

OVERVIEW ........................................................................................................................................................... 14

SYSTEM REQUIREMENTS .................................................................................................................................. 15

SOFTWARE REQUIREMENTS ............................................................................................................................. 15

DATAGRID ........................................................................................................................................................... 17

GETTING STARTED WITH THE DATAGRID CONTROL......................................................................................................... 17

DATAGRID CONTROL BASICS ................................................................................................................................... 19

ADDING ROWS AND COLUMNS IN UNBOUND MODE ...................................................................................................... 20

MODIFYING GRID CELL VALUES IN UNBOUND MODE ...................................................................................................... 23

SIZING OPTIONS IN THE DATAGRID CONTROL ............................................................................................................... 23

FORMATTING GRID CELLS CONTENT .......................................................................................................................... 24

DATA BINDING ..................................................................................................................................................... 26

SORTING ............................................................................................................................................................. 39

FILTERING ........................................................................................................................................................... 40

ROWS AND COLUMNS RESIZING ............................................................................................................................... 43

ROWS AND COLUMNS VISIBILITY ............................................................................................................................... 44

CELL EVENTS ....................................................................................................................................................... 46

ROW AND COLUMN HEADERS EVENTS ....................................................................................................................... 46

SELECTION MODES ................................................................................................................................................ 47

DRAG AND DROP .................................................................................................................................................. 51

ROW DETAILS ...................................................................................................................................................... 52

EDITORS ............................................................................................................................................................. 57

VALIDATION ........................................................................................................................................................ 60

STYLING AND APPEARANCE...................................................................................................................................... 62

TOOLTIPS ........................................................................................................................................................... 70

EDITORS ............................................................................................................................................................... 72

NUMBER, DECIMAL, PERCENTAGE, CURRENCY AND FIXED-POINT EDITORS .......................................................................... 72

SPINEDITOR ........................................................................................................................................................ 77

MASK EDITOR ...................................................................................................................................................... 77

DATETIME EDITOR ................................................................................................................................................ 79

ERROR PROVIDER.................................................................................................................................................. 82

AUTOCOMPLETE TEXTBOX ...................................................................................................................................... 84

STYLING AND APPEARANCE...................................................................................................................................... 87

MENU .................................................................................................................................................................. 89

CONTEXT MENU................................................................................................................................................... 97

OUTLOOKPANE .................................................................................................................................................... 99

GETTING STARTED WITH THE OUTLOOKPANE CONTROL................................................................................................. 100

OUTLOOK PANE CONTROL BASICS ........................................................................................................................... 102

ADDING OUTLOOKPANEITEM ................................................................................................................................ 102

OUTLOOKPANEITEM TEMPLATES ............................................................................................................................ 103

EXPANDED AND COLLAPSED STATES ......................................................................................................................... 104

CUSTOMIZING OUTLOOKPANEITEMS ....................................................................................................................... 105

STYLING AND APPEARANCE.................................................................................................................................... 107

NAVIGATIONPANE ............................................................................................................................................. 108

GETTING STARTED WITH THE NAVIGATIONPANE CONTROL ............................................................................................. 108

WORKING WITH THE NAVIGATIONPANE CONTROL ...................................................................................................... 111

WORKING WITH NAVIGATIONPANEITEMS ................................................................................................................. 114

TREEVIEW .......................................................................................................................................................... 118

EDITORS ........................................................................................................................................................... 121

CHECKBOXES AND RADIOBUTTONS ......................................................................................................................... 127

CUSTOM TREEVIEWITEM INDICATORS ...................................................................................................................... 130

BUTTON ............................................................................................................................................................. 132

TOGGLEBUTTON ................................................................................................................................................ 134

REPEATBUTTON ................................................................................................................................................. 135

CHECKBOX ......................................................................................................................................................... 137

RADIOBUTTON .................................................................................................................................................. 138

DROPDOWNBUTTON ......................................................................................................................................... 140

SPLITBUTTON..................................................................................................................................................... 142

LISTBOX ............................................................................................................................................................. 144

CHECKEDLISTBOX ............................................................................................................................................... 147

COMBOBOX ....................................................................................................................................................... 149

GROUPBOX ........................................................................................................................................................ 154

PASSWORDBOX ................................................................................................................................................. 159

TEXTBOX ............................................................................................................................................................ 160

PROGRESSBAR ................................................................................................................................................... 161

SLIDER................................................................................................................................................................ 163

COLORPICKER .................................................................................................................................................... 164

PALETTE ............................................................................................................................................................. 166

LISTPANEL .......................................................................................................................................................... 168

DOCKPANEL ....................................................................................................................................................... 170

Licensing

All VIBlend products are licensed per-developer seat based on an annual subscription model.

This means that you get 12 months of priority technical support and free upgrades (both minor

and major versions). The 12 months time frame starts from the date of purchase. At the end of

the 12 months period you can choose, at your discretion, to pay 50% of the original purchase

price to “renew” the subscription and receive another 12 months. If you decide not to renew

your subscription, you can continue using the latest version you obtained before the

subscription expired. You have the right to use it indefinitely as long as you comply with the

Do you charge any run time royalties for your products?

We don’t charge any royalties. End user applications developed using VIBlend products can be

distributed as needed, and you are not charged additional royalties when distributing our

assemblies with your executable. Once other developers start using the product, additional seat

licenses must be purchased.

Trial licenses

The Trial licenses are fully-functional and are identical in functionality to the paid versions.

However, a message will appear in a popup window to indicate that you are using a trial

version.The trial versions include product documentation, APIs reference, and many sample

projects. All sample projects come with full C# and VB.NET source code.The trial versions are

not for sale, should not be redistributed without permission from VIBlend, and cannot be used

for software development purposes except for evaluation. Any use of the trial versions expect

for pre-purchase evaluation is in direct violation with the EULA.

How long does the trial version last?

There are no time restrictions. You can use the trial version to fully evaluate and test before you

make a purchase decision.

Can I receive technical support during my trial evaluation period?

Yes. All trial licenses come with 2 months FREE Support package, which guarantees a response

from the VIBlend support staff. There are no purchase or subscription requirements. If you have

questions or need more examples just send us an email to support@viblend.com and we will be happy

to assist you.

Developer Licenses

A Developer license is granted per developer seat. Developer licenses have no run-time

limitations. Each developer who uses our products must obtain a license. The developer may

install and use the product on a primary computer, laptop or another computer as long as no

one else will use the software on these machines. If you need more than one license we offer

excellent volume discounts. In addition, if you want to obtain licenses for more than 50

developers you can purchase a Site License (per Office location) or an Enterprise License (per

Company).The Developer license comes with a Support package which guarantees a 24 hour

response time from the VIBlend support staff. It also includes product updates in a period of 1

year after the purchase date. If you have any questions, feel free to send us an email to

support@viblend.com.

Can I purchase the source code?

You can obtain a license that includes the full source code. Our products (both source code and

binary versions) are licensed and not sold. If you are interested in obtaining a license that

includes the source code contact us at:sales@viblend.com

I need to modify the source code and redistribute the modified assemblies with my

application. Can I do that?

Yes. You can make modifications to our source code and redistribute the modified libraries with

your products. However, you cannot use any portion of our software to build and offer

competing products or software solutions. This restriction applies both to source code and

binary licenses.

How do I receive the invoice for my purchase?

To request an invoice, please send an e-mail to sales@viblend.com. We will send you a PDF

invoice.

My subscribtion expired. Can I use the product?

Yes, you can continue using the products that were licensed to you during the subscription term

even after the subscription expires. However, if you would like to continue receiving product

updates and support, you need to renew your subscription.

Do you offer refunds?

We offer refunds only when astolen credit card was used to purchase a VIBlend product license.

There are no refunds on source code licenses once the source code has been downloaded. For

refunds of licenses without source code, please send us an e-mail at sales@viblend.comwith

the reason why you are requesting a refund. However, refunds are not guaranteed.

Do you offer competitive upgrades?

Yes, we do offer competitive upgrades. Please contact oursales team for more information.

Do I need separate licenses for production and build machines?

No. The licensing is not per-machine and therefore you don't need additional licenses for

production servers, test and build machines.

Do you offer discounts for academic and non – profit organizations?

Yes, please visit our discounts page for more information.

License Agreement

VIBLEND SILVERLIGHT CONTROLS END USER LICENSE AGREEMENT

IMPORTANT NOTE

This "Software", as defined below, is protected by the US and International copyright laws.

If you do not read and agree to be bound by the terms and conditions defined in this document,

you are not permitted to use the Software or any portion of it.

END USER LICENSE AGREEMENT (EULA)

DEFINITIONS

The following definitions apply to the terms and conditions included in this EULA.

The term "Software", in the context of this EULA, means VIBlend Silverlight Controls, its

modules, components, controls, all program files, source code, media, and documentation

which are part of the Software installation package, as well as any portion of them.

End User

Means you as a particular user of the Software.

TERMS OF AGREEMENT

This is a legal agreement between you, the end user, and VIBlend as provider of the Software.

By installing or using this Software, you agree to be bound by the terms of this EULA. If you do

not agree to those terms, you may not install or use the Software.

The Software is not sold as a product. It is licensed to the end user. As an end user, you are

entitled to install and use your copy of the Software and user it only for software development,

design and testing purposes.

"Install" means to permanently copy the software on your computer's permanent storage

system. "Use" means to utilize the software for software development, design, testing or

evaluation purposes.

If you have purchased a license of the Software, you are allowed to redistribute some of the

Software's assemblies (Redistributable modules) with products that you have developed. The

software's Redistributable modules include:

- VIBlend.Silverlight.DataGrid.dll

- VIBlend.Silverlight.Menu.dll

- VIBlend.Silverlight.TreeView.dll

- VIBlend.Silverlight.Editors.dll

- VIBlend.Silverlight.NavigationPanes.dll

- VIBlend.Silverlight.Extensions.dll

- VIBlend.Silverlight.Utilities.dll

- VIBlend.Silverlight.Theme.Office2007Black.dll

- VIBlend.Silverlight.Theme.Office2007Blue.dll

- VIBlend.Silverlight.Theme.Office2007Silver.dll

- VIBlend.Silverlight.Theme.Office2010Black.dll

- VIBlend.Silverlight.Theme.Office2010Blue.dll

- VIBlend.Silverlight.Theme.Office2010Silver.dll

You are allowed to redistribute and use free of charge in your commercial and non-commercial

applications, the following modules:

- VIBlend.Silverlight.Menu.dll

- VIBlend.Silverlight.Utilities.dll

You are not allowed to redistribute any other portions of the Software with your products

unless you have obtained explicit written permission from VIBlend.

The Software is protected by the United States copyright laws and International treaties. You

may not rent or lease the Software. You can transfer the license of the software on a

permanent basis. A transfer may happen only with explicit written permission from VIBlend.

TRIAL VERSION RESTRICTIONS

VIBlend provides free trial versions of the Software. The trial versions are fully functional and

are not time restricted. You are allowed to download and use the trial versions only for pre-

purchase evaluation purposes. The trial versions are not for sale, should not be redistributed

without permission from VIBlend, and cannot be used for software development purposes

except for evaluation. Any use of the trial versions expect for pre-purchase evaluation is in

direct violation of this EULA.

INTELECTUAL PROPERTY

All intellectual property rights such as but not limited to patents, trademarks, copyrights or

trade secret rights related to the Software are property of VIBlend and/or its partners and

suppliers.

You shall not modify, translate, reverse engineer, decompile or disassemble the Software or any

portion of it thereof or otherwise attempt to derive source code or create derivative works.

You are not allowed to use any portion of the Software within products that directly compete

with VIBlend.

You are not allowed to remove, alter or destroy any proprietary, trademark or copyright

markings or notices related to the Software.

YOU EXPRESSLY ACKNOWLEDGE AND AGREE THAT USE OF THE SOFTWARE IS AT YOUR OWN

RISK AND THAT THE SOFTWARE IS PROVIDED "AS IS" WITHOUT ANY WARRANTIES OR

CONDITIONS WHATSOEVER. VIBLEND AND ITS PARTNERS DOES NOT WARRANT THAT THE

FUNCTIONS OF THE SOFTWARE WILL MEET YOUR REQUIREMENTS OR THAT THE OPERATION OF

THE SOFTWARE WILL BE UNINTERRUPTED OR ERROR FREE. YOU ASSUME RESPONSIBILITY FOR

SELECTING THE SOFTWARE TO ACHIEVE YOUR INTENDED RESULTS, AND FOR THE USE AND THE

RESULTS OBTAINED FROM THE SOFTWARE.

YOU ACKNOWLEDGE THAT THE SOFTWARE IS NOT INTENDED FOR USE IN (I) ON-LINE CONTROL

OF AIRCRAFT, AIR TRAFFIC, AIRCRAFT NAVIGATION OR AIRCRAFT COMMUNICATIONS; OR (II) IN

THE DESIGN, CONSTRUCTION, OPERATION OR MAINTENANCE OF ANY NUCLEAR FACILITY; OR

(III) ANY KIND OF UNLAWFUL AND HARMFUL OPERATIONS AND ACTIVITIES.

VIBLEND AND ITS PARTNERS/SUPPLIERS DISCLAIM ALL WARRANTIES, EXPRESS OR IMPLIED,

INCLUDING BUT NOT LIMITED TO WARRANTIES RELATED TO: NON-INFRINGEMENT, LACK OF

VIRUSES, ACCURACY OR COMPLETENESS OF RESPONSES OR RESULTS, IMPLIED WARRANTIES OF

MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.

IN NO EVENT SHALL VIBLEND OR ITS PARTNERS/SUPPLIERS BE LIABLE FOR ANY INDIRECT,

INCIDENTAL, SPECIAL OR CONSEQUENTIAL DAMAGES OR FOR ANY DAMAGES WHATSOEVER

(INCLUDING BUT NOT LIMITED TO DAMAGES FOR LOSS OF BUSINESS PROFITS, BUSINESS

INTERRUPTION, LOSS OF BUSINESS INFORMATION, PERSONAL INJURY, LOSS OF PRIVACY OR

OTHER PECUNIARY OR OTHER LOSS WHATSOEVER) ARISING OUT OF USE OR INABILITY TO USE

THE SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.

REGARDLESS OF THE FORM OF ACTION, VIBLEND AND ITS PARTNERS/SUPPLIERS AGGREGATE

LIABILITY ARISING OUT OF OR RELATED TO THIS AGREEMENT SHALL NOT EXCEED THE TOTAL

AMOUNT PAYABLE BY YOU UNDER THIS AGREEMENT. THE FOREGOING LIMITATIONS,

EXCLUSIONS AND DISCLAIMERS SHALL APPLY TO THE MAXIMUM EXTENT ALLOWED BY

APPLICABLE LAW.

THIRD PARTY COMPONENTS

The Software may include third party controls components licensed under MS-PL. All MS-PL

components are provided "as-is" and the licensor(s) disclaim all liabilities and warranties. A list

of included third party MS-PL controls and components and their licenses shall be provided

upon request.

NOTICE REGARDING OFFICE UI LICENSING

The Software does not grant you any rights under the Microsoft Office 2007 UI Licensing. The

Office 2007 User Interface is intellectual property of Microsoft Corporation and you can license

it free of charge. For more information visit: http://msdn.microsoft.com/officeui

The Software may be subject to export or import regulations, and the user agrees to comply

strictly with all such laws and regulations. The user agrees not to export, re-export, or use the

Software or any part thereof or information pertaining thereto to any country for which a U.S.

government agency requires an export license or other governmental approval without first

obtaining such license or approval.

Notice to U.S. Government Users: The Software and any associated documentation are

"Commercial Items," as that term is defined at 48 C.F.R. 2.101, consisting of "Commercial

Computer Software" and "Commercial Computer Software Documentation," as such terms are

used in 48 C.F.R. 12.212 or 48 C.F.R. 227.7202, as applicable. Consistent with 48 C.F.R. 12.212 or

48 C.F.R. 227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software

and Commercial Computer Software Documentation are licensed to U.S. Government end users

(a) only as Commercial Items and (b) with only those rights as are granted to all other end users

pursuant to the terms and conditions herein.

If you have any questions regarding the EULA please contact us by e-mail at:

mailto:info@viblend.com

Web site:

http://www.viblend.com

Installation and Deployment

How to add VIBlend controls to the Toolbox?

VIBlend Controls for Silverlight are automatically added to Visual Studio 2010 Toolbox during

the installation process.

However, if they do not appear in the toolbox after the installation, you can do this manually:

1. Run a new Visual Studio instance.

2. Create a new Silverlight application

3. Right Click on the Toolbox and click the “Add Tab” menu item.

4. Type VIBlend and press Enter.

5. Expand the VIBlend tab and right click on the expanded area.

6. Click on the ‘Choose Items…’menuitem.

7. Click on the Silverlight Components tab.

8. Click the ‘Browse’ button and navigate to the VIBlend assemblies. Add the

VIBlend.Silverlight.DataGrid.dll, VIBlend. Silverlight.Utilities.dl, VIBlend.

Silverlight.Editors.dll, VIBlend. Silverlight.NavigationPanes.dll, VIBlend.Silverlight.Menu,

VIBlend.Silverlight.TreeView, VIBlend.Silverlight.Extensions. The tab is filled with the

VIBlend Controls.

9. Reference to the VIBlend.Silverlight.Utilities is necessary to run the application. This

reference is automatically added when you drag and drop a control into your Page.

However, you can also manually add them by right clicking on the ‘Reference’ tree node

in the Solution Explorer and then clicking on the ‘Add Reference’ context menu item.

Deployment

To use the VIBlend controls in your application, you must add references to the VIBlend.

Silverlight.DataGrid.dll, VIBlend.Silverlight.Utilities.dl, VIBlend. Silverlight.Editors.dll, VIBlend.

Silverlight.NavigationPanes.dll, VIBlend.Silverlight.Menu, VIBlend.Silverlight.TreeView. These

references are automatically added to your project when you drag and drop a control on your

form. These assemblies are required for the application’s run time. The easiest way to deploy

your application to a client machine, could be to use the X Copy deployment. For each assembly

reference in the Solution Explorer, right click and set the ‘Copy Local’ flag to true. By doing this,

all assemblies will be copied to the Release/Bin, Debug/Bin folders depending on your project’s

configuration. To deploy the application you should copy and paste the .exe and .dlls files to

your client machines.

Overview

VIBlend Controls for Silverlight is a library of User Interface controls. It is designed and optimized to provide outstanding development experience and minimize development costs when building professional Web applications using the Microsoft .NET framework.

This version of VIBlend Controls for Silverlight includes the following controls:

Data Grid

DateTime Editor

Percentage Editor

Currency Editor

Fixed Point Editor

Spin Editor

AutoComplete Editor

Decimal Editor

Error Provider

Number Editor

Context Menu

Mask Editor

TreeView

OutlookPane

NavigationPane

ColorPicker

GroupBox

Palette

SplitButton

Button

DropDownButton

RepeatButton

CheckBox

ToggleButton

ListBox

ComboBox

CheckedListBox

ListPanel

DockPanel

ProgressBar

Slider

DateTimePicker

SYSTEM REQUIREMENTS

VIBlend Controls for Silverlight requires the following minimum configuration:

1 GHz Processor

2048 MB RAM

100MB of free disk space

Windows XP (w/SP2), Windows Vista, Windows 7

1024x600 video, High Color 16-bit

Microsoft compatible mouse or pointing device

Microsoft Silverlight 4.0 Browser Plug-in

SOFTWARE REQUIREMENTS

VIBlend Controls for Silverlight requires the following software:

Microsoft .NET Framework 3.5 SP1 or later

Microsoft Visual Studio 2010

Silverlight Tools for Visual Studio 2010

Microsoft Expression Blend (Optional)

This document provides general overview of VIBlend Silverlight Controls (version 3.0) and their

features. The information and the examples are based on best practices and frequently asked

question about VIBlend Silverlight Controls. If you are not able to find the information you are

looking for, please contact us at support@viblend.com

DataGrid

Namespace: VIBlend.Silverlight.Controls

Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.DataGrid.dll)

One of the most flexible controls in the VIBlend Silverlight Controls library is the DataGrid

control. As its name suggests, the DataGrid control displays the data from a collection in a

tabular format with rows and columns. Some of the advantages of VIBlend DataGrid for

Silverlight include:

Ease of use

Getting started with the DataGrid control is easy, and it takes very little code to

implement complex scenarios from end to end.

Feature richness and flexibility

The DataGrid offers a rich set of APIs and is designed to address thousands of

common data visualization tasks. It supports data binding, header item

templates, styles, cell templates, row details, grouping, pivot tables for OLAP

analysis, and more. Data formatting is supported via standard value converters.

High performance

The DataGrid control can easily work with thousands, and even millions of rows.

The memory utilization is relatively small because the grid uses binding for data,

templates and styles. The grid cells content can be virtualized and loaded on

demand. In addition, the grid utilizes advanced caching methods to achieve

optimal performance.

Getting started with the DataGrid control

The DataGrid control is defined in the VIBlend.Silverlight.Controls namespace.

The first step is to reference the DataGrid.dll assembly in your project:

1. Click on the Solution Explorer tab and expand the references node under your

project.

2. Right click and select Add Reference

3. Locate the DataGrid.dll assembly inside the VIBlend Silverlight Controls folder and

click Ok.

4. The DataGrid.dll will appear in your project references

After adding a reference to the VIBlend DataGrid assembly the next step is to add an instance

of the DataGrid control to your page:

1. Add the following line in the beginning of your XAML page: xmlns:viblendgrid="clr-namespace:

VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.DataGrid"

2. Add an instance of the DataGrid control to the XAML page

The complete XAML markup is shown here: <UserControl

x:Class="VIBlend.Silverlight.Examples.Grid.DemoPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:viblendgrid="clr-namespace:

VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.DataGrid">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<viblendgrid:DataGrid x:Name="dataGrid"

Width="700" Height="350" AutoGenerateColumns="True"

Background="Transparent">

</viblendgrid:DataGrid>

</Grid>

</UserControl>

DataGrid Control Basics

VIBlend DataGrid for Silverlight is designed with simplicity and flexibility in mind. It allows you define hierarchical row and column headers and use the same data grid for broad range of scenarios where you would normally need several different controls. This makes the architecture different compared to most other data grid controls. There are a few basic concepts that every developer needs to know:

1. VIBlend DataGrid contains three core areas:

ColumnsHierarchy – represents the columns header area

RowsHierarchy – represents the rows header area

CellsArea – represents the grid cells area

2. Each item (Row or Column) in the header area is represented by the HierarchyItem class. HierarchyItems can have one or more HierarchyItems as child items. The easiest way

to understand how this works is to think of the ColumnsHierarchy or the RowsHierarchy as a tree and the HierarchyItems as nodes in the tree. The HierarchyItems are stored under the RowsHierarchy.Items and ColumnsHierarchy.Items collections. The child items of a HierarchyItem are stored in the HierarchyItem.Items collection.

3. The DataGrid control dynamically calculates the size and rendering properties of the CellsArea depending on the number of rows and columns, their expand/collapse state, scroll position, width and height properties and more.

4. Grid cells in the CellsArea are implicitly represented as an intersection of a Row HierarchyItem and a Column HierarchyItem. Each grid cell can have its own Style, DataTemplate and EditTemplate. This unique feature allows you to have different grid cell types within the same row or column.

Adding Rows and Columns in Unbound mode

VIBlend DataGrid for Silverlight supports both data binding and unbound mode. We’ll start with

a simple unbound example that create the following hierarchical grid view:

The code adds HierarchyItems to the RowsHierarchy and the ColumnsHierarchy.

CSharp

public partial class DemoPage : UserControl

public DemoPage()

InitializeComponent();

PopulateGridContent();

private void PopulateGridContent()

#region Create the rows and columns headers

HierarchyItem itemAllCountries =

dataGrid.RowsHierarchy.Items.Add("All Countries");

HierarchyItem itemUSA = itemAllCountries.Items.Add("USA");

itemUSA.Items.Add("California");

itemUSA.Items.Add("Oregon");

itemUSA.Items.Add("Washington");

itemUSA.Items.Add("Idaho");

HierarchyItem itemCanada = itemAllCountries.Items.Add("Canada");

itemCanada.Items.Add("Ontario");

itemCanada.Items.Add("Quebec");

itemCanada.Items.Add("Alberta");

HierarchyItem itemMexico = itemAllCountries.Items.Add("Mexico");

itemMexico.Items.Add("Baja California");

itemMexico.Items.Add("San Luis Potosí");

itemMexico.Items.Add("Nuevo León");

itemMexico.Items.Add("Sonora");

HierarchyItem itemAllCustomers =

dataGrid.ColumnsHierarchy.Items.Add("All Customers");

itemAllCustomers.Items.Add("Graduate degree");

itemAllCustomers.Items.Add("Bachelors degree");

itemAllCustomers.Items.Add("Associate degree");

itemAllCustomers.Items.Add("High School diploma");

HierarchyItem itemTotal = itemAllCustomers.Items.Add("Total");

#endregion

dataGrid.RowsHierarchy.SetColumnWidth(0, 150);

dataGrid.RowsHierarchy.ExpandAllItems();

dataGrid.ColumnsHierarchy.ExpandAllItems();

dataGrid.ColumnsHierarchy.AutoResize(

AutoResizeMode.FIT_ITEM_CONTENT);

VB.NET

Partial Public Class DemoPage

Inherits UserControl

Public Sub New()

InitializeComponent()

PopulateGridContent()

End Sub

Private Sub PopulateGridContent()

'#Region "Create the rows and columns headers"

Dim itemAllCountries As HierarchyItem =

dataGrid.RowsHierarchy.Items.Add("All Countries")

Dim itemUSA As HierarchyItem =

itemAllCountries.Items.Add("USA")

itemUSA.Items.Add("California")

itemUSA.Items.Add("Oregon")

itemUSA.Items.Add("Washington")

itemUSA.Items.Add("Idaho")

Dim itemCanada As HierarchyItem =

itemAllCountries.Items.Add("Canada")

itemCanada.Items.Add("Ontario")

itemCanada.Items.Add("Quebec")

itemCanada.Items.Add("Alberta")

Dim itemMexico As HierarchyItem =

itemAllCountries.Items.Add("Mexico")

itemMexico.Items.Add("Baja California")

itemMexico.Items.Add("San Luis Potosí")

itemMexico.Items.Add("Nuevo León")

itemMexico.Items.Add("Sonora")

Dim itemAllCustomers As HierarchyItem =

dataGrid.ColumnsHierarchy.Items.Add("All Customers")

itemAllCustomers.Items.Add("Graduate degree")

itemAllCustomers.Items.Add("Bachelors degree")

itemAllCustomers.Items.Add("Associate degree")

itemAllCustomers.Items.Add("High School diploma")

Dim itemTotal As HierarchyItem =

itemAllCustomers.Items.Add("Total")

' #End Region

dataGrid.RowsHierarchy.SetColumnWidth(0, 150)

dataGrid.RowsHierarchy.ExpandAllItems()

dataGrid.ColumnsHierarchy.ExpandAllItems()

dataGrid.ColumnsHierarchy.AutoResize(

AutoResizeMode.FIT_ITEM_CONTENT)

End Sub

End Class

Modifying Grid Cell values in Unbound mode

As you can see, the above example is simple but not super useful because the grid cells are

empty. Adding some content to to grid cells is very easy, and you can use any object as a grid

cell value:

CSharp

HierarchyItem columnGradudateDegree = itemAllCustomers.Items[0];

dataGrid.CellsArea.SetCellValue(itemAllCountries,

columnGradudateDegree, 22356.89); VB.NET

Dim columnGradudateDegree As HierarchyItem =

itemAllCustomers.Items(0)

dataGrid.CellsArea.SetCellValue(itemAllCountries,

columnGradudateDegree, 22356.89)

Sizing options in the DataGrid Control

The VIBlend DataGrid control is auto-sized by default.

AutoSize means that when the DataGrid is placed on a container such as a Canvas or a

StackPanel and the Height or Width, or the MaxHeight or MaxWidth are not specified, it will be

sized to the contents of the container control.

Warning: This can be dangerous however if you are working with a large (1000+ item) collection as the ItemsSource. Since the DataGrid will grow to the size of its contents, and will create objects for each cell that it can show based on its height, it will literally create thousands of objects to display all of the data. This has app performance implications so you should avoid the combination of an auto-sized DataGrid and a large amount of data to display. This isn't an issue if you specify the Height, Width or MaxHeight and MaxWidth for the DataGrid, or put it in a container such as a Grid that provides it with a size.

Since the default size for the DataGrid is auto you won't have write any code to get auto-sizing behavior, but if you do give the DataGrid a height or width, and then want to switch it back to auto-size at runtime, simply set that value to double.NaN which is the Silverlight way of having a FrameworkElement auto-size itself.

CSharp

dataGrid1.Height = double.NaN;

VB .NET

DataGrid1.Height = Double.NaN You should not set the Width and Height properties of the control, when you add it to the Page,

unless you want to specify a fixed size.

<my:DataGrid Name="dataGrid1"/>

In order to restrict the DataGrid’s width, specify its Width property. <my:DataGrid Name="dataGrid1" Width="300"/>

To restrict the DataGrid’s height, use its Height property. Use the Width and Height properties, if you want the specify a fixed size to the control. <my:DataGrid Name="dataGrid1" Width="300" Height="300"/>

Now if you run the application, you will see the DataGrid is not sized to its container control anymore.

Formatting Grid Cells Content

Many data visualization controls in Silverlight allow you to use DataTemplates and Value

converters. In most cases you will be using primarily text, images or a combination of both.

However, the styling and templating infrastructure is very flexible and allows you to add

practically any content to a grid cell by creating a cell DataTemplate. You can even have another

grid control as part of a DataTemplate.

In VIBlend DataGrid for Silverlight you can assign a DataTemplate to any grid cell. There are two

convinient ways to do that:

1. Use the HierarchyItem.CellDataTemplate property to assign a grid cell DataTemplate

that applies to all cells associated with the HierarchyItem. For example, if the

HierarchyItem is part of the RowsHierarchy, the data template will be applied to all

cells in the entire row. Respectively, if the HierarchyItem is part of the

ColumnsHierarchy, the data template will be applied to all cells in the column.

2. Use the CellsArea.SetCellDataTemplate method to assign a DataTemplate to a specific

grid cell.

Templates assigned to specific grid cells take precedence. Internally the DataGrid resolves the

cell DataTemplates in the following order: template assigned directly to the cell, template

assigned to cell’s column, template assigned to the cell’s row.

In addition, you can specifiy a default grid cell DataTemplate by setting the

CellsArea.DefaultCellDataTemplate property.

Earlier we set the value of a grid cell in unbound mode. The following changes to the XAML

markup and the code will create a currency formatting DataTemplate that aligns the cell’s

content to the right, and format the cell’s value as currency:

<UserControl.Resources>

<local:CustomValueConverter x:Key="customConverter"/>

<Grid>

<TextBlock Text="{Binding

Converter={StaticResource customConverter}}"

VerticalAlignment="Center"

HorizontalAlignment="Right" Margin="0,0,5,0"/>

</Grid>

</DataTemplate>

</UserControl.Resources>

CSharp

public class CustomValueConverter : IValueConverter

public object Convert(object value, Type targetType, object

parameter, System.Globalization.CultureInfo culture)

return string.Format("{0:C}", (double)value);

public object ConvertBack(object value, Type targetType,

object parameter, System.Globalization.CultureInfo culture)

return double.Parse(value.ToString(),

System.Globalization.NumberStyles.Currency);

Add the following line at the end of the PopulateGridContent method:

columnGradudateDegree.CellDataTemplate = currencyCellDataTemplate;

VB.NET

Public Class CustomValueConverter

Implements IValueConverter

Public Function Convert(ByVal value As Object, ByVal targetType

As Type, ByVal parameter As Object, ByVal culture As

System.Globalization.CultureInfo) As Object

Return String.Format("{0:C}", CDbl(value))

End Function

Public Function ConvertBack(ByVal value As Object, ByVal

targetType As Type, ByVal parameter As Object, ByVal culture As

System.Globalization.CultureInfo) As Object

Return Double.Parse(value.ToString(),

System.Globalization.NumberStyles.Currency)

End Function

End Class

Add the following line at the end of the PopulateGridContent method:

columnGradudateDegree.CellDataTemplate = currencyCellDataTemplate

Data Binding

VIBlend DataGrid for Silverlight can bind to multiple types of data collections including arrays,

generic lists and observable collections. To data bind the grid to a data source you need to set

the DataGrid.ItemsSource property.

The DataGrid supports several data binding modes:

1. Simple data binding with automatic columns generation.

Step 1: In the XAML markup set the AutoGenerateColumns property to True:

<viblendgrid:DataGrid

x:Name="dataGrid"

Width="700"

Height="350"

AutoGenerateColumns="True"

Background="Transparent">

</viblendgrid:DataGrid>

Step 2: Prepare the data source and set the DataGrid.ItemsSource property:

CSharp

public partial class DemoPage : UserControl

public DemoPage()

PopulateGridContent();

public class Person

public Person(string FirstName, string LastName)

this.FirstName = FirstName;

this.LastName = LastName;

public string FirstName { get; set; }

public string LastName { get; set; }

List<Person> list = new List<Person>();

for (int i = 0; i < 10; i++)

list.Add(new Person(

"First Name " + i,

"Last Name " + i));

dataGrid.ItemsSource = list;

VB.NET

Partial Public Class DemoPage

Public Sub New()

PopulateGridContent()

End Sub

Public Class Person

Public Sub New(

ByVal FirstName As String,

ByVal LastName As String)

Me.FirstName = FirstName

Me.LastName = LastName

End Sub

Private privateFirstName As String

Public Property FirstName() As String

Return privateFirstName

End Get

Set(ByVal value As String)

privateFirstName = value

End Set

End Property

Private privateLastName As String

Public Property LastName() As String

Return privateLastName

End Get

Set(ByVal value As String)

privateLastName = value

End Set

End Property

End Class

Dim list As New List(Of Person)()

For i As Integer = 0 To 9

list.Add(New Person(

"First Name " & i,

"Last Name " & i))

Next i

dataGrid.ItemsSource = list

End Sub

End Class

2. Data Binding with columns selection

In the previous example the data grid will bind to all columns or public properties of the

objects in the collection. In many case, it is useful to bind only some of them.

You can choose which columns or properties to bind and add them to the BoundFields

collection of the grid. The BoundField constructor takes two parameters. The first

parameter is the text that will appear in the column, and the second parameter is the

name of the data column or public property in the data source.

CSharp

List<Person> list = new List<Person>();

for (int i = 0; i < 10; i++)

list.Add(new Person(

"First Name " + i,

"Last Name " + i));

dataGrid.BoundFields.Add(new BoundField(

"First Name",

"FirstName"));

VB.NET

Dim list As New List(Of Person)()

list.Add(New Person(

"First Name " & i,

"Last Name " & i))

Next i

dataGrid.BoundFields.Add(New BoundField(

"First Name", "FirstName"))

End Sub

3. Binding and grouping by one or more columns

VIBlend DataGrid for Silverlight allows you to group the rows by the value of one or more

columns.

This can be done by adding BoundFields to the GroupingColumns collection and setting

the GroupingEnabled property to true.

CSharp

"Employee Name", "Name"));

"Product Name", "ProductName"));

"Quantity", "Quantity"));

"Unit Price", "UnitPrice"));

"Total", "SalesAmount"));

dataGrid.GroupingColumns.Add(new BoundField(

"Employee Name", "Name"));

dataGrid.GroupingColumns.Add(new BoundField(

"Product Name", "ProductName"));

dataGrid.GroupingEnabled = true;

VB .NET

dataGrid.BoundFields.Add(New BoundField("Employee Name", "Name"))

dataGrid.BoundFields.Add(New BoundField("Product Name",

"ProductName"))

dataGrid.BoundFields.Add(New BoundField("Quantity", "Quantity"))

dataGrid.BoundFields.Add(New BoundField("Unit Price",

"UnitPrice"))

dataGrid.BoundFields.Add(New BoundField("Total", "SalesAmount"))

dataGrid.GroupingColumns.Add(New BoundField("Employee Name",

"Name"))

dataGrid.GroupingColumns.Add(New BoundField("Product Name",

"ProductName"))

dataGrid.GroupingEnabled = True

4. Data Binding and Pivot tables generation for OLAP analysis.

The DataGrid control features a built-in data aggregation engine which is capable of

turning any tabular data source into a wide variety of cross tab views. This is similar to the

Pivot tables functionality in Excel.

In a typical data grid, the data is flat and consists of many rows and columns. The data may

contain multiple cells with same values and working with the raw data may not be the

best way to spot patterns and analysize trends. The rows grouping feature allows you to

group multiple rows by columns where the corresponding grid cells have the same value.

Pivot tables go one step further and enable powerful data analysis. A Pivot table usually

consits of row, column and data (value/fact) fields.

Creating a Pivot table with VIBlend DataGrid for Silverlight is very easy. In fact, the data

binding to the data source requires no changes. You need to choose the columns from the

data source and add them to the BoundFields collection:

CSharp

pivotGrid1.BoundFields.Add(new BoundField("Country", "Country"));

pivotGrid1.BoundFields.Add(new BoundField("Region", "Region"));

pivotGrid1.BoundFields.Add(new BoundField("City", "City"));

pivotGrid1.BoundFields.Add(new BoundField(

"Shipper Company ", "ShipperCompany"));

pivotGrid1.BoundFields.Add(new BoundField(

"ExtendedPrice", "ExtendedPrice"));

VB .NET

pivotGrid1.BoundFields.Add(New BoundField("Country", "Country"))

pivotGrid1.BoundFields.Add(New BoundField("Region", "Region"))

pivotGrid1.BoundFields.Add(New BoundField("City", "City"))

pivotGrid1.BoundFields.Add(New BoundField("Shipper Company ",

"ShipperCompany"))

pivotGrid1.BoundFields.Add(New BoundField("ExtendedPrice",

"ExtendedPrice"))

Using this code, if you data bind to the data source, the grid will display many rows and

five columns: Country, Region, City, Carrier, Extended Price.

However, let’s look at a scenario where we want to show count of sales, amount of sales,

and average sale amount grouped by Country, by Region and by City, and do that for each

Shipper Company.

This requires only a few extra lines of code:

1. Assign the Country, Region and City fields to form the Rows hierarchy:

CSharp

pivotGrid1.BoundPivotRows.Add(new BoundField("Country",

"Country"));

pivotGrid1.BoundPivotRows.Add(new BoundField("Region",

"Region"));

pivotGrid1.BoundPivotRows.Add(new BoundField("City", "City"));

VB .NET

pivotGrid1.BoundPivotRows.Add(New BoundField("Country",

"Country"))

pivotGrid1.BoundPivotRows.Add(New BoundField("Region", "Region"))

pivotGrid1.BoundPivotRows.Add(New BoundField("City", "City"))

2. Assign the ShipperCompany field to form the Columns hierarchy:

CSharp

pivotGrid1.BoundPivotColumns.Add(new BoundField(

"Shipper Company", "ShipperCompany"));

VB .NET

pivotGrid1.BoundPivotColumns.Add(New BoundField("Shipper

Company", "ShipperCompany"))

3. Assign the ExtendedPrice field to form the facts/values for count of sales, sales

amount, and average sale amount:

CSharp

pivotGrid1.BoundPivotValues.Add(new BoundValueField("Count of

Sales", "ExtendedPrice", PivotFieldFunction.Count));

pivotGrid1.BoundPivotValues.Add(new BoundValueField("Amount of

Sales", "ExtendedPrice", PivotFieldFunction.Sum));

pivotGrid1.BoundPivotValues.Add(new BoundValueField("Avg Sale

Amount", "ExtendedPrice", PivotFieldFunction.Average));

VB .NET

pivotGrid1.BoundPivotValues.Add(New BoundValueField("Count of

Sales", "ExtendedPrice", PivotFieldFunction.Count))

pivotGrid1.BoundPivotValues.Add(New BoundValueField("Amount of

Sales", "ExtendedPrice", PivotFieldFunction.Sum))

pivotGrid1.BoundPivotValues.Add(New BoundValueField("Avg Sale

Amount", "ExtendedPrice", PivotFieldFunction.Average))

4. Specify if the value/fact columns appear attached to the rows or to the columns:

CSharp

pivotGrid1.PivotValuesOnRows = false;

VB .NET

pivotGrid1.PivotValuesOnRows = False

During the data binding process the DataGrid control will identify the cell with identical

values, organize and group them on rows and on columns, and compute the respective

cell values. The result will be the following pivot table view:

The following source code contains all required steps to build this example.

CSharp

PrepareGridData();

pivotGrid1.BoundFields.Add(new BoundField("Country", "Country"));

pivotGrid1.BoundFields.Add(new BoundField("Region", "Region"));

pivotGrid1.BoundFields.Add(new BoundField("City", "City"));

pivotGrid1.BoundFields.Add(

new BoundField("ShipperCompany", "ShipperCompany"));

pivotGrid1.BoundFields.Add(

new BoundField("ExtendedPrice", "ExtendedPrice"));

pivotGrid1.BoundPivotRows.Add(

new BoundField("Country", "Country"));

pivotGrid1.BoundPivotRows.Add(

new BoundField("Region", "Region"));

pivotGrid1.BoundPivotRows.Add(new BoundField("City", "City"));

pivotGrid1.BoundPivotColumns.Add(

new BoundField("Shipper Company", "ShipperCompany"));

pivotGrid1.BoundPivotValues.Add(new BoundValueField("Count of

Sales", "ExtendedPrice", PivotFieldFunction.Count));

pivotGrid1.BoundPivotValues.Add(new BoundValueField("Amount of

Sales", "ExtendedPrice", PivotFieldFunction.Sum));

pivotGrid1.BoundPivotValues.Add(new BoundValueField("Avg Sale

Amount", "ExtendedPrice", PivotFieldFunction.Average));

pivotGrid1.PivotValuesOnRows = false;

pivotGrid1.RowsHierarchy.CompactStyleRenderingEnabled = true;

pivotGrid1.ItemsSource = salesTable;

pivotGrid1.ColumnsHierarchy.AutoResize(

AutoResizeMode.FIT_ITEM_CONTENT);

pivotGrid1.RowsHierarchy.SetColumnWidth(0, 150);

VB.NET

PrepareGridData()

pivotGrid1.BoundFields.Add(New BoundField("Country",

"Country"))

pivotGrid1.BoundFields.Add(New BoundField("Region",

"Region"))

pivotGrid1.BoundFields.Add(New BoundField("City", "City"))

pivotGrid1.BoundFields.Add(New BoundField(

"Shipper Company", "ShipperCompany"))

pivotGrid1.BoundFields.Add(New BoundField(

"ExtendedPrice", "ExtendedPrice"))

pivotGrid1.BoundPivotRows.Add(New BoundField(

"Country", "Country"))

"Region", "Region"))

"City", "City"))

pivotGrid1.BoundPivotColumns.Add(New BoundField(

"Shipper Company", "ShipperCompany"))

pivotGrid1.BoundPivotValues.Add(New BoundValueField(

"Count of Sales", "ExtendedPrice",

PivotFieldFunction.Count))

"Amount of Sales", "ExtendedPrice",

PivotFieldFunction.Sum))

"Avg Sale Amount", "ExtendedPrice",

PivotFieldFunction.Average))

pivotGrid1.PivotValuesOnRows = False

pivotGrid1.RowsHierarchy.CompactStyleRenderingEnabled =

pivotGrid1.ItemsSource = salesTable

pivotGrid1.ColumnsHierarchy.AutoResize(AutoResizeMode.FIT_ITEM_CONTENT)

pivotGrid1.RowsHierarchy.SetColumnWidth(0, 150)

5. DataBinding to Indexed properties. In order to bind the VIBlend DataGrid to indexed properties, you need to do the

following: 1. Create DataTemplates that are bound to indexed properties.

2. Create a new DataGrid instance. Set the CellDataTemplate property of the DataGrid’s

BoundFields to point to the Data Templates.

<viblend:DataGrid x:Name="dataGrid" Width="400" Height="280" Grid.Row="1" VerticalAlignment="Center" AutoGenerateColumns="True" HorizontalAlignment="Center"> <viblend:DataGrid.BoundFields> <viblend:BoundField Text="FirstName" Width="150" CellDataTemplate="{StaticResource FirstNameCellTemplate}"/> <viblend:BoundField Text="LastName" Width="150" CellDataTemplate="{StaticResource LastNameCellTemplate}"/> </viblend:DataGrid.BoundFields> </viblend:DataGrid>

The complete XAML code is below:

[XAML]

3. Create a new class that will represent a single record of the DataGrid. CSharp

public class Person : INotifyPropertyChanged { public Person() { } private Dictionary<string, object> data = new Dictionary<string, object>(); public object this[string key] { get

{ if (!data.ContainsKey(key)) { data[key] = null; } return data[key]; } set { data[key] = value; if (this.PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs("")); } } } public IEnumerable<string> Keys { get { return data.Keys; } } public event PropertyChangedEventHandler PropertyChanged; }

VB .NET Public Class Person

Implements INotifyPropertyChanged

Public Sub New()

End Sub

Private data As Dictionary(Of String, Object) = New Dictionary(Of

String, Object)()

Default Public Property Item(ByVal key As String) As Object

If (Not data.ContainsKey(key)) Then

data(key) = Nothing

End If

Return data(key)

End Get

Set(ByVal value As Object)

data(key) = value

RaiseEvent PropertyChanged(Me, New

PropertyChangedEventArgs(""))

End Set

End Property

Public ReadOnly Property Keys() As IEnumerable(Of String)

Return data.Keys

End Get

End Property

Public Event PropertyChanged As PropertyChangedEventHandler

End Class

4. Create a new generic List of Person objects and set the ItemsSource property of the

DataGrid, in order to bind it to the list. CSharp

List<Person> listOfPersons = new List<Person>(); for (int i = 0; i < 10; i++) { Person person = new Person(); person["FirstName"] = "FirstName" + i; person["LastName"] = "LastName" + i; listOfPersons.Add(person); } this.dataGrid.ItemsSource = listOfPersons;

VB .NET

List<Person> listOfPersons = new List<Person>();

for (int i = 0; i < 10; i++)

Person person = new Person();

person["FirstName"] = "FirstName" + i;

person["LastName"] = "LastName" + i;

listOfPersons.Add(person);

this.dataGrid.ItemsSource = listOfPersons;

Sorting

VIBlend DataGrid for Silverlight allows you to sort the data by any grid column. Sorting

can be enabled on any column by setting the HierarchyItem.SortMode property:

CSharp

HierarchyItem column1 = dataGrid.ColumnsHierarchy.Items[0];

column1.SortMode = GridItemSortMode.Automatic;

VB.NET

Dim column1 As HierarchyItem = dataGrid.ColumnsHierarchy.Items(0)

column1.SortMode = GridItemSortMode.Automatic

The SortMode property can be set to Automatic, Default, or NotSortable. In Automatic

mode, the user can sort the data by simply clicking on the column. A second click would

trigger sorting in the opposite order, and a third click would remove the sorting and

restore the data in the original order. In Default mode, you can call the DataGrid.SortBy

method and specify the HierarchyItem of the column to sort by, and the sort order

(Ascending or Descending):

CSharp

dataGrid.SortBy(column1, true);

VB.NET

dataGrid.SortBy(column1, True)

You can call the DataGrid.RemoveSort() method to restore the original sorting order.

When the DataGrid control sorts the data, it will properly reorder the rows even if they are

organized in row groups or form a pivot table hierarchy.

Finally, the DataGrid allows you to plug-in custom sorting by providing your own GridCell

comparison function. The only requirement is to implement the IComparer<GridCell>

interface and set the DataGrid. GridCellSortComparer property.

Filtering

VIBlend DataGrid privdes built-in data filtering capabilities. You can enable filtering on any

column HierarchyItem by setting the AllowFiltering property to true.

CSharp

column1.AllowFiltering = true;

VB.NET

column1.AllowFiltering = True

When a HierarchyItem has filtering enabled, it displays a small filter icon:

If the user clicks on the icon, the data grid will display a popup dialog window with various data

filtering options:

The filter criteria definition dialog allows you create different filtering rules for strings, numbers

and data time values. The DataGrid automatically detects the grid cell types and selects the

appropriate filtering functions.

You can also create and apply filters programmatically. To create and apply a filter, follow the

steps below:

1. Create DataGrid’s Rows, Columns and fill it with sample data.

CSharp

for (int i = 0; i < 20; i++) { this.dataGrid1.ColumnsHierarchy.Items.Add("Column " + i); this.dataGrid1.RowsHierarchy.Items.Add("Row " + i); } this.dataGrid1.AllowContextMenuFiltering = true; this.dataGrid1.AllowContextMenuSorting = true; Random random = new Random(); for (int i = 0; i < 20; i++) { HierarchyItem row = this.dataGrid1.RowsHierarchy.Items[i]; for (int j = 0; j < 20; j++) { HierarchyItem column = this.dataGrid1.ColumnsHierarchy.Items[j]; column.AllowFiltering = true; this.dataGrid1.CellsArea.SetCellValue(row, column, (double)i); }

} this.dataGrid1.ColumnsHierarchy.AutoResize(AutoResizeMode.FIT_ALL); this.dataGrid1.RowsHierarchy.AutoResize(AutoResizeMode.FIT_ALL);

VB .NET

Me.dataGrid1.ColumnsHierarchy.Items.Add("Column " & i)

Me.dataGrid1.RowsHierarchy.Items.Add("Row " & i)

Next i

Me.dataGrid1.AllowContextMenuFiltering = True

Me.dataGrid1.AllowContextMenuSorting = True

Dim random As New Random()

Dim row As HierarchyItem = Me.dataGrid1.RowsHierarchy.Items(i)

For j As Integer = 0 To 19

Dim column As HierarchyItem =

Me.dataGrid1.ColumnsHierarchy.Items(j)

column.AllowFiltering = True

Me.dataGrid1.CellsArea.SetCellValue(row, column, CDbl(i))

Next j

Next i

Me.dataGrid1.ColumnsHierarchy.AutoResize(AutoResizeMode.FIT_ALL)

Me.dataGrid1.RowsHierarchy.AutoResize(AutoResizeMode.FIT_ALL)

2. Create a new NumericFilter and set its ComparisonOperator and Value properties.

CSharp

NumericFilter filter = new NumericFilter(); filter.ComparisonOperator = NumericComparisonOperator.GREATER_THAN; filter.Value = 5; FilterGroup<double?> filterGroup = new FilterGroup<double?>(); filterGroup.AddFilter(FilterOperator.AND, filter);

VB .NET

Dim filter As New NumericFilter()

filter.ComparisonOperator = NumericComparisonOperator.GREATER_THAN

filter.Value = 5

Dim filterGroup As FilterGroup(Of Nullable(Of Double)) = New FilterGroup(Of

Nullable(Of Double))()

filterGroup.AddFilter(FilterOperator.AND, filter)

3. Create a new HierarchyItemFilter object and add the FilterGroup to it.

CSharp

HierarchyItemFilter itemFilter = new HierarchyItemFilter(); itemFilter.Item = this.dataGrid1.ColumnsHierarchy.Items[0]; itemFilter.Filter = filterGroup;

VB .NET

Dim itemFilter As New HierarchyItemFilter()

itemFilter.Item = Me.dataGrid1.ColumnsHierarchy.Items(0)

itemFilter.Filter = filterGroup

4. Finally, add the HierarchyItemFilter instance to the Filters collection of the DataGrid’s

RowsHierarchy.

CSharp

this.dataGrid1.RowsHierarchy.Filters.Add(itemFilter);

VB .NET

Me.dataGrid1.RowsHierarchy.Filters.Add(itemFilter)

Rows and Columns Resizing

The DataGrid control supports horizontal resize of grid columns, and both horizontal and

vertical resize of grid rows. The resizing feature is controled at by AllowResize property which is

available in both the ColumnsHierarchy and RowsHierarchy. For example, to make the columns

resizable you can use the following code:

CSharp

dataGrid.ColumnsHierarchy.AllowResize = true;

VB.NET

dataGrid.ColumnsHierarchy.AllowResize = True In many case, you may want the DataGrid control to automatically resize the rows and the

columns. Each HierarchyItem contains an AutoResize method which supports three resize

modes.

The first resize mode is the FIT_ITEM_CONTENT mode which resizes the item (column or row)

for best fit of the item’s content.

The second mode is the FIT_CELL_CONTENT which resize the item for best fit of the content of

the respective grid cells.

The third mode is the FIT_ALL mode which is a combination of the previous two.

You can also request AutoResize of all HierarchyItems (columns or rows) in the respective

hierarchy by calling the ColumnsHierarchy.AutoResize or the RowsHierarchy.AutoResize

method.

Please, not that the AutoResize feature requires precise calculation of the desired content size

for a large number of visual elements, and therefore has performance implications.

Rows and Columns Visibility

To hide the RowsHierarchy, use the following:

CSharp dataGrid.RowsHierarchy.Visible = false;

VB .NET dataGrid.RowsHierarchy.Visible = False

The code snippet below illustrates how to hide the ColumnsHierarchy.

CSharp dataGrid.ColumnsHierarchy.Visible = false;

VB .NET

dataGrid.ColumnsHierarchy.Visible = False

To determine that the hierarchy is visible, use the Visible property of the ColumnsHierarchy or

RowsHierarchy.

In some cases, you may need to hide a specific row or column. The following code example

demonstrates how to hide a column and a row.

CSharp

// Hide a column

dataGrid.ColumnsHierarchy.Items[0].Hidden = true;

// Hide a row

dataGrid.RowsHierarchy.Items[0].Hidden = true;

VB .NET

' Hide a column

dataGrid.ColumnsHierarchy.Items(0).Hidden = True

' Hide a row

dataGrid.RowsHierarchy.Items(0).Hidden = True

To determine whether a row or column is visible you can use the HierarchyItem’s Visible

property.

Cell Events

VIBlend DataGrid for Silverlight exposes the following cell events:

CellMouseClick – Occurs when the mouse button is clicked in a cell bounds.

CellMouseDoubleClick – Occurs when the mouse button is double-clicked in a cell

bounds.

CellMouseDown – Occurs when a mouse button is down in a cell bounds.

CellMouseUp – Occurs when a mouse button is up in a cell bounds.

CellMouseEnter – Occurs when the mouse cursor enters a cell bounds.

CellMouseLeave – Occurs when the mouse cursor leaves a cell bounds.

CellBeginEdit – Occurs when a cell edit is beginning.

CellEndEdit – Occurs when a cell edit is ending.

CellEditorActivate – Occurs when a cell editor is being activated.

CellEditorActivated – Occurs when a cell editor is activated.

CellEditorDeActivate – Occurs when a cell editor is being deactivated.

CellEditorDeActivated – Occurs when a cell editor is deactivated.

CellValidating – Occurs when a cell is validating.

CellValidated – Occurs after the CellValidating event, when the cell is validated.

CellValueChanging – Occurs when a cell value is being changed.

CellValueChanged – Occurs after the CellValueChanging event, when the cell value is

changed.

CellValueNeeded – Occurs before a grid cell painting. Use this event in virtual mode to

specify the content of a grid cell.

CellDataExportFormat – Occurs when a grid data is exported to Excel, CSV, XML or

HTML. Use this event to set the format string and format provider of the exported cell’s

Row and Column Headers Events

VIBlend DataGrid for Silverlight exposes the following HierarchyItem events:

HierarchyItemExpanded - Occurs when a HierarchyItem is expanded

HierarchyItemMouseClick - Occurs when a HierarchyItem is clicked

HierarchyItemMouseDown - Occurs when the user presses a mouse button over

HierarchyItem.

HierarchyItemMouseUp - Occurs when the user releases a mouse button over

HierarchyItem.

HierarchyItemMouseDoubleClick - Occurs when a HierarchyItem is double clicked.

HierarchyItemCustomPaint - Occurs when a HierarchyItem is painted. You can handle

this event to modify the HierarchyItem’s default rendering.

HierarchyItemCollapsed - Occurs when a HierarchyItem is collapsed

HierarchyItemExpanding - Occurs when a HierarchyItem is expanding

HierarchyItemCollapsing - Occurs when a HierarchyItem is collapsing

HierarchyItemDragStarted - Occurs when a drag operation with header item is started

HierarchyItemDragEnded - Occurs when a drag operation with header item is ended

HierarchyItemDragStarting - Occurs when a drag operation with header item is starting

HierarchyItemDragEnding - Occurs when a drag operation with header item is ending

Selection Modes

VIBlend DataGrid for Silverlight supports three selection modes.

1. Full Row Selection mode

The code example below enables the Full Row Selection mode

CSharp

dataGrid.SelectionMode = VIBlend. Silverlight.Controls.DataGrid.SELECTION_MODE.FULL_ROW_SELECT;

VB .NET

dataGrid.SelectionMode = VIBlend.

Silverlight.Controls.DataGrid.SELECTION_MODE.FULL_ROW_SELECT

2. Full Column Selection Mode

The following code snippet enables the column selection mode:

CSharp

Silverlight.Controls.DataGrid.SELECTION_MODE.FULL_COLUMN_SELECT;

VB .NET

Silverlight.Controls.DataGrid.SELECTION_MODE.FULL_COLUMN_SELECT

3. Cell Selection Mode

The cell selection mode is the default selection mode of VIBlend DataGrid for Silverlight.

However, if you need to set it, you should do the following:

CSharp

dataGrid.SelectionMode =

VIBlend.Silverlight.Controls.DataGrid.SELECTION_MODE.CELL_SELECT;

VB .NET

Silverlight.Controls.DataGrid.SELECTION_MODE.CELL_SELECT

You can also enable/disable the multiple selection by using the MultipleSelectionEnabled

property.

CSharp

dataGrid.MultipleSelectionEnabled = false;

VB .NET

dataGrid.MultipleSelectionEnabled = False

Drag and Drop

VIBlend DataGrid for Silverlight provides Drag and Drop capabilties. The feature is very easy to

CSharp

dataGrid.RowsHierarchy.AllowDragDrop = true;

dataGrid.ColumnsHierarchy.AllowDragDrop = true; VB.NET

dataGrid.RowsHierarchy.AllowDragDrop = True

dataGrid.ColumnsHierarchy.AllowDragDrop = True

The DataGrid allows provides several drag and drop related events:

HierarchyItemDragStarting

HierarchyItemDragStarted

HierarchyItemDragEnding

HierarchyItemDragEnded

The event arguments passed with the HierarchyItemDragStarting and HierarchyItemDragEnding

support event canceling which allows you to fine tune the behavior of the drag and drop

feature. For example, if you want to selectivly enable drag and drop only for some of the

columns, you can do that by handling the HierarchyItemDragStarting event. In the event

handler you can set the HierarchyItemDragCancelEventArgs.Cancel property to true if you want

to cancel the drag and drop of a perticular HierarchyItem. You can also enable or diasable the

drag and drop indicator by changing the DataGrid.AllowDragDropIndication property.

Row Details

VIBlend DataGrid for Silverlight allows you to specify RowDetails template for each individual

row in the data grid. There are generally three easy steps that you need to do:

1. Define a DataTemplate

2. Assign it to the HierarchyItem.RowDetailsDataTemplate property

3. Set the HierarchyItem.RowDetailsHeight property

When the DataGrid control loads your template it raises the LoadRowDetails event. You can

handle the event and perform additional tasks like changing the DataContext for the

FrameworkElement that is created from the DataTemplate, or adding event handlers for events

raised by controls embedded within the DataTemplate. [XAML]

<Grid.Background>

</LinearGradientBrush>

</Grid.Background>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Image Source="{Binding Image}"

Grid.Column="0" Grid.Row="0"/>

<Grid>

<TextBlock Text="{Binding Details}"

Grid.ColumnSpan="2"

Grid.Row="0" FontWeight="Bold"

Foreground="#FF003399"/>

<TextBlock Text="Author:" Grid.Column="0"

Grid.Row="1"/>

<TextBlock Text="{Binding Author}" Grid.Column="1"

Grid.Row="1"/>

<TextBlock Text="ISBN:" Grid.Column="0"

Grid.Row="2"/>

<TextBlock Text="{Binding ISBN}" Grid.Column="1"

Grid.Row="2"/>

<TextBlock Text="Pub. Date:" Grid.Column="0"

Grid.Row="3"/>

<TextBlock Text="{Binding PublishDate,

Converter={StaticResource ShortDateConverter}}"

Grid.Column="1" Grid.Row="3"/>

<TextBlock Text="Retail Price:" Grid.Column="0"

Grid.Row="4" Foreground="#FF003399"/>

<TextBlock Text="{Binding Price,

Converter={StaticResource CurrencyConverter}}"

Grid.Column="1" Grid.Row="4" FontWeight="Bold"

Foreground="#FF990000"/>

</Grid>

<Border BorderBrush="#FFC0C0C0" BorderThickness="1"

Grid.ColumnSpan="2"></Border>

</Grid>

</DataTemplate>

CSharp

public partial class RowDetailsDemo : UserControl

public RowDetailsDemo()

PrepareGridData();

dataGrid.BoundFields.Add(new BoundField("Title", "Title"));

dataGrid.BoundFields.Add(new BoundField("Author",

"Author"));

dataGrid.BoundFields.Add(new BoundField("Price", "Price"));

dataGrid.RowsHierarchy.Visible = false;

dataGrid.ItemsSource = listOfBooks;

this.dataGrid.ColumnsHierarchy.AllowResize = true;

dataGrid.ColumnsHierarchy.Items[0].CellStyle =

defaultCellStyle;

dataGrid.ColumnsHierarchy.Items[1].CellStyle =

defaultCellStyle;

dataGrid.ColumnsHierarchy.Items[2].CellDataTemplate =

currencyCellDataTemplate;

dataGrid.ColumnsHierarchy.Items[0].Width = 525;

foreach (HierarchyItem row in dataGrid.RowsHierarchy.Items)

row.RowDetailsDataTemplate = this.rowDetailsTemplate;

row.RowDetailsHeight = 120;

dataGrid.SelectionBorderEnabled = false;

DataGrid.SELECTION_MODE.FULL_ROW_SELECT;

dataGrid.LoadRowDetails += new

EventHandler<GridRowDetailsEventArgs>(

dataGrid_LoadRowDetails);

dataGrid.CellMouseClick += new

DataGrid.GridCellMouseEventHandler(

dataGrid_CellMouseClick);

dataGrid.RowsHierarchy.Items[2].RowDetailsVisiblity =

Visibility.Visible;

dataGrid.Refresh();

void dataGrid_CellMouseClick(object sender,

GridCellMouseEventArgs args)

int row = args.Cell.RowItem.BoundFieldIndex;

dataGrid.RowsHierarchy.Items[row].RowDetailsVisiblity =

(dataGrid.RowsHierarchy.Items[row].RowDetailsVisiblity ==

Visibility.Visible ) ? Visibility.Collapsed :

Visibility.Visible;

void dataGrid_LoadRowDetails(object sender,

GridRowDetailsEventArgs e)

FrameworkElement element = e.RowDetailsElement;

element.DataContext=listOfBooks[e.RowItem.BoundFieldIndex];

VB.NET

Partial Public Class RowDetailsDemo

Public Sub New()

PrepareGridData()

dataGrid.BoundFields.Add(New BoundField("Title",

"Title"))

dataGrid.BoundFields.Add(New BoundField("Author",

"Author"))

dataGrid.BoundFields.Add(New BoundField("Price",

"Price"))

dataGrid.RowsHierarchy.Visible = False

dataGrid.ItemsSource = listOfBooks

Me.dataGrid.ColumnsHierarchy.AllowResize = True

dataGrid.ColumnsHierarchy.Items(0).CellStyle =

defaultCellStyle

dataGrid.ColumnsHierarchy.Items(1).CellStyle =

defaultCellStyle

dataGrid.ColumnsHierarchy.Items(2).CellDataTemplate =

currencyCellDataTemplate

dataGrid.ColumnsHierarchy.Items(0).Width = 525

For Each row As HierarchyItem In

dataGrid.RowsHierarchy.Items

row.RowDetailsDataTemplate =

Me.rowDetailsTemplate

row.RowDetailsHeight = 120

Next row

dataGrid.SelectionBorderEnabled = False

DataGrid.SELECTION_MODE.FULL_ROW_SELECT

AddHandler dataGrid.LoadRowDetails, AddressOf

dataGrid_LoadRowDetails

AddHandler dataGrid.CellMouseClick, AddressOf

dataGrid_CellMouseClick

dataGrid.RowsHierarchy.Items(2).RowDetailsVisiblity =

Visibility.Visible

dataGrid.Refresh()

End Sub

Private Sub dataGrid_CellMouseClick(ByVal sender As Object,

ByVal args As GridCellMouseEventArgs)

Dim row As Integer =

args.Cell.RowItem.BoundFieldIndex

dataGrid.RowsHierarchy.Items(row).RowDetailsVisiblity

If((dataGrid.RowsHierarchy.Items(row).RowDetailsVisiblity =

Visibility.Visible),

Visibility.Collapsed, Visibility.Visible)

End Sub

Private Sub dataGrid_LoadRowDetails(ByVal sender As Object,

ByVal e As GridRowDetailsEventArgs)

Dim element As FrameworkElement = e.RowDetailsElement

element.DataContext =

listOfBooks(e.RowItem.BoundFieldIndex)

End Sub

End Class

Editors

VIBlend DataGrid for Silverlight allows you to set an editor control to a cell, column or row. In the following code example is illustrated how to create a CheckBox control and then apply it to the “IsInStock” column. At first, create a DataTemplate object which uses a CheckBox control. In the sample code below is used the VIBlend CheckBox control which is included in the editors assembly.

[XAML]  <DataTemplate x:Key="cellEditCheckBoxTemplate"> <Grid> <editors:CheckBox IsChecked="{Binding IsInStock, Mode=TwoWay}" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </DataTemplate>

Then create another template which should represent the default CellDataTemplate of the IsInStock column.

[XAML]

<DataTemplate x:Key="cellCheckBoxTemplate"> <Grid> <editors:CheckBox IsChecked="{Binding IsInStock}" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </DataTemplate>

After that, create a new instance of the DataGrid object, add its BoundFields and set the BoundField specific CellDataTemplates and CellEditTemplates. The last BoundField in the code

snippet below sets the CellDataTemplate to the cellCheckBoxTemplate. This means that the data in the “In Stock” column is presented by check boxes. The CellEditTemplate specifies that the default editor of the “In Stock” column is a check box.

[XAML] <c:DataGrid Grid.Row="1" Name="dataGrid1" Height="350" Width="580"> <c:DataGrid.BoundFields> <c:BoundField Text="Book Title" DataField="BookTitle" Width="125" CellEditTemplate="{StaticResource cellEditTextBoxTemplate}" CellEditorActivationFlags="MOUSE_CLICK_SELECTED_CELL" CellEditorDeActivationFlags="MOUSE_CLICK" /> <c:BoundField Text="ISBN" DataField="ISBN" Width="125"/> <c:BoundField Text="Author" DataField="Author" Width="135" SortMode="Automatic" /> <c:BoundField Text="In Stock" DataField="IsInStock" Width="125" SortMode="Automatic" CellDataTemplate="{StaticResource cellCheckBoxTemplate}" CellEditTemplate="{StaticResource cellEditCheckBoxTemplate}"/> </c:DataGrid.BoundFields> </c:DataGrid>

In the final step, bind the data grid to a list of book objects.

1. Create a Book class

CSharp

public class Book

public Book(string title, string isbn, string author, bool

inStock)

this.BookTitle = title;

this.ISBN = isbn;

this.Author = author;

this.IsInStock = inStock;

public string BookTitle { get; set; }

public string ISBN { get; set; }

public string Author { get; set; }

public bool IsInStock { get; set; }

VB .NET Public Class Book

Public Sub New(ByVal title As String, ByVal isbn As

String, ByVal author As String, ByVal inStock As Boolean)

Me.BookTitle = title

Me.ISBN = isbn

Me.Author = author

Me.IsInStock = inStock

End Sub

Public Property BookTitle() As String

Public Property ISBN() As String

Public Property Author() As String

Public Property IsInStock() As Boolean

End Class

2. Create the list of books and fill it with Book objects.

CSharp

public List<Book> listBooks = new List<Book>(); private void PrepareGridData() {

Random rand = new Random(); for (int i = 0; i < 1000; i++) {

int val = rand.Next(); listBooks.Add(new Book("Title " + i, "ISBN " + i, "Author " + i, val % 2 == 0));

VB .NET

Public listBooks As New List(Of Book)()

Private Sub PrepareGridData()

Dim rand As New Random()

Dim val As Integer = rand.Next()

listBooks.Add(New Book("Title " & i, "ISBN " & i, "Author "

& i, val Mod 2 = 0))

Next i

End Sub

3. In the constructor, after the InitializeComponent call, bind the data grid to the list of Books.

CSharp PrepareGridData(); dataGrid1.ItemsSource = listBooks;

VB .NET

PrepareGridData()

dataGrid1.ItemsSource = listBooks

Validation

When you display data entry functionality to users, you frequently have to validate the data

entered into your form. The VIBlend DataGrid class provides a convenient way to perform

validation before data is committed to the data store. You can validate data by handling the

CellValidating event, which is raised by the DataGrid when the current cell changes.

Note: A complete validation sample with full source code in C# and VB .NET is shipped with the

installation of our product. Please take a look at the DataGrid’s Validation sample in our

Examples project.

Validate the cell’s data in the CellValidating event handler.

CSharp

void dataGrid1_CellValidating(object sender, GridCellCancelEventArgs args) { provider.Clear(); if (args.Cell.ColumnItem.Text.Equals("Phone Number")) { string value = (string)(args.Cell.EditorElement as MaskEditor).EditorValue; if (value.Length < 10) {

provider.BlinkStyle = ErrorProviderBlinkStyle.BlinkIfDifferentError; provider.IconAlignment = ErrorProviderIconAlignment.MiddleRight; provider.SetError(args.Cell.EditorElement, "You must enter a valid phone number."); args.Cancel = true; } } }

VB .NET

Private Sub dataGrid1_CellValidating(ByVal sender As Object,

ByVal args As GridCellCancelEventArgs)

provider.Clear()

If args.Cell.ColumnItem.Text.Equals("Phone Number") Then

Dim value As String =

CStr((TryCast(args.Cell.EditorElement,

MaskEditor)).EditorValue)

If value.Length < 10 Then

provider.BlinkStyle =

ErrorProviderBlinkStyle.BlinkIfDifferentError

provider.IconAlignment =

ErrorProviderIconAlignment.MiddleRight

provider.SetError(args.Cell.EditorElement, "You must

enter a valid phone number.")

args.Cancel = True

End If

End Sub

Styling and Appearance

VIBlend DataGrid allows you to customize the display mode of its cell lines. For example, you can easily modify the control to render only horizontal lines, or vertical lines. You can also hide all of the cell lines. The following code snippet sets the display mode to show only the horizontal lines.

CSharp

this.dataGrid.GridLinesDisplayMode =

GridLinesDisplayMode.DISPLAY_ROW_LINES;

this.dataGrid.Refresh();

VB .NET

Me.dataGrid.GridLinesDisplayMode =

GridLinesDisplayMode.DISPLAY_ROW_LINES

Me.dataGrid.Refresh()

In VIBlend DataGrid for Silverlight, you can change the style of an entire column or row. The

following code example creates and applies two different styles to the second and fifth column.

[XAML]

<UserControl.Resources> <Style x:Key="CellStyle1" TargetType="viblend:GridCellElement"> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush EndPoint="0.5,0.971" StartPoint="0.5,0.042"> <GradientStop Color="#FFB1C4DC" Offset="0" /> <GradientStop Color="#FFB1C4DC" Offset="0.36" /> <GradientStop Color="#FFB1C4DC" Offset="0.36" /> <GradientStop Color="#FFB1C4DC" Offset="9.0" /> <GradientStop Color="#FFB1C4DC" Offset="1.0" /> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="BackgroundHover"> <Setter.Value> <LinearGradientBrush EndPoint="0.5,0.971" StartPoint="0.5,0.042"> <GradientStop Color="#FFE2EEFB" Offset="0" /> <GradientStop Color="#FFD1E3F5" Offset="0.418"/> <GradientStop Color="#FFD6E7F5" Offset="0.632"/> <GradientStop Color="#FFDBE9F7" Offset="1.00"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="Foreground" Value="Black" /> <Setter Property="HorizontalContentAlignment" Value="Center" /> <Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="HorizontalCellBordersVisibility" Value="Visible"/> <Setter Property="VerticalCellBordersVisibility" Value="Visible"/> </Style> <Style x:Key="CellStyle2" TargetType="viblend:GridCellElement"> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush EndPoint="0.5,0.971" StartPoint="0.5,0.042"> <GradientStop Color="#FFE0EDFF" Offset="0" /> <GradientStop Color="#FFE0EDFF" Offset="0.36" /> <GradientStop Color="#FFE0EDFF" Offset="0.36" /> <GradientStop Color="#FFE0EDFF" Offset="9.0" /> <GradientStop Color="#FFE0EDFF" Offset="1.0" /> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="BackgroundHover"> <Setter.Value> <LinearGradientBrush EndPoint="0.5,0.971" StartPoint="0.5,0.042"> <GradientStop Color="#FFFFFBDC" Offset="0"/> <GradientStop Color="#FFFFFBDC" Offset="0.358"/> <GradientStop Color="#FFFFFBDC" Offset="0.368"/> <GradientStop Color="#FFFFFBDC" Offset="0.372"/> <GradientStop Color="#FFFFFBDC" Offset="0384"/> <GradientStop Color="#FFFFFBDC" Offset="0.834"/> <GradientStop Color="#FFFFFBDC" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter>

In the code behind, you can apply the styles to any of the data grid columns.

CSharp

Style cellStyle = (Style)this.Resources["CellStyle1"];

Style cellStyle2 = (Style)this.Resources["CellStyle2"];

this.dataGrid.ColumnsHierarchy.Items[1].CellStyle = cellStyle;

this.dataGrid.ColumnsHierarchy.Items[4].CellStyle = cellStyle2;

VB .NET

Dim cellStyle As Style = CType(Me.Resources("CellStyle1"), Style)

Dim cellStyle2 As Style = CType(Me.Resources("CellStyle2"), Style)

Me.dataGrid.ColumnsHierarchy.Items(1).CellStyle = cellStyle

Me.dataGrid.ColumnsHierarchy.Items(4).CellStyle = cellStyle2

You can create and apply a specific style to the header items. The following code creates a style

for the DataGrid headers and cells.

[XAML]

<UserControl.Resources> <ResourceDictionary> <Style x:Key="ItemStyle" TargetType="c:HierarchyItemElement"> <Setter Property="Foreground" Value="White" /> <Setter Property="ForegroundNormal" Value="White" /> <Setter Property="ForegroundHover" Value="White" /> <Setter Property="ForegroundSelected" Value="Black" /> <Setter Property="ForegroundSelectedHover" Value="Black" /> <Setter Property="ForegroundDisabled" Value="Black" /> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="#FF2D3E5C" Offset="0"/> <GradientStop Color="#FF2D3E5C" Offset="1.0"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="BackgroundHover"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="#FF6D7576" Offset="0"/> <GradientStop Color="#FF6D7576" Offset="0.4"/> <GradientStop Color="#FF6D7576" Offset="0.7"/> <GradientStop Color="#FF6D7576" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="BackgroundSelected"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="#FFFFFBEF" Offset="0"/> <GradientStop Color="#FFFFF3CF" Offset="0.4"/> <GradientStop Color="#FFFFE8A6" Offset="0.7"/> <GradientStop Color="#FFFFE8A6" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="BackgroundSelectedHover"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="#CCFFFBEF" Offset="0"/> <GradientStop Color="#CCFFF3CF" Offset="0.4"/> <GradientStop Color="#CCFFE8A6" Offset="0.7"/> <GradientStop Color="#CCFFE8A6" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="BackgroundDisabled"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

To apply the cell and header styles, use the following code snippet:

CSharp

Style hierarchyItemElementStyle = (Style)this.Resources["ItemStyle"];

pivotGrid1.CellsArea.DefaultCellStyle =

(Style)this.Resources["CellStyle"];

pivotGrid1.RowsHierarchy.HierarchyItemDefaultStyle =

hierarchyItemElementStyle;

pivotGrid1.ColumnsHierarchy.HierarchyItemDefaultStyle =

hierarchyItemElementStyle;

VB .NET

Dim hierarchyItemElementStyle As Style =

CType(Me.Resources("ItemStyle"), Style)

pivotGrid1.CellsArea.DefaultCellStyle =

CType(Me.Resources("CellStyle"), Style)

hierarchyItemElementStyle

Styling of entire rows could be used to create a data grid with alternating rows. The following

code example creates a style, which is applied to the grid rows.

[XAML]

Apply the style to the DataGrid rows:

CSharp

Style cellStyle = (Style)this.Resources["AlternatingCellStyle"]; for (int i = 0; i < this.dataGrid.RowsHierarchy.Items.Count; i++) { if (i % 2 != 0) { this.dataGrid.RowsHierarchy.Items[i].CellStyle = cellStyle; } }

VB .NET

Dim cellStyle As Style = CType(Me.Resources("AlternatingCellStyle"),

Style)

For i As Integer = 0 To Me.dataGrid.RowsHierarchy.Items.Count - 1

If i Mod 2 <> 0 Then

Me.dataGrid.RowsHierarchy.Items(i).CellStyle = cellStyle

End If

Next i

In order to set a Theme, you need to add a reference to the theme’s assembly such as

VIBlend.Silverlight.Theme.Office2010Blue.dll. Then you need to load the DataGrid’s theming

files.

For example:

<UserControl.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="/VIBlend.Silverlight.Theme.Office2010Blue;component/DataGrid.xaml"/> <ResourceDictionary Source="/VIBlend.Silverlight.Theme.Office2010Blue;component/ScrollViewer.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </UserControl.Resources>

You can apply the style in code by using the following:

CSharp

Style hierarchyItemElementStyle = (Style)this.Resources["Office2010BlueHierarchyItemElementStyle"]; Style scrollBarStyle = (Style)this.Resources["Office2010BlueScrollBarStyle"]; Style cellsStyle = (Style)this.Resources["Office2010BlueGridCellElementStyle"];

pivotGrid1.RowsHierarchy.HierarchyItemDefaultStyle = hierarchyItemElementStyle; pivotGrid1.ColumnsHierarchy.HierarchyItemDefaultStyle = hierarchyItemElementStyle; pivotGrid1.VerticalScrollBarStyle = scrollBarStyle; pivotGrid1.HorizontalScrollBarStyle = scrollBarStyle; pivotGrid1.CellsArea.DefaultCellStyle = cellsStyle;

VB .NET

Dim hierarchyItemElementStyle As Style =

CType(Me.Resources("Office2010BlueHierarchyItemElementStyle"), Style)

Dim scrollBarStyle As Style =

CType(Me.Resources("Office2010BlueScrollBarStyle"), Style)

Dim cellsStyle As Style =

CType(Me.Resources("Office2010BlueGridCellElementStyle"), Style)

pivotGrid1.VerticalScrollBarStyle = scrollBarStyle

pivotGrid1.HorizontalScrollBarStyle = scrollBarStyle

pivotGrid1.CellsArea.DefaultCellStyle = cellsStyle

ToolTips

The DataGrid control allows you to enable tooltips for grid cells or HierarchyItems in the

ColumsHierarchy and RowsHierarchy. The ToolTips feature is controled by three properties.

To enable ToolTips set the DataGrid.ToolTipsEnabled property. You can control the tooltip show

delay by setting the DataGrid.ToolTipShowDelay property. In addition, you can specify how long

the ToolTip will remain visible before it disappeas automatically by changing the

DataGrid.ToolTipDuration.

CSharp:

// Enable Tooltips

dataGrid.ToolTipsEnabled = true;

// Set the initial show delay

dataGrid.ToolTipShowDelay = TimeSpan.FromSeconds(2);

// Set the tooltip duration time

dataGrid.ToolTipDuration = TimeSpan.FromSeconds(5);

VB.NET:

' Enable Tooltips

dataGrid.ToolTipsEnabled = True

' Set the initial show delay

dataGrid.ToolTipShowDelay = TimeSpan.FromSeconds(2)

' Set the tooltip duration time

dataGrid.ToolTipDuration = TimeSpan.FromSeconds(5)

You can also change the content of the tooltip at runtime by handling the TooltipShow event:

CSharp:

dataGrid.ToolTipShow += new

DataGrid.GridToolTipEventHandler(dataGrid_TooltipShow);

void dataGrid_TooltipShow(object sender, GridToolTipEventArgs args)

// If the row item contains 'France' change the text of the

// tooltip

if (args.RowItem != null && args.RowItem.Text.Contains("France"))

args.ToolTipContent = "This is a custom tooltip text";

args.Handled = true;

VB.NET:

Private dataGrid.ToolTipShow += New

DataGrid.GridToolTipEventHandler(AddressOf dataGrid_TooltipShow)

Private Sub dataGrid_TooltipShow(ByVal sender As Object, ByVal args

As GridToolTipEventArgs)

' If the row item contains 'France' change the text of the

' tooltip

If args.RowItem IsNot Nothing AndAlso

args.RowItem.Text.Contains("France") Then

args.ToolTipContent = "This is a custom tooltip text"

args.Handled = True

End If

End Sub

Editors

Number, Decimal, Percentage, Currency and Fixed-Point Editors

Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)

Adding an Editor control

The following XAML markup adds a NumberEditor, DecimalEditor, CurrencyEditor,

FixedPointEditor and a PercentageEditor.

<viblend:NumberEditor x:Name="NumberEditor" SpinType="None"

Height="25" Width="250" DecimalPlaces="2"/>

<viblend:DecimalEditor x:Name="DecimalEditor" SpinType="None"

Width="250" Height="25" DecimalPlaces="10"/>

<viblend:CurrencyEditor x:Name="CurrencyEditor" SpinType="None"

<viblend:FixedPointEditor x:Name="FixedPointEditor" SpinType="None"

<viblend:PercentageEditor Margin="10" x:Name="PercentageEditor"

SpinType="None" Width="250" Height="25"

DecimalPlaces="2"></viblend:PercentageEditor>

Fraction Part

You can use the DecimalPlaces integer property to modify the number of digits after the

decimal separator.

DecimalPlaces = 5

DecimalPlaces = 0

DecimalPlaces = 2

Culture Settings

You can use the CultureInfo property to change the default formatting settings of any numeric

editor control. The CultureInfo class is in the System.Globalization namespace.

CSharp

CultureInfo info = new CultureInfo("fr-FR");

this.CurrencyEditor.CultureInfo = info;

VB .NET

Dim info As CultureInfo = New CultureInfo("fr-FR")

Me.CurrencyEditor.CultureInfo = info

Spin Behavior

NumberEditor, DecimalEditor, CurrencyEditor, FixedPointEditor and PercentageEditor support

four different types of spin behavior – None, SpinDigit, SpinDigitWithWrap and

SpinValueBeforeDigit.

CSharp

this.NumberEditor.SpinType =

VIBlend.Silverlight.Controls.SpinType.SpinValueBeforeDigit;

this.CurrencyEditor.SpinType =

this.PercentageEditor.SpinType =

this.FixedPointEditor.SpinType =

this.DecimalEditor.SpinType =

VB .NET

Me.NumberEditor.SpinType =

VIBlend.Silverlight.Controls.SpinType.SpinValueBeforeDigit

Me.CurrencyEditor.SpinType =

Me.PercentageEditor.SpinType =

Me.FixedPointEditor.SpinType =

Me.DecimalEditor.SpinType =

Undo/Redo behavior

VIBlend NumberEditor, DecimalEditor, CurrencyEditor, FixedPointEditor and PercentageEditor

support unlimited Undo and Redo. If you want to undo the latest value change, call the Undo()

method. To redo the latest change, call the Redo() method.

Negative values

To make the editor’s Value a negative value you should press the ‘-‘key. If you press the ‘-‘key

again the value will be positive.

Keyboard Support

Left key – moves the caret position one position left.

Right key – moves the caret position one position right.

Shift + Left key – expands the selection with one character in the left direction.

Shift + Right key – expands the selection with one character in the right direction.

Up – increments the Value if the SpinType property value is not SpinType.None.

Down – decrements the Value if the SpinType property value Is not SpinType.None.

Home – moves the caret position to the first character.

End – moves the caret position to the last character.

Del – deletes the current character.

Backspace – deletes the current character and moves one position left.

F2 – deletes the whole Value.

Ctrl + C – copy the current selected value.

Ctrl + X – cut the current selected value.

Ctrl + V – paste the saved value.

Ctrl + Y – Redo operation

Ctrl + Z – Undo operation

Ctrl + A – selects all text.

“.” – moves the selection to the decimal separator

Mouse wheel support

You can use the mouse wheel to increment or decrement the current value. To disable this

feature, set the SpinType property to SpinType.None.

Events

All input controls provide several useful events:

ValueChanging – occurs when the current value is changing. You can use the event arguments

to Cancel the operation.

ValueChanged – occurs when the editor’s value is already changed.

ValidationError –occurs when the Value property of the Editor is not in the valid range specified

by the Minimum and Maximum properties.

SpinEditor

The SpinEditor control resembles the NumericUpDown control in Windows Forms. It is an

editor control with two buttons to increment and decrement a numeric, currency or percentage

value.

VIBlend SpinEditor supports all of the features available in the Number, Percentage, Currency

and Fixed-Point Editor controls.

DecimalPlaces – modify the fraction part of the editor.

CultureInfo – modify the Culture specific information used for formatting the editor strings.

SpinType – modifies the spin behavior of the editor. The values that you can use are None,

SpinDigit, SpinDigitWithWrap and SpinValueBeforeDigit.

EditorType – changes the inner editor’s type. You can use one of the following: Number,

Percentage, Currency and Fixed-Point Editors.

Value – gets or sets the current value.

Minimum and Maximum properties specify the range of valid values that you can set.

Mask Editor

VIBlend Silverlight MaskEditor allows you to use declerative syntax for distinguishing between

proper and improper input.

Use the Mask property to specify the mask string used by the Editor. If you want to modify the

default prompt char ‘_’ you can use the PromptChar property. You can use the Value property

to get or modify the current value of the editor. When you start typing in the editor the Value

property is changed and the ValueChanging and ValueChanged events are fired.

ValueChanging event occurs right before the value changes and you can use it to cancel the

operation.

ValueChanged event occurs when the value is changed.

You can also use the LastValue property to get the last editor’s value.

Keyboard Support

Left key – moves the caret position one position left.

Right key – moves the caret position one position right.

Shift + Left key – expands the selection with one character in the left direction.

Shift + Right key – expands the selection with one character in the right direction.

Del – deletes the current character.

Backspace – deletes the current character and moves one position left.

Ctrl + C – copy the current selected value.

Ctrl + X – cut the current selected value.

Ctrl + V – paste the saved value.

Ctrl + A – selects all text.

DateTime Editor

In order to add a DateTimeEditor to your application, you should do the following:

1. Add the following line at the beginning of your xaml

xmlns:viblend="clr- namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.Editors"

2. Create a new DateTimeEditor instance. <viblend:DateTimeEditor DefaultDateTimeFormat="LongDatePattern" x:Name="LongDate" Height="25" Width="230"/>

VIBlend DateTime editor control for Silverlight is ideal for capturing date and time user input. It

supports Date and Time formatting and multiple Culture settings.

Culture Settings

Use the Culture property to change the default format settings of the DateTimeEditor control.

CSharp

VIBlend.Silverlight.Controls.DateTimeEditor editor = new

VIBlend.Silverlight.Controls.DateTimeEditor();

editor.Culture = new CultureInfo("de-DE");

VB .NET

Dim editor As VIBlend.Silverlight.Controls.DateTimeEditor = New

VIBlend.Silverlight.Controls.DateTimeEditor()

editor.Culture = New CultureInfo("de-DE")

Format

You can change the format string using the FormatValue property. You can also use the

DefaultDateTimeFormat property and choose one of the predefined settings such as

ShortDatePattern, LongDatePattern, ShortTimePattern, LongTimePattern,

UniversalSortableDateTimePattern, RFC1123Pattern, etc. When you modify the

DefaultDateTimeFormat property the FormatValue property will be also updated. FormatValue

property accepts the following standard codes:

d - Short date pattern

D - Long date pattern

f - Full date and time (long date and short time)

F - Full date time pattern (long date and long time)

g - General (short date and short time)

G - General (short date and long time)

m, M -Month day pattern

r, R - RFC1123 pattern

s - Sortable date time pattern (based on ISO 8601) using local time

t -Short time pattern

T - Long time pattern

You can also make a custom format string which you can use as a FormatValue string.

dd - numeric day of the month.

ddd - abbreviated name of the day of the week.

M - Month name followed by the numeric day.

MM - numeric month.

MMM - abbreviated name of the month.

MMMM - full name of the month.

y - year numeric

yy - year without the century

yyy - year including the century

h or hh - hour in a 12-hour clock

H or HH - hour in a 24-hour clock

m or mm - minute.

s or ss - second.

t - The first character in the AM/PM designator.

tt - The AM/PM designator.

You can set a new DateTime value by using the Value property. You can get the last entered

value by using the LastValue property. When the Value property is changed the ValueChanging

and ValueChanged events are fired. You can cancel the changing operation if you set the Cancel

property of ValueChanging event arguments to true. If the current Value is out of the

accessible range which is specified by the Minimum and Maximum properties the

ValidationFailed event will be fired.

Keyboard Support

Left key – moves the editing group one position left.

Right key – moves the editing group one position right.

Up – increments the editing group’s value.

Down – decrements the editing group’s value.

Del – deletes the current editing group value.

Backspace – deletes the current editing group value.

F2 – sets the value to the minimum value.

Space – moves the input group selection one position right

Error Provider

VIBlend Silverlight ErrorProvider is a control which you can use in scenarios where you need to

validate input data. The control resembles the behavior of the standard Windows Forms

ErrorProvider component.

The ErrorProvider class which is part of the VIBlend.Silverlight.Controls namespace.

CSharp:

private ErrorProvider provider = new ErrorProvider();

VB .NET:

Private provider As ErrorProvider = New ErrorProvider()

SetError

To show the error provider control with an error message you should use the SetError()

method. The SetError() method has two parameters – a FrameworkElement instance and an

error message string. You can use the ErrorProvider control to validate the input from any

element derived from FrameworkElement.

CSharp: this.provider.SetError(this.NumberEditor, "Value is greater than Maximum value");

VB .NET: Me.provider.SetError(Me.NumberEditor, "Value is over the Maximum value")

If you want to clear the error message you should pass an empty string as a parameter when you call the SetError() method. CSharp:

this.provider.SetError(this.NumberEditor, "");

VB .NET:

Me.provider.SetError(Me.NumberEditor, "")

You can also use the Clear() method to clear all errors from the ErrorProvider.

IconAlignment

You can modify the alignment of the ErrorProvider related to the position of the

FrameworkElement instance associated to the ErrorProvider.

BlinkRate and BlinkStyle

BlinkRate property specifies the blinking rate of the error icon. The default value of the

animation timer is 250 milliseconds.

BlinkStyle property specifies the style of blinking which could be – NeverBlink, AlwaysBlink and

BlinkIfDifferentError.

AutoComplete Textbox

AutoCompleteEditor is a textbox control with auto-complete and default text features.

ItemsSource property can be used to add auto-complete items to the selector control which is

opened automatically in a popup control below the editor.

The sample code below shows how to set a custom collection of names as an items source.

CSharp

public partial class AutoComplete : UserControl

public AutoComplete()

GenerateSampleData();

this.AutoComplete.ItemsSource = sampleList;

List<string> sampleList;

private void GenerateSampleData()

#region SampleData

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"

#endregion

sampleList = new List<string>();

Random rand = new Random();

for (int i = 0; i < 100; i++)

string record =

firstNames[rand.Next(0, firstNames.Length - 1)] + " "

lastNames[rand.Next(0, lastNames.Length - 1)];

if (!sampleList.Contains(record))

sampleList.Add(record);

VB .NET

Partial Public Class AutoComplete

Public Sub New()

GenerateSampleData()

Me.AutoComplete.ItemsSource = sampleList

End Sub

Private sampleList As List(Of String)

Private Sub GenerateSampleData()

'#Region "SampleData"

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" }

'#End Region

sampleList = New List(Of String)()

Dim record As String = firstNames(

rand.Next(0, firstNames.Length - 1)) & " " &

lastNames(

rand.Next(0, lastNames.Length - 1))

If (Not sampleList.Contains(record)) Then

sampleList.Add(record)

End If

Next i

End Sub

End Class

Events

PopupClosed and PopupOpened events are fired when the Selector control is shown in the

popup. Usually this happens when the user starts typing and there is an item which contains

the typed phrase. SelectionChanged event is fired when the user selects an item from the

Selector control’s items.

Features

MaxDropDownHeight property defines the maximum available height of the popup control.

You can use the FilterMode property to change the items filtering type. You can choose one of

the following modes: None, StartsWith, StartsWithCaseSensitive, Contains,

ContainsCaseSensitive. The default filter mode is Contains.

You can also set your own items filtering behavior by changing the value of the Filter property.

If you want to change the appearance of the match text you can use the MatchTextColor and

MatchTextFontWeight properties.

DefaultText property defines the text which is shown when the editor’s text field is empty and

the color of the text can be specified by using the DefaultTextColor property.

In order to change the Theme of the editors, you need to load the theming files.

The code snippet below, demonstrates how to apply the Office2010Blue Theme to the editors.

Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Menu.dll)

In order to add a Menu control to your application, you should do the following:

1. Specify the Menu control’s namespace.

xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.Menu"

2. Add the Menu control and create its MenuItems. <viblend:Menu Name="Menu" Height="25" HorizontalAlignment="Stretch">

<viblend:MenuItem Height="20" Text="Help"> <viblend:MenuItem Text="Online Help" ImageSource="images/help.png"/> <viblend:MenuItem Text="Contact us" ImageSource="images/contact.png"/> <viblend:MenuItem IsSeparator="True"/> <viblend:MenuItem ImageSource="images/diagnostics.png" Text="Diagnostics..."/>

</viblend:MenuItem> </viblend:Menu>

To apply a Theme, do the following:

1. Load the Theme file(s).

<UserControl.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries>

2. Set the Style property of the Menu and its MenuItems.

For example:

<viblend:Menu Name="Menu" Style="{StaticResource CieloMenuStyle}"/> <viblend:MenuItem Style="{StaticResource CieloMenuItemStyle}" Text="File"/>

Item text

You can set a text to a MenuItem using the Text property.

<viblend:MenuItem Text="File"></viblend:MenuItem>

Item image

You can set an image to a MenuItem using the ImageSource property.

<viblend:MenuItem Text="Mail Message" ImageSource="images/mail.png">

</viblend:MenuItem>

Item Templates

You can use the Header property to specify menu item’s Content or the HeaderTemplate

property to specify menu item’s ContentTemplate.

<viblend:MenuItem Header="Mail Message"</viblend:MenuItem>

<viblend:MenuItem>

<viblend:MenuItem.HeaderTemplate>

<Grid>

<ColumnDefinition

Width="27"></ColumnDefinition>

<TextBlock Grid.Column="1" Text="Mail

Message"></TextBlock>

<Image Source="images/mail.png"

HorizontalAlignment="Left" Grid.Column="0"

Width="16" Height="16" Margin="1"></Image>

</Grid>

</DataTemplate>

</viblend:MenuItem.HeaderTemplate>

</viblend:MenuItem>

Binding to objects

You can bind VIBlend Silverlight Menu to objects. You should specify the ItemsSource and the

ItemTemplate properties.

<viblend:Menu Canvas.Left="5" Canvas.Top="5"

AnimationType="Bounds" Name="Menu" Orientation="Horizontal"

Width="400" Height="35" VerticalAlignment="Top"

HorizontalAlignment="Left">

<viblend:Menu.ItemTemplate>

<common:HierarchicalDataTemplate

ItemsSource="{Binding Items}">

<Grid>

<TextBlock Grid.Row="0" Grid.Column="1"

Text="{Binding LaptopType}" FontSize="8"

FontStyle="Italic" Foreground="Gray"

Margin="0 0 0 -5" />

<TextBlock Grid.Row="1" Grid.Column="1"

Text="{Binding Model}" />

</Grid>

</common:HierarchicalDataTemplate>

</viblend:Menu.ItemTemplate>

</viblend:Menu>

</Border>

In the code behind we set the value of the ItemsSource property.

CSharp

Menu.ItemsSource = Laptop.Laptops;

VB .NET

Menu.ItemsSource = Laptop.Laptops

Here is the xaml declaration of the ObjectCollection with Laptops which we use to bind the menu.

<samples:ObjectCollection x:Key="Laptops"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

<samples:Lenovo Model="Idea Pad">

<samples:Lenovo Model="Idea Pad S10" />

</samples:Lenovo>

<samples:Lenovo Model="Think Pad">

<samples:Lenovo Model="Think Pad R500" />

</samples:Lenovo>

<samples:Toshiba Model="Satellite">

<samples:Toshiba Model="L300" />

<samples:Toshiba Model="L350" />

<samples:Toshiba Model="U500-10L" />

<samples:Toshiba Model="P300-26N">

</samples:Toshiba>

</samples:ObjectCollection>

Menu Orientation

You can use the Orientation property of VIBlend Silverlight Menu to specify a Horizontal or

Vertical orientation. The default orientation is Horizontal.

Separator Item

In order to create a separator item, do the following:

<viblend:MenuItem IsSeparator="True"></viblend:MenuItem>

Disabled Item

You can specify that a menu item is disabled using the MenuItem’s IsEnabled property.

<viblend:MenuItem Text="Refresh" Foreground="Gray" Padding="5"

IsEnabled="False">

Custom Drop-down width

You can modify menu item’s drop down width using the DropDownWidth property.

<viblend:MenuItem DropDownWidth="110" Text="Go">

<viblend:MenuItem Text="Mail">

</viblend:MenuItem>

<viblend:MenuItem Text="Calendar" >

</viblend:MenuItem>

<viblend:MenuItem Text="Contacts"

</viblend:MenuItem>

<viblend:MenuItem Text="Tasks"

</viblend:MenuItem>

<viblend:MenuItem Text="Notes">

</viblend:MenuItem>

</viblend:MenuItem>

Menu Items with Check Marks

You can specify that a menu item is checkable using the AllowCheckState bool property. To

specify whether an item is checked or not you can use the IsChecked property. You can change

the IsChecked property in runtime by clicking the menu item with the mouse left button or you

can also hit the “space” key.

<viblend:MenuItem Text="Standard" AllowCheckState="True"

IsChecked="True”/>

Menu Events

ItemClicked – occurs when a menu item is clicked. You can use the event arguments to

get the MenuItem instance which is clicked.

PopupOpening – occurs when the menu popup is opening. You can use the event

arguments to cancel the operation.

PopupOpened – occurs when the menu popup is opened.

PopupClosing – occurs when the menu popup is closing. You can use the event

arguments to cancel the operation.

PopupClosed – occurs when the menu popup is closed.

PropertyChanged – occurs when a property value in the Menu control is changed.

Context Menu

Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Menu.dll)

ContextMenu can be opened using the Open(Point location) method. You can use the Close()

method to close the ContextMenu.

Here is sample code which demonstrates how to show a context menu when a mouse button is

clicked.

CSharp

1. Subscribe to the MouseLeftButtonDown event.

this.MouseLeftButtonDown += new

MouseButtonEventHandler(Page_MouseLeftButtonDown);

2. Open the context menu where the mouse button is clicked.

void Page_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

Point pt = e.GetPosition(this);

this.Menu.Open(pt);

VB .NET

1. Subscribe to the MouseLeftButtonDown event.

AddHandler MouseLeftButtonDown, AddressOf Page_MouseLeftButtonDown

2. Open the context menu where the mouse button is clicked.

Private Sub Page_MouseLeftButtonDown(

ByVal sender As Object,

ByVal e As MouseButtonEventArgs)

Dim pt As Point = e.GetPosition(Me)

Me.Menu.Open(pt)

End Sub

You can use one of the predefined styles – OfficeBlack, OfficeBlue and OfficeSilver.

1. Add a reference to the VIBlend.Silverlight.Theme.Office2007Blue.dll,

VIBlend.Silverlight.Theme.Office2007Silver.dll,

VIBlend.Silverlight.Theme.Office2007Black.dll,

VIBlend.Silverlight.Theme.Office2010Blue.dll,

VIBlend.Silverlight.Theme.Office2010Silver.dll,

VIBlend.Silverlight.Theme.Office2010Black.dll

2. Declare your resources

<ResourceDictionary.MergedDictionaries>

<ResourceDictionary

Source="/VIBlend.Silverlight.Theme.OfficeBlack;component/Menu.xaml"/>

<ResourceDictionary

Source="/VIBlend.Silverlight.Theme.OfficeBlack;component/MenuItem.xaml"

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

3. Set Style property of the Menu and the Menu items

<viblend:Menu Canvas.Left="5" Canvas.Top="5" AnimationType="Bounds"

Name="Menu" Style="{StaticResource OfficeBlackMenuStyle}"

Orientation="Horizontal" Width="400" Height="20"

VerticalAlignment="Top" HorizontalAlignment="Left">

<viblend:MenuItem

Style="{StaticResource OfficeBlackMenuItemStyle}"

Text="Folder">

</viblend:MenuItem>

You can also take a look at the Custom Style example in the QSF which shows how to create

custom Menu styles.

OutlookPane

Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.NavigationPanes.dll)

Getting started with the OutlookPane control

The OutlookPane control is defined in the VIBlend.Silverlight.Controls namespace.

The first step is to reference the NavigationPanes.dll assembly in your project:

1. Click on the Solution Explorer tab and expand the references node under your

project.

3. Locate the NavigationPanes.dll assembly inside the VIBlend Silverlight Controls

folder and click Ok.

4. The NavigationPanes.dll will appear in your project references

5. Locate the VIBlendUtilities.dll assembly inside the VIBlend Silverlight Controls folder

and click Ok

After adding a reference to the VIBlend NavigationPanes assembly the next step is to add an

instance of the OutlookPane control to your page:

1. Add the following line in the beginning of your XAML page:

xmlns:viblend="clr-namespace: VIBlend.Silverlight.Controls;

assembly=VIBlend.Silverlight.NavigationPanes"

2. Add an instance of the OutlookPane control to the XAML page

The complete XAML markup is shown here: <UserControl x:Class="SilverlightApplication7.MainPage"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=

VIBlend.Silverlight.NavigationPanes"

mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

<viblend:OutlookPane Width="200" Height="200">

</viblend:OutlookPane>

</Grid>

</UserControl>

The result of the XAML markup is shown here:

Outlook Pane Control Basics

VIBlend OutlookPane contains three core areas:

HeaderItem – represents the header and content area

Items collection – represents the OutlookPaneItems collection

StatusItem – represents the status area

Each item in the items collection is represented by the OutlookPaneItem class. The OutlookPaneItem is a HeaderContentControl and it has a header and content parts. The content part is shown when the OutlookPaneItem is selected.

Adding OutlookPaneItem

The XAML markup shown below creates and adds an OutlookPaneItem to the OutlookPane

<viblend:OutlookPane Width="200" Height="200">

<viblend:OutlookPaneItem

DisplayHeader="Item in Header"

MenuItemHeader="Item in Menu"

CollapsedStatusContent="Item in Status"

CollapsedDefaultHeader="Collapsed Default Text"

DefaultHeader="Default Text">

</viblend:OutlookPaneItem>

The code adds OutlookPaneItem to the Items collection of OutlookPane control.

CSharp

OutlookPaneItem item = new OutlookPaneItem();

item.DefaultHeader = "New Item";

item.DisplayHeader = "New Item";

item.CollapsedDefaultHeader = "N";

item.CollapsedStatusContent = "N";

this.OutlookPane.Items.Add(item);

VB.NE:

Dim item As OutlookPaneItem = New OutlookPaneItem()

item.DefaultHeader = "New Item"

item.DisplayHeader = "New Item"

item.CollapsedDefaultHeader = "N"

item.CollapsedStatusContent = "N"

Me.OutlookPane.Items.Add(item)

OutlookPaneItem Templates

You can create and use a template for almost everything in OutlookPaneItem.

The DefaultHeader and DefaultHeaderTemplate properties allow you to add any content

to the OutlookPaneItem’s caption.

CollapsedDefaultHeader and CollapsedDefaultHeaderTemplate properties define the

OutlookPaneItem’s look and feel, when the OutlookPane is collapsed.

CollapsedStatusContent and CollapsedStatusContentTemplate properties allow you to

create a specific template for the OutlookPaneItem when it is minimized and shown in

the status area.

DisplayHeader and DisplayHeaderTemplate properties let you set how the item will be

shown in the OutlookPane’s header when the item is selected.

Style="{StaticResource OfficeBlueOutlookPaneItemStyle}"

MenuItemHeader="Mail"

CollapsedDefaultHeaderTemplate =

"{StaticResource ShortMailTemplate}"

CollapsedStatusContentTemplate =

"{StaticResource ShortMailTemplate}"

DisplayHeaderTemplate="{StaticResource BoldMailTemplate}"

DefaultHeaderTemplate="{StaticResource MailTemplate}">

Expanded and Collapsed states

The CollapsedWidth and DefaultWidth properties of OutlookPane allow you to specify the

control’s width when it is collapsed or expanded.

The XAML markup below shows how to set the CollapsedWidth and DefaultWidth properties.

You can also use the CollapsedStateButtonContentTemplate property to create a template for

the ToggleButton shown when the OutlookPane is collapsed.

<viblend:OutlookPane

AutoSize="True" Grid.Column="1" x:Name="OutlookPane"

CollapseWidth="26" DefaultWidth="250" HorizontalAlignment="Left"

Width="250" Height="380">

<viblend:OutlookPane.CollapsedStateButtonContentTemplate>

<utilityControl:LayoutTransformer>

<utilityControl:LayoutTransformer.LayoutTransform>

</RotateTransform>

</utilityControl:LayoutTransformer.LayoutTransform>

<TextBlock

TextAlignment="Left" TextWrapping="NoWrap"

Foreground="#FF204D89" FontWeight="Bold"

HorizontalAlignment="Center" FontStretch="Expanded"

VerticalAlignment="Center" Text="Folders">

</TextBlock>

</utilityControl:LayoutTransformer>

</DataTemplate>

</viblend:OutlookPane.CollapsedStateButtonContentTemplate>

If you need to expand or collapse the OutlookPane, you can use the ToggleButton shown in the

top-right corner of the control’s header. Programmatically you can use the IsExpanded

property.

You can enable/disable the collapse mode by using the EnableCollapseMode property.

Customizing OutlookPaneItems

The XAML markup shown here demonstrates how to add any content to the OutlookPaneItem:

Style="{StaticResource OfficeBlueOutlookPaneItemStyle}"

MenuItemHeader="Notes"

CollapsedDefaultHeaderTemplate="{StaticResource ShortNotesTemplate}"

CollapsedStatusContentTemplate="{StaticResource ShortNotesTemplate}"

DisplayHeaderTemplate="{StaticResource BoldNotesTemplate}"

DefaultHeaderTemplate="{StaticResource NotesTemplate}">

</StackPanel>

You can minimize the OutlookPaneItem by using its IsCollapsed boolean property.

<viblend:OutlookPaneItem IsCollapsed="True"

DisplayHeader="Item in Header"

MenuItemHeader="Item in Menu"

CollapsedStatusContent="Item in Status"

CollapsedDefaultHeader="Collapsed Default Text"

DefaultHeader="Default Text">

You can select the OutlookPaneItem by using the IsSelected property.

If you need to have a custom height for your contents, you can set the AutoSize property to

false and set the ContentHeight property.

EnableResize property allows you to enable/disable the resizing behavior with the grip

element. When you resize the OutlookPane by using the resize grip, the ItemResizing and

ItemResized events are fired.

If you need to programatically minimize OutlookPaneItems, you can use the OutlookPane’s Up

and Down methods.

SelectedItem and SelectedIndex properties allow you to programmatically select an

OutlookPaneItem. When a new item is selected the SelectedItemChanging and

SelectedItemChanged events are fired.

If you need to programatically close the popup menu, you can call the ClosePopup method. You

can also open the popup menu by calling the OpenPopup method and passing a Point as a

parameter. When the popup menu is opened, the MenuOpening and MenuOpened events are

fired. When the popup menu is closed, the MenuClosing and MenuClosed events are fired.

In order to change the OutlookPane’s Theme, you need to add a reference to the Theme assembly in

your project and load the control’s theming files.

1. Load the Theme files.

2. Apply the Theme to the OutlookPane and its items.

For example:

<viblend:OutlookPane Style="{StaticResource Office2010BlueOutlookPaneStyle}" x:Name="OutlookPane"/> <viblend:OutlookPaneItem IsCollapsed="True" Style="{StaticResource Office2010BlueOutlookPaneItemStyle}"/>

NavigationPane

Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.NavigationPanes.dll)

Getting started with the NavigationPane control

The NavigationPane control is defined in the VIBlend.Silverlight.Controls namespace.

The first step is to reference the NavigationPanes.dll assembly in your project:

1. Click on the Solution Explorer tab and expand the references node under your project.

3. Locate the NavigationPanes.dll assembly inside the VIBlend Silverlight Controls folder

and click Ok.

4. The NavigationPanes.dll will appear in your project references

5. Locate the VIBlend.Silverlight.Utilities.dll assembly inside the VIBlend Silverlight Controls

folder and click Ok.

After adding a reference to the VIBlend NavigationPanes assembly the next step is to add an

instance of the NavigationPane control to your page:

Add the following line at the beginning of your XAML page:

xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.NavigationPanes"

Add an instance of the NavigationPane control to the XAML page

The complete XAML markup is shown here: <UserControl x:Class="SilverlightApplication.MainPage"

xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.NavigationPanes" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

<viblend:NavigationPane Width="200" Height="300">

<viblend:NavigationPaneItem

DisplayValue="Item1">

</viblend:NavigationPaneItem>

</viblend:NavigationPane>

</Grid>

</UserControl>

The result of the XAML markup is shown here:

Working with the NavigationPane Control

Each item in the NavigationPane items collection is represented by the NavigationPaneItem class. The NavigationPaneItem is a HeaderContentControl and it has a header and content parts. The content part is shown when the NavigationPaneItem is expanded.

The XAML markup shown below creates and adds a NavigationPaneItem to the NavigationPane

control:

<viblend:NavigationPane

x:Name="NavigationPane"

Width="200"

Height="300">

The code adds NavigationPaneItem to the Items collection of NavigationPane control.

CSharp

NavigationPaneItem item = new NavigationPaneItem("New Item");

this.NavigationPane.Items.Add(item);

VB.NET

Dim item As NavigationPaneItem = New NavigationPaneItem("New Item") Me.NavigationPane.Items.Add(item)

The NavigationPane control supports three different expand modes: expand by single click,

double click and auto expand mode. Use the ExpandType property to specify the desired

expand mode.

If you want to have only one item opened, you can use the EnableSingleItemExpand property.

You can also hide the Expand/Collapse buttons by using the

AreExpandCollapseElementsVisible property.

When you expand or collapse NavigationPaneItems the ItemExpandedChanging and

ItemExpandedChanged events are fired.

NavigationPane ships with three themes – OfficeBlue, OfficeBlack and OfficeSilver

To load one of these themes, you will need to add a reference to

VIBlend.Silverlight.Theme.OfficeBlue.dll, VIBlend.Silverlight.Theme.OfficeBlack.dll or

VIBlend.Silverlight.Theme.OfficeSilver.dll

The XAML markup shown below demonstrates how to load and use the OfficeBlack theme in

the NavigationPane:

<UserControl x:Class="SilverlightApplication7.MainPage"

xmlns:viblend="clr-

namespace:VIBlend.Silverlight.Controls;assembly=NavigationPanes"

<ResourceDictionary.MergedDictionaries>

<ResourceDictionary

Source="/VIBlend.Silverlight.Theme.OfficeBlack;

component/NavigationPane.xaml"/>

<ResourceDictionary

Source="/VIBlend.Silverlight.Theme.OfficeBlack;

component/NavigationPaneItem.xaml"/>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

Style="{StaticResource OfficeBlackNavigationPaneStyle}"

AreExpandCollapseElementsVisible="False"

x:Name="NavigationPane" Width="200" Height="300">

Style="{StaticResource OfficeBlackNavigationPaneItemStyle}"

IsExpanded="True" DisplayValue="Item1">

<Button

HorizontalAlignment="Left"

Margin="12,2,2,2"

Content="Button1">

</Button>

<Button

Margin="12,2,2,2"

Content="Button2">

</Button>

</StackPanel>

Style="{StaticResource OfficeBlackNavigationPaneItemStyle}"

IsExpanded="True" DisplayValue="Item2">

<Button

Margin="12,2,2,2"

Content="Button1">

</Button>

</StackPanel>

</Grid>

</UserControl>

The image below shows the result:

Working with NavigationPaneItems

You can create and use a template for the header and content parts.

The Header and HeaderTemplate properties allow you to add any content to the

NavigationPane’s caption.

The XAML markup shown here demonstrates how to create a custom header template

<UserControl x:Class="SilverlightApplication7.MainPage"

xmlns:viblend="clr-

namespace:VIBlend.Silverlight.Controls;assembly=NavigationPanes"

<viblend:NavigationPane AreExpandCollapseElementsVisible="False"

x:Name="NavigationPane" Width="200" Height="300">

<viblend:NavigationPaneItem>

<viblend:NavigationPaneItem.HeaderTemplate>

<Border

Width="185" Height="30" CornerRadius="3"

BorderThickness="1" Background="Lime"

BorderBrush="Blue">

<TextBlock

Foreground="Blue" HorizontalAlignment="Center"

VerticalAlignment="Center" FontSize="16"

FontWeight="Bold" FontStyle="Italic"

Text="HeaderTemplate">

</TextBlock>

</Border>

</DataTemplate>

</viblend:NavigationPaneItem.HeaderTemplate>

<Button

HorizontalAlignment="Left" Margin="12,2,2,2"

Content="Button1">

</Button>

<Button HorizontalAlignment="Left" Margin="12,2,2,2"

Content="Button2">

</Button>

Content="Button3">

</Button>

Content="Button4">

</Button>

Content="Button5">

</Button>

</StackPanel>

<viblend:NavigationPaneItem DisplayValue="Default Template"/>

<viblend:NavigationPaneItem Header="Header"/>

</Grid>

</UserControl>

Content and ContentTemplate properties allow you to set and use any content in the NavigationPaneItem. The XAML markup shown here demonstrates how to create a ContentTemplate in the NavigationPaneItem

<viblend:NavigationPaneItem DisplayValue="Default Template">

<viblend:NavigationPaneItem.ContentTemplate>

<Button HorizontalAlignment="Left"

Margin="12,2,2,2" Content="Button1"/>

Margin="12,2,2,2"

Content="Button2"/>

Margin="12,2,2,2"

Content="Button3"/>

Margin="12,2,2,2"

Content="Button4"/>

Margin="12,2,2,2"

Content="Button5"/>

</StackPanel>

</DataTemplate>

</viblend:NavigationPaneItem.ContentTemplate>

You can expand or collapse the NavigationPaneItem by using the IsExpanded property.

The following XAML markup demonstrates how to expand a NavigationPaneItem:

AreExpandCollapseElementsVisible="False" x:Name="NavigationPane"

Width="200" Height="300">

<viblend:NavigationPaneItem IsExpanded="True" DisplayValue="Item1">

Content="Button1"/>

Content="Button2"/>

Content="Button3"/>

Content="Button4"/>

Content="Button5"/>

</StackPanel>

If you want to disable a NavigationPaneItem you can do that using the IsEnabled property:

In order to change the NavigationPane’s Theme, you need to add a reference to the Theme assembly in

your project and load the control’s theming files.

1. Load the Theme files.

2. Apply the Theme to the NavigationPane and its items.

For example:

<viblend:NavigationPane Style="{StaticResource Office2010BlueNavigationPaneStyle}" x:Name="NavigationPane"/> <viblend:NavigationPaneItem Style="{StaticResource Office2010BlueNavigationPaneItemStyle}" x:Name="Item1"/>

TreeView

Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.TreeView.dll)

Represents a control that displays hierarchical data in a tree structure that has items

that can expand and collapse. . The VIBlend TreeView control is an ItemsControl, which

means you populate the control with content by setting its Items or ItemsSource

properties.

The following code example creates a simple TreeView control.

[XAML ]

<viblend:TreeView Background="White" Width="250" Height="280" VerticalAlignment="Center"

HorizontalAlignment="Center" x:Name="TreeView">

<viblend:TreeViewItem IsExpanded="True" DisplayValue="Home" ImageSource="images/DragDropExample/Home.png"> <viblend:TreeViewItem DisplayValue="Desktop" ImageSource="images/DragDropExample/Desktop.png"></viblend:TreeViewItem> <viblend:TreeViewItem DisplayValue="Clipboard" ImageSource="images/DragDropExample/Clipboard.png"></viblend:TreeViewItem> <viblend:TreeViewItem DisplayValue="Homework" ImageSource="images/DragDropExample/Homework.png"></viblend:TreeViewItem> <viblend:TreeViewItem DisplayValue="Chat" ImageSource="images/DragDropExample/Chat.png"></viblend:TreeViewItem> </viblend:TreeViewItem> </viblend:TreeView>

The items in the TreeView are represented by TreeViewItem objects. You can get or set the

selected item using the SelectedItem property.

When the selected item changes, the ItemSelectionChanging and ItemSelectionChanged

events occur. The ItemSelectionChanging is fired when you are selecting TreeViewItem object.

You can use this event to do some action before the actual selection. You can also Cancel the

selection by setting the Cancel property of the ItemSelectionChanging event arguments to

true. The ItemSelectionChanged event occurs when the TreeViewItem is already selected.

Use the IsExpanded property of the TreeViewItem object, to expand or collapse it. You can bind

the TreeView to data and use a HierarchicalDataTemplate to display the data in a hierarchical

manner. You can use the ItemsSource and ItemTemplate properties of the data template to

specify the data source and format of the next level of data that is contained in the TreeView.

The following xaml code snippet illustrates how to create and set a HierarchicalDataTemplate

to the VIBlend TreeView.

[XAML]

Note: Complete example with full source code in C# and VB .NET which illustrates how to bind the TreeView and use HierarchicalDataTemplates is part of installation of our software. Please find the Templates sample in the TreeView folder of the installed examples. In the code behind, set the ItemsSource property.

CSharp this.TreeView.ItemsSource = Hardware.AllHardware;

VB .NET

Me.TreeView.ItemsSource = Hardware.AllHardware

When the TreeView is bound to data source, you can retrieve its items by using the ItemContainerGenerator associated to the TreeView.

Editors

The VIBlend TreeView control allows you to associate editors to the TreeViewItem objects. In

order to associate an editor, use the EditTemplate property of the TreeViewItem object.

To enable or disable the editing feature use the EnableItemEdit property of the TreeView class.

Use the EnableItemEdit property of the TreeViewItem object, when you want to

enable/disable the editing of a specific item. Please note that the associated editor, edits the

Value of the TreeViewItem object.

The following code snippet illustrates how to create the Editors which will be used to edit the

TreeViewItem objects.

[XAML] <UserControl.Resources> <DataTemplate x:Name="ComboBoxTemplate"> <ComboBox SelectedIndex="0"> <ComboBoxItem Content="Green Tea"/> <ComboBoxItem Content="Caffè Espresso"/> <ComboBoxItem Content="Caffè Latte"/> <ComboBoxItem Content="White Chocolate Mocha"/> <ComboBoxItem Content="Caffè Americano"/> <ComboBoxItem Content="Cappuccino"/> <ComboBoxItem Content="Espresso Truffle"/> </ComboBox> </DataTemplate> <DataTemplate x:Name="CurrencyEditorTemplate"> <editors:CurrencyEditor></editors:CurrencyEditor> </DataTemplate> <DataTemplate x:Name="SpinEditorTemplate"> <editors:SpinEditor DecimalPlaces="0"></editors:SpinEditor> </DataTemplate> <DataTemplate x:Name="DateTimeTemplate"> <editors:DateTimeEditor></editors:DateTimeEditor> </DataTemplate> </UserControl.Resources> The code snippet below demonstrates how to set the EditTemplate property.

[XAML] <viblend:TreeView EnableItemEdit="True" Width="280" Height="270" Style="{StaticResource Office2007BlackTreeViewStyle}" VerticalAlignment="Center" HorizontalAlignment="Center" Background="White" x:Name="TreeView"> <viblend:TreeViewItem DisplayValue="Tina Saavedra" ImageSource="images/Tina.jpg" Value="Tina Saavedra"> <viblend:TreeViewItem DisplayValue="Date - 11/16/2009" Value="11/16/2009" EditTemplate="{StaticResource DateTimeTemplate}"> </viblend:TreeViewItem> <viblend:TreeViewItem DisplayValue="Product - Espresso Truffle" EditTemplate="{StaticResource ComboBoxTemplate}" Value="Espresso Truffle"> </viblend:TreeViewItem> <viblend:TreeViewItem DisplayValue="Quantity - 3" EditTemplate="{StaticResource SpinEditorTemplate}" Value="3"> </viblend:TreeViewItem>

<viblend:TreeViewItem DisplayValue="UnitPrice - $2.45" EditTemplate="{StaticResource CurrencyEditorTemplate}" Value="2.45"> </viblend:TreeViewItem> <viblend:TreeViewItem DisplayValue="Total - $7.35" EnableItemEdit="False"> </viblend:TreeViewItem> </viblend:TreeViewItem> </viblend:TreeViewItem> </viblend:TreeView>

In the code behind, you should handle the ItemBeginEdit and ItemEndEdit events in order to set an initial value of the editor when it is activated and at the end of the edit operation, you should set the DisplayValue property of the TreeViewItem object.

1. Subscribe to the ItemBeginEdit and ItemEndEdit events.

CSharp this.TreeView.ItemBeginEdit += new VIBlend.Silverlight.Controls.TreeView.ItemStateChangedHandler(TreeView_ItemBeginEdit); this.TreeView.ItemEndEdit += new VIBlend.Silverlight.Controls.TreeView.ItemStateChangedHandler(TreeView_ItemEndEdit);

VB .NET Me.TreeView.ItemBeginEdit += New VIBlend.Silverlight.Controls.TreeView.ItemStateChangedHandler(TreeView_ItemBeginEdit) Me.TreeView.ItemEndEdit += New VIBlend.Silverlight.Controls.TreeView.ItemStateChangedHandler(TreeView_ItemEndEdit)

2. Initialize the editor’s value in the ItemBeginEdit event handler.

CSharp

void TreeView_ItemBeginEdit(object sender, TreeViewEventArgs args) { if (args.Item.EditTemplate == this.ComboBoxTemplate) { System.Windows.Controls.ComboBox comboBox = this.ComboBoxTemplate.LoadContent() as System.Windows.Controls.ComboBox; int index = 0; foreach (System.Windows.Controls.ComboBoxItem item in comboBox.Items) { if (item.Content.Equals(args.Item.Value)) { System.Windows.Controls.ComboBox editor = this.TreeView.ActiveEditor as System.Windows.Controls.ComboBox; editor.SelectedIndex = index; break;

} index++; } } else if (args.Item.EditTemplate == this.DateTimeTemplate) { DateTimeEditor editor = this.TreeView.ActiveEditor as DateTimeEditor; DateTime value; bool tryParseResult = DateTime.TryParse(args.Item.Value.ToString(), out value); if (!tryParseResult) { value = DateTime.Now.Date; } editor.Value = value; } else if (args.Item.EditTemplate == this.CurrencyEditorTemplate) { CurrencyEditor editor = this.TreeView.ActiveEditor as CurrencyEditor; editor.Value = decimal.Parse(args.Item.Value.ToString()); } else if (args.Item.EditTemplate == this.SpinEditorTemplate) { SpinEditor editor = this.TreeView.ActiveEditor as SpinEditor; editor.Value = decimal.Parse(args.Item.Value.ToString()); } }

VB .NET

Private Sub TreeView_ItemBeginEdit(ByVal sender As Object, ByVal args As TreeViewEventArgs) If args.Item.EditTemplate = Me.ComboBoxTemplate Then Dim comboBox As System.Windows.Controls.ComboBox = TryCast(Me.ComboBoxTemplate.LoadContent(), System.Windows.Controls.ComboBox) Dim index As Integer = 0 For Each item As System.Windows.Controls.ComboBoxItem In comboBox.Items If item.Content.Equals(args.Item.Value) Then Dim editor As System.Windows.Controls.ComboBox = TryCast(Me.TreeView.ActiveEditor, System.Windows.Controls.ComboBox) editor.SelectedIndex = index Exit For End If index += 1 Next item ElseIf args.Item.EditTemplate = Me.DateTimeTemplate Then Dim editor As DateTimeEditor = TryCast(Me.TreeView.ActiveEditor, DateTimeEditor) Dim value As DateTime Dim tryParseResult As Boolean = DateTime.TryParse(args.Item.Value.ToString(), value)

If (Not tryParseResult) Then value = DateTime.Now.Date End If editor.Value = value ElseIf args.Item.EditTemplate = Me.CurrencyEditorTemplate Then Dim editor As CurrencyEditor = TryCast(Me.TreeView.ActiveEditor, CurrencyEditor) editor.Value = Decimal.Parse(args.Item.Value.ToString()) ElseIf args.Item.EditTemplate = Me.SpinEditorTemplate Then Dim editor As SpinEditor = TryCast(Me.TreeView.ActiveEditor, SpinEditor) editor.Value = Decimal.Parse(args.Item.Value.ToString()) End If End Sub

3. At the end of the edit operation, set the DisplayValue property in the ItemEndEdit event

handler.

CSharp void TreeView_ItemEndEdit(object sender, TreeViewEventArgs args) { if (args.Item == null) return; if (args.Item.EditTemplate == this.ComboBoxTemplate) { System.Windows.Controls.ComboBox editor = this.TreeView.ActiveEditor as System.Windows.Controls.ComboBox; System.Windows.Controls.ComboBoxItem item = editor.Items[editor.SelectedIndex] as System.Windows.Controls.ComboBoxItem; args.Item.Value = item.Content; args.Item.DisplayValue = "Product - " + args.Item.Value; } else if (args.Item.EditTemplate == this.DateTimeTemplate) { DateTimeEditor editor = this.TreeView.ActiveEditor as DateTimeEditor; if (editor.Value.HasValue) { args.Item.Value = editor.Value.Value.ToShortDateString(); } else { args.Item.Value = editor.Value; } args.Item.DisplayValue = "Date - " + args.Item.Value; } else if (args.Item.EditTemplate == this.CurrencyEditorTemplate) { CurrencyEditor editor = this.TreeView.ActiveEditor as CurrencyEditor;

args.Item.Value = editor.Value; args.Item.DisplayValue = "UnitPrice - $" + args.Item.Value; decimal quantity = decimal.Parse(args.Item.PrevSiblingItem.Value.ToString()); decimal price = decimal.Parse(args.Item.Value.ToString()); decimal total = quantity * price; TreeViewItem nextItem = args.Item.NextSiblingItem; nextItem.Value = total; nextItem.DisplayValue = "Total - $" + total; } else if (args.Item.EditTemplate == this.SpinEditorTemplate) { SpinEditor editor = this.TreeView.ActiveEditor as SpinEditor; args.Item.Value = editor.Value; args.Item.DisplayValue = "Quantity - " + args.Item.Value; decimal quantity = decimal.Parse(args.Item.Value.ToString()); decimal price = decimal.Parse(args.Item.NextSiblingItem.Value.ToString()); decimal total = quantity * price; TreeViewItem nextItem = args.Item.NextSiblingItem.NextSiblingItem; nextItem.Value = total; nextItem.DisplayValue = "Total - $" + total; } }

VB .NET

Private Sub TreeView_ItemEndEdit(ByVal sender As Object, ByVal args As TreeViewEventArgs) If args.Item Is Nothing Then Return End If If args.Item.EditTemplate = Me.ComboBoxTemplate Then Dim editor As System.Windows.Controls.ComboBox = TryCast(Me.TreeView.ActiveEditor, System.Windows.Controls.ComboBox) Dim item As System.Windows.Controls.ComboBoxItem = TryCast(editor.Items(editor.SelectedIndex), System.Windows.Controls.ComboBoxItem) args.Item.Value = item.Content args.Item.DisplayValue = "Product - " & args.Item.Value ElseIf args.Item.EditTemplate = Me.DateTimeTemplate Then Dim editor As DateTimeEditor = TryCast(Me.TreeView.ActiveEditor, DateTimeEditor) If editor.Value.HasValue Then args.Item.Value = editor.Value.Value.ToShortDateString() Else args.Item.Value = editor.Value End If

args.Item.DisplayValue = "Date - " & args.Item.Value ElseIf args.Item.EditTemplate = Me.CurrencyEditorTemplate Then Dim editor As CurrencyEditor = TryCast(Me.TreeView.ActiveEditor, CurrencyEditor) args.Item.Value = editor.Value args.Item.DisplayValue = "UnitPrice - $" & args.Item.Value Dim quantity As Decimal = Decimal.Parse(args.Item.PrevSiblingItem.Value.ToString()) Dim price As Decimal = Decimal.Parse(args.Item.Value.ToString()) Dim total As Decimal = quantity * price Dim nextItem As TreeViewItem = args.Item.NextSiblingItem nextItem.Value = total nextItem.DisplayValue = "Total - $" & total ElseIf args.Item.EditTemplate = Me.SpinEditorTemplate Then Dim editor As SpinEditor = TryCast(Me.TreeView.ActiveEditor, SpinEditor) args.Item.Value = editor.Value args.Item.DisplayValue = "Quantity - " & args.Item.Value Dim quantity As Decimal = Decimal.Parse(args.Item.Value.ToString()) Dim price As Decimal = Decimal.Parse(args.Item.NextSiblingItem.Value.ToString()) Dim total As Decimal = quantity * price Dim nextItem As TreeViewItem = args.Item.NextSiblingItem.NextSiblingItem nextItem.Value = total nextItem.DisplayValue = "Total - $" & total End If End Sub

CheckBoxes and RadioButtons

The VIBlend TreeView control for Silverlight allows you to display check boxes or radio buttons

next to the TreeViewItems.

If you want to display checkboxes, set the EnableCheckBoxes property to true. Use the

IsChecked property of the TreeViewItem to programmatically change the TreeViewItem’s check

state.

[XAML] <viblend:TreeView EnableCheckBoxes="True" Width="250" Height="270" VerticalAlignment="Center" HorizontalAlignment="Center" Background="White" x:Name="TreeView"> <viblend:TreeViewItem IsExpanded="True" DisplayValue="Home" ImageSource="images/DragDropExample/Home.png"> <viblend:TreeViewItem DisplayValue="Desktop" ImageSource="images/DragDropExample/Desktop.png"></viblend:TreeViewItem>

<viblend:TreeViewItem DisplayValue="Clipboard" ImageSource="images/DragDropExample/Clipboard.png"></viblend:TreeViewItem> <viblend:TreeViewItem DisplayValue="Homework" ImageSource="images/DragDropExample/Homework.png"></viblend:TreeViewItem> <viblend:TreeViewItem DisplayValue="Chat" ImageSource="images/DragDropExample/Chat.png"></viblend:TreeViewItem> </viblend:TreeViewItem> </viblend:TreeView>

VIBlend TreeView control supports tri-state checkboxes. A tri-state TreeView is a tree view

control that displays check boxes next to the TreeViewItems. If you click on a check box, it

checks (or unchecks) the check box and all sub-items. If the items on the same level and the

selected item have differing check states the parent items's check box is in Indeterminate state

as well as its parent's and so on. If you want to enable this feature, set the

EnableTriStateCheckBoxes property to true.

To display radio buttons new to the TreeViewItems, you should use the SetListItemType

method.

CSharp

this.TreeView.SetListItemType(-1, VIBlend.Silverlight.Controls.ListItemType.RadioButton);

VB .NET

Me.TreeView.SetListItemType(-1,

VIBlend.Silverlight.Controls.ListItemType.RadioButton)

You can display Radio Buttons next to TreeViewItems on a specific level. To do that, specify the

items level in the first parameter of the SetListItemType method call.

CSharp

this.TreeView.SetListItemType(1, VIBlend.Silverlight.Controls.ListItemType.RadioButton);

VB .NET

Me.TreeView.SetListItemType(1,

VIBlend.Silverlight.Controls.ListItemType.RadioButton)

Custom TreeViewItem indicators

You can modify the default expand and collapse buttons by using the ExpandImageSource and

CollapseImageSource properties of the TreeViewItem object.

<viblend:TreeViewItem ExpandImageSource="images/plus.png" CollapseImageSource="images/minus.png" DisplayValue="Computer" IsExpanded="True" Value="Computer" ImageSource="images/OverviewExample/Computer.png"> <viblend:TreeViewItem DisplayValue="Local Disk (C:)" Value="LocalDisk(C)" ImageSource="images/OverviewExample/localDisk.png"> </viblend:TreeViewItem> <viblend:TreeViewItem DisplayValue="Disk Drive(D:)" Value="Disk(D)" ImageSource="images/OverviewExample/drive.png"> </viblend:TreeViewItem> <viblend:TreeViewItem DisplayValue="DVD RW Drive (E:)" Value="DVDRW" ImageSource="images/OverviewExample/dvd.png"> </viblend:TreeViewItem> <viblend:TreeViewItem DisplayValue="DVD Drive (F:)" Value="DVDDRIVE" ImageSource="images/OverviewExample/dvd.png">

</viblend:TreeViewItem> </viblend:TreeViewItem>

VIBlend TreeView for Silverlight ship with 7 major themes which include the Office 2010 Blue,

Black and Silver and Office 2007 Blue, Black and Silver.

To set a theme, do the following:

1. Load the theme resources.

[XAML]

2. Set the Style property of the TreeView and TreeViewItem objects.

[XAML]

<viblend:TreeView Background="White" Style="{StaticResource Office2010BlackTreeViewStyle}" Width="250" Height="250" VerticalAlignment="Center" HorizontalAlignment="Center" x:Name="TreeView"> <viblend:TreeViewItem Style="{StaticResource Office2010BlackTreeViewItemStyle}" DisplayValue="Home" /> </viblend:TreeView>

Button

Inheritance Hierarchy:

System.Object

System.Windows.Threading.DispatcherObject

System.Windows.DependencyObject

System.Windows.Media.Visual

System.Windows.UIElement

System.Windows.FrameworkElement

System.Windows.Controls.Control

System.Windows.Controls.ContentControl

System.Windows.Controls.Primitives.ButtonBase

System.Windows.Controls.Primitives.Button

VIBlend.Silverlight.Controls.Button

When you click a Button, it raises a Click event.

In order to add a button, do the following:

1. Specify the namespace

xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.Editors"

2. Add the Button Control <viblend:Button Content="Button1"/>

You can modify the default Content and ControlTemplate to give the control a unique appearance. The VIBlend Button control allows you to easily set text and image. To set the button’s text, use the Text property. If you want to display an image next to the text, use the ImageSource property. The TextImageRelation property allows you to set the position of Button’s Text and Image relative to each other. For example: [XAML] <viblend:Button ImageSource="images/categorize.png" Name="button3" Text="Button1" TextImageRelation="ImageBeforeText" />

You can also easily change the Text color in the Default, Highlight, Pressed and Disabled states. In order to do this, use the ForegroundNormal, ForegroundHighlight, ForegroundPressed and ForegroundDisabled properties of the Button class. CSharp this.selectedButton.ForegroundNormal = new SolidColorBrush(Colors.Green);

VB .NET

Me.selectedButton.ForegroundNormal = New SolidColorBrush(Colors.Green)

Use the HorizontalTextAlignment and VerticalTextAlignment properties to change the

alignment of the Button control’s Text.

Use the HorizontalImageAlignment and VerticalImageAlignment properties to change the

alignment of the Button control’s Image.

If you want to disable the button, set the IsEnabled property to false.

ToggleButton

System.Object

VIBlend.Silverlight.Controls.ToggleButton

The VIBlend ToggleButton control inherits all of the functionality of the Button control.

However, it also supports an additional Checked state.

In order to add a toggle button, do the following:

2. Add the Button Control <viblend:ToggleButton Content="Button1"/>

The IsChecked property specifies the state of the ToggleButton. The IsThreeState property

specifies whether the ToggleButton has two or three states.

Checked event occurs when the button is checked.

Unchecked event occurs when the button is unchecked.

Indeterminate event occurs when the button goes into the Indeterminate state.

RepeatButton

System.Object

VIBlend.Silverlight.Controls.RepeatButton

In order to add a repeat button, do the following:

2. Add the Button Control <viblend:RepeatButton Content="Button1"/>

The VIBlend RepeatButton control inherits all of the functionality of the button control.

As the RepeatButton is a ContentControl, it can contain an object of any type (such as a

string, an image, or a panel). The RepeatButton class represents a control that is similar to

a Button. However, it gives you control over when and how the Click event occurs. The

RepeatButton raises the Click event repeatedly from the time it is pressed until it is

released.

The Delay property determines when the Click event begins.

The interval of the repetitions can be controlled by using the Interval property.

For Example:

CSharp

int interval = (int)this.spinBox1.Value; if (interval > 0) { this.RepeatButton.Interval = interval; }

VB .NET

Dim interval As Integer = CInt(Fix(Me.spinBox1.Value))

If interval > 0 Then

Me.RepeatButton.Interval = interval

End If

CheckBox

System.Object

System.Windows.Controls.Primitives. ToggleButton

System.Windows.Controls.CheckBox

VIBlend.Silverlight.Controls. CheckBox

The VIBlend CheckBox control supports all of the functionality of the standard checkbox

control.

In order to add a CheckBox to your application, you need to do the following:

2. Create the check box

<viblend:CheckBox Content="CheckBox1" Name="CheckBox1"/>

You can change the position of the check mark relative to the CheckBox’s content by using

the CheckAlignment property.

CSharp

this.selectedCheckBox.CheckAlignment = Controls.AnchorStyles.Left;

VB .NET

Me.selectedCheckBox.CheckAlignment = Controls.AnchorStyles.Left

In order to change the checked state, use the IsChecked property. The VIBlend CheckBox control can also work in a group similarly to a RadioButton. Set the IsRadioGroupEnabled property to turn on the feature. If you want to change the check mark’s color, use the CheckMarkBrushPressed, CheckMarkBrushHighlight and CheckMarkBrushDisabled properties. The The CheckMarkBrushPressed property is taken into account when the CheckBox control is checked. When the CheckBox is highlighted, the check mark’s color depends on the value of the CheckMarkBrushHighlight property.

CSharp

this.selectedCheckBox.CheckAlignment = Controls.AnchorStyles.Left;

VB .NET

Me.selectedCheckBox.CheckAlignment = Controls.AnchorStyles.Left

RadioButton

Inheritance Hierarchy

System.Object

System.Windows.Controls.Primitives. ToggleButton

System.Windows.Controls.RadioButton

VIBlend.Silverlight.Controls. RadioButton

Represents a button control that allows you to select a single option from multiple available

options. It is usually used in a group of RadioButtons.

In order to add a RadioButton control to your application, you need to do the following:

2. Create the button

<viblend:RadioButton Content="RadioButton1" Name="RadioButton1"/>

The RadioButton control has two states – Checked and Unchecked. You can use the IsChecked property

to set its state. If the button’s state is changed from Unchecked to Checked, the Checked event is

raised. If the state is changed from Checked to Unchecked, the Unchecked event is raised.

You can change the radio mark position by using the RadioAlignment property.

CSharp

this.selectedRadioButton.RadioAlignment = Controls.AnchorStyles.Left;

VB .NET

Me.selectedRadioButton.RadioAlignment = Controls.AnchorStyles.Left

DropDownButton

System.Object

VIBlend.Silverlight.Controls.PopupBase

VIBlend.Silverlight.Controls.DropDownButton

Represents a button control that shows any type of common language runtime object (such as

a string or a DateTime object) or a UIElement object (such as a Rectangle or a Panel) in a Popup

control.

2. Create a new DropDownButton instance and set a group of three RadioButtons as content.

<viblend:DropDownButton Width="120" Height="25" x:Name="dropDownButton2"> <viblend:DropDownButton.ToggleButtonContent> <TextBlock Text="Select Item..."/> </viblend:DropDownButton.ToggleButtonContent> <StackPanel> <viblend:RadioButton Content="High"/> <viblend:RadioButton Content="Average"/> <viblend:RadioButton Content="Low"/> </StackPanel> </viblend:DropDownButton>

The ButtonClick event occurs when the DropDownButton is clicked. If you want to programmatically show the Popup, use the IsDropDownOpen property. You can also use the Open and Close methods for showing and hiding the Popup. To specify the Popup’s content, use the Content and ContentTemplate properties. The ToggleButtonContent and ToggleButtonContentTemplate properties can be used to add any object to the DropDownButton’s toggle button.

The ArrowBrush property enables you to change the color of the button’s arrow.

SplitButton

System.Object

VIBlend.Silverlight.Controls.PopupBase

VIBlend.Silverlight.Controls.SplitButton

Represents a button container control which has 2 buttons – primary and secondary. The

primary button works as a standard button control. The secondary button shows any type of

common language runtime object (such as a string or a DateTime object) or a UIElement object

(such as a Rectangle or a Panel) in a Popup control when it is clicked.

PrimaryButtonClick is an event that occurs when the primary button is clicked. The

SecondaryButtonClick event occurs when the secondary button is clicked.

2. Create a new SplitButton instance and set a group of three RadioButtons as content.

<viblend:SplitButton Width="120" Height="25" x:Name="splitButton2"> <viblend:SplitButton.PrimaryContent>

<viblend:RadioButton Margin="5" Content="Low"/> </StackPanel> </viblend:SplitButton>

Use the CornerRadius property, to change the button’s rounding corners.

The ArrowBrush property enables you to change the secondary button’s arrow color The SecondaryButtonPosition property enables you to change the secondary button’s position relative to the primary button’s position.

CSharp this.splitButton2.SecondaryButtonPosition = Position.Bottom;

VB .NET Me.splitButton2.SecondaryButtonPosition = Position.Bottom

If you want to open or close the Popup programmatically, use the Open and Close methods, as well as the IsDropDownOpen property. DropDownOpening event occurs when the Popup is opening. You can handle this event and Cancel the opening. DropDownOpened is raised when the Popup control is opened. DropDownClosing occurs when the Popup control is closing. You can also cancel the closing operation by changing the value of the event arguments’s Cancel property from false to true. DropDownClosed event occurs when the Popup is closed.

ListBox

System.Object

System.Windows.Controls.ItemsControl

System.Windows.Controls.Selector

System.Windows.Controls.ListBox

VIBlend.Silverlight.Controls.ListBox

Represents a control that displays a collection of items. 1. Specify the namespace

2. Create a new ListBox instance and add several ListBoxItem instances as content.

<viblend:ListBox x:Name="ListBox" Height="250" Width="300"> <viblend:ListBoxItem Text="Andrew Fuller"/> <viblend:ListBoxItem Text="Nancy Davolio"/> <viblend:ListBoxItem Text="Shelley Burke"/> <viblend:ListBoxItem Text="Regina Murphy"/> <viblend:ListBoxItem Text="Yoshi Nagase"/> </viblend:ListBox>

VIBlend ListBox uses internally the ListPanel control as a default layout panel for its items. The

ListPanel control enables you to display a collection of items in 4 layout modes – Vertical,

VerticalWrap, HorizontalWrap and by Columns.

Use the LayoutMode property to change the items layout.

CSharp

this.ListBox.LayoutMode = LayoutModes.VerticalWrap;

VB .NET

Me.ListBox.LayoutMode = LayoutModes.VerticalWrap

Vertical Layout

HorizontalWrap Layout

VerticalWrap Layout

Columns Layout

ItemMouseDown occurs when the mouse button is pressed over a ListBoxItem. The

ItemMouseUp event occurs when the user releases the mouse button when the mouse cursor

is over a ListBoxItem.

In order to select a specific ListBoxItem item, use the SelectedIndex and SelectedItem

properties.

CheckedListBox

System.Object

System.Windows.Controls.ItemsControl

System.Windows.Controls.Selector

System.Windows.Controls.ListBox

VIBlend.Silverlight.Controls.ListBox

VIBlend.Silverlight.Controls.CheckedListBox

Represents a ListBox control in which a check box is displayed to the left of each item.

This control presents a list of items that the user can navigate by using the keyboard or the scrollbar on the right side of the control. The user can place a check-mark on one or more items. The CheckedListBoxItem object supports three states: true, false and null. You must set the state to null in the code because the UI for a CheckedListBox does not provide a mechanism to do so. If CheckOnClick is true, the CheckedListBoxItem’s state will be changed on every mouse click.

The CheckedListBox class supports the following collections: Items collection – presents the list of CheckedListBoxItems. SelectedItems collection – presents the list of selected CheckedListBoxItems The following code illustrates how you can use the methods of a CheckedListBox to check and uncheck items: CSharp // checks all list items. checkedListBox1.CheckAllItems();

// unchecks all list items. checkedListBox1.UnCheckAllItems();

VB .NET

' checks all list items.

checkedListBox1.CheckAllItems()

' unchecks all list items.

checkedListBox1.UnCheckAllItems()

To check or uncheck an item through the API, use the CheckItem and UnCheckItem methods. The CheckedChanged event occurs when the check state of a CheckedListBoxItem is changed. This is a sample which illustrates how to add a new instance of the CheckedListBox control in

your application and how to add CheckedListBoxItems to it.

<viblend:CheckedListBox x:Name="ListBox" Height="250" Width="300"> <viblend:CheckedListBoxItem IsChecked="True" Text="Paris"/> <viblend:CheckedListBoxItem IsChecked="True" Text="London"/> <viblend:CheckedListBoxItem Text="Moscow"/> <viblend:CheckedListBoxItem Text="Chicago"/> <viblend:CheckedListBoxItem Text="Los Angeles"/> <viblend:CheckedListBoxItem IsChecked="True" Text="Vancouver"/> <viblend:CheckedListBoxItem IsChecked="True" Text="Miami"/> <viblend:CheckedListBoxItem IsChecked="True" Text="Rome"/> <viblend:CheckedListBoxItem Text="Berlin"/> <viblend:CheckedListBoxItem IsChecked="True" Text="Tokyo"/> <viblend:CheckedListBoxItem Text="Barcelona"/>

</viblend:CheckedListBox>

ComboBox

System.Object

VIBlend.Silverlight.Controls.ComboBox

Represents a control that displays a text box or a content control combined with a ListBox which enables

the user to select items from the list or enter a new value.

By default the ComboBox control displays a content control instead of text box. You can add

any content in it. However, if you want to display a text box, set the IsEditable property to true.

1. Specify the namespace.

2. Create a new ComboBox instance.

<viblend:ComboBox MaxDropDownHeight="250" MaxDropDownWidth="450" Name="viblendCombo" Width="200" Height="23"> </viblend:ComboBox>

Use the IsResizable property to enable or disable the Popup’s resizing.

The ArrowBrush property enables you to change the color of the combo box’s arrow.

CSharp

this.viblendCombo.ArrowBrush = new SolidColorBrush(Colors.Red);

VB .NET

Me.viblendCombo.ArrowBrush = New SolidColorBrush(Colors.Red)

Use the IsArrowBeforeContent property to change the ComboBox’s arrow position relative to

the content control( text box )

CSharp

this.viblendCombo.IsArrowBeforeContent = false;

VB .NET

Me.viblendCombo.IsArrowBeforeContent = False

As the VIBlend ComboBox control uses internally the ListBox control, it also supports its layout capabilities. You can use the LayoutMode property to arrange the ComboBoxItems in 4 different layout modes.

CSharp

this.viblendCombo.LayoutMode = LayoutModes.VerticalWrap;

VB .NET

Me.viblendCombo.LayoutMode = LayoutModes.VerticalWrap

The ComboBox control supports searching of items by typing into the text box. Set the IsFilteringEnabled property to enable the search mode.

Use the FilterMode property to specify the searching method. Supported are StartsWith,

StartsWithCaseSensitive, Contains and ContainsCaseSensitive.

The following code snippet illustrates how to create a sample data source and bind the combo

box to it.

1. Create a new list instance and fill it with data.

CSharp

List<string> sampleList; private void GenerateSampleData() { #region SampleData string[] firstNames = new string[] { "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Eric", "Elio", "Beate", "Cheryl", "Ivan", "Maria", "Lucas", "Monica", "John", "George", "Mark", "Mohan", };

string[] lastNames = new string[] { "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Ohno", "Devling", "Wilson", "Winkler", "Bein", "Rossi", "Vileid", "Saylor", "Björn", "Nodier", "Spears", "Kumar", "Wei", "Nelson", "Duncan", "Bianchi", "Murdock", "Lating", "Sweet", }; #endregion sampleList = new List<string>(); Random rand = new Random(); for (int i = 0; i < 30; i++) { string record = firstNames[rand.Next(0, firstNames.Length - 1)] + " " + lastNames[rand.Next(0, lastNames.Length - 1)]; if (!sampleList.Contains(record)) sampleList.Add(record); } }

VB .NET

Private sampleList As List(Of String)

Private Sub GenerateSampleData()

Dim firstNames() As String = { "Andrew", "Nancy", "Shelley", "Regina",

"Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin",

"Sven", "Eric", "Elio", "Beate", "Cheryl", "Ivan", "Maria", "Lucas",

"Monica", "John", "George", "Mark", "Mohan" }

Dim lastNames() As String = { "Fuller", "Davolio", "Burke", "Murphy",

"Nagase", "Ohno", "Devling", "Wilson", "Winkler", "Bein", "Rossi", "Vileid",

"Saylor", "Björn", "Nodier", "Spears", "Kumar", "Wei", "Nelson", "Duncan",

"Bianchi", "Murdock", "Lating", "Sweet" }

sampleList = New List(Of String)()

Dim record As String = firstNames(rand.Next(0, firstNames.Length - 1))

& " " & lastNames(rand.Next(0, lastNames.Length - 1))

If (Not sampleList.Contains(record)) Then

sampleList.Add(record)

End If

Next i

End Sub

2. Bind the ComboBox control to the list.

CSharp

GenerateSampleData(); this.viblendCombo.ItemsSource = sampleList;

VB .NET

GenerateSampleData()

Me.viblendCombo.ItemsSource = sampleList

GroupBox

System.Object

VIBlend.Silverlight.Controls.GroupBox

Represents a container control that logically groups a collection of controls.

Use the Content and ContentTemplate properties to add content to the group box. The content can be

of any type (such as string, image, or panel). The PrimaryHeaderContent and

PrimaryHeaderContentTemplate properties enable you to customize the GroupBox’s Header. You can

also customize its footer by using the SecondaryHeaderContent and

SecondaryHeaderContentTemplate properties.

2. Create a new GroupBox instance, add a Calendar control as content to it and customize its

header and footer.

[XAML]

<viblend:GroupBox Name="groupBox1" HeaderPrimaryHorizontalAlignment="Left" HeaderSecondaryHorizontalAlignment="Left" HorizontalAlignment="Left" VerticalAlignment="Top" DefaultWidth="250" DefaultHeight="250" Height="250" Width="250">

<viblend:GroupBox.PrimaryHeaderContentTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <Image Width="16" Height="16" Source="images/calendar.png"/> <TextBlock VerticalAlignment="Center" Text="Calendar"/> </StackPanel> </DataTemplate> </viblend:GroupBox.PrimaryHeaderContentTemplate> <viblend:GroupBox.SecondaryHeaderContentTemplate> <DataTemplate> <HyperlinkButton Content="Change Date and Time Settings..."/> </DataTemplate> </viblend:GroupBox.SecondaryHeaderContentTemplate> <viblend:GroupBox.ContentTemplate> <DataTemplate> <my:Calendar/> </DataTemplate> </viblend:GroupBox.ContentTemplate> </viblend:GroupBox>

Use the HeaderPositionPrimary and HeaderPositionSecondary properties to specify the

header and footer positions relative to the GroupBox’s content.

You can use these properties to set 16 different layout combinations. Below are shown images

of some of them.

HeaderPositionPrimary = Top, HeaderPositionSecondary = Top

HeaderPositionPrimary = Top, HeaderPositionSecondary = Left

HeaderPositionPrimary = Left, HeaderPositionSecondary = Right

HeaderPositionPrimery = Bottom, HeaderPositionSecondary = Top

Use the ShowCollapseArrow property to show or hide the chevron which allows you to collapse

or expand the GroupBox.

The IsCollapsed property enables you to programmatically expand or collapse the GroupBox

control.

VIBlend GroupBox supports 3 collapse modes

1. Collapse to PrimaryHeader

2. Collapse to SecondaryHeader

3. Collapse to BothHeaders

CSharp

this.groupBox1.CollapseMode = GroupBoxCollapseMode.CollapseToPrimaryHeader;

VB .NET

Me.groupBox1.CollapseMode = GroupBoxCollapseMode.CollapseToPrimaryHeader

PasswordBox

System.Object

System.Windows.Controls.TextBox

VIBlend.Silverlight.Controls.TextBox

VIBlend.Silverlight.Controls.PasswordBox

Represents a control designed for entering and handling passwords.

2. Create a new PasswordBox instance and set its Watermark property.

<viblend:PasswordBox Watermark="Enter Password:" Height="23" Name="textBox1"

Width="170"/>

Use the Watermark property to set the prompt text that is shown when the Text property is

empty or null.

In order to set a different mask character for the password, use the PasswordChar property.

The Password property enables you to retrieve the entered password string.

Use the ShowDeleteButton property to hide or show the button which clears the text. By

default, this property is set to true. The CornerRadius property can be used to modify the

radius of the Password Box’s rounded corners.

TextBox

System.Object

System.Windows.Controls.TextBox

VIBlend.Silverlight.Controls.TextBox

Represents a control designed for entering of text in an application.

VIBlend TextBox for Silverlight inherits all of the functionality of the official Microsoft TextBox

control.

2. Create a new TextBox instance and set its Watermark property.

<viblend:TextBox Watermark="Enter Text…:" Height="23" Name="textBox1" Width="170"/>

Use the Watermark property to set the prompt text that is shown when the Text property is

empty or null.

Use the ShowDeleteButton property to hide or show the button which clears the text. By

default, this property is set to true. The CornerRadius property can be used to modify the

radius of the Password Box’s rounded corners.

That control enables you to change the border color when it is in a Default, Highlighted or

Focused state.

CSharp

this.textBox1.BorderBrushHighlight = new SolidColorBrush(Colors.Blue);

VB .NET

Me.textBox1.BorderBrushHighlight = New SolidColorBrush(Colors.Blue)

Use the IsReadOnly property to enable or disable typing in the control.

The following image illustrates a TextBox control which is read-only.

ProgressBar

System.Object

System.Windows.Controls.Primitives.RangeBase

System.Windows.Controls.ProgressBar

VIBlend.Silverlight.Controls. ProgressBar

Represents a control designed to visually indicate the progress of a lengthy operation.

2. Create a new ProgressBar control and set its content.

<viblend:ProgressBar Value="50" Height="19" Name="progressBar1" Width="150"> <TextBlock x:Name="TextBlock" Text="50%"/> </viblend:ProgressBar>

Use the Content and ContentTemplate properties to show any type of object in the progress

Set the IsIndeterminate property to true, when you want the progress bar to report a generic progress with a repeating pattern.

The ContentVisibility property allows you to hide or show the Progress Bar’s built-in content

presenter.

The Maximum and Minimum properties define the range of the Progress Bar’s available values.

The Value property works in the range defined by the Minimum and Maximum properties and

it represents the progress that the application has made toward completing the operation.

Slider

System.Object

System.Windows.Controls.Primitives.RangeBase

VIBlend.Silverlight.Controls. Slider

Represents a control designed for selecting a value from a range of values.

2. Create a new Slider control.

<viblend:Slider Height="16" Name="slider1" VerticalAlignment="Top" Width="150"/>

The Maximum and Minimum properties define the range of the Slider control’s available

values.

The Value property works in the range defined by the Minimum and Maximum properties and

it represents the current value of the control.

Use the SliderButtonsVisibility property to show or hide the increase and decrease buttons.

CSharp

this.slider2.SliderButtonsVisibility = System.Windows.Visibility.Collapsed;

VB .NET

Me.slider2.SliderButtonsVisibility = System.Windows.Visibility.Collapsed

The Orientation property enables you to specify whether the Slider is horizontal or vertical.

ColorPicker

System.Object

VIBlend.Silverlight.Controls. PopupBase

VIBlend.Silverlight.Controls.ColorPicker

Represents a control designed to pick colors.

2. Create a new ColorPicker control.

<viblend:ColorPicker x:Name="picker2" DisplayMode="ARGB" Width="140" Height="24"/>

You can easily add additional color palettes through the Palettes collection.

The SelectedColor property enables you to get or set the Palette’s selected color. When the

user selects a color, the SelectionChanged event occurs.

The code snippet below, illustrates how to create a new color palette, fill it with colors and

finally add it to the Palettes collection of the color picker.

CSharp

private Palette CreatePanel() { Palette panel = new Palette(); panel.Colors.Clear(); panel.Colors.Add(Colors.Blue); panel.Colors.Add(Colors.Green); panel.Colors.Add(Colors.Red); panel.Colors.Add(Colors.Cyan); panel.Colors.Add(Colors.Yellow); panel.Colors.Add(Colors.White); panel.Colors.Add(Colors.Orange); panel.Colors.Add(Colors.Magenta); panel.Colors.Add(Colors.Purple); panel.Colors.Add(Colors.Brown); panel.HeaderText = "Custom Colors"; return panel; } this.picker1.Palettes.Add(CreatePanel());

VB .NET

Private Function CreatePanel() As Palette

Dim panel As New Palette()

panel.Colors.Clear()

panel.Colors.Add(Colors.Blue)

panel.Colors.Add(Colors.Green)

panel.Colors.Add(Colors.Red)

panel.Colors.Add(Colors.Cyan)

panel.Colors.Add(Colors.Yellow)

panel.Colors.Add(Colors.White)

panel.Colors.Add(Colors.Orange)

panel.Colors.Add(Colors.Magenta)

panel.Colors.Add(Colors.Purple)

panel.Colors.Add(Colors.Brown)

panel.HeaderText = "Custom Colors"

Return panel

End Function

Me.picker1.Palettes.Add(CreatePanel())

VIBlend ColorPicker supports several display modes. You can display the selected color’s string

as RGB, ARGB, HTML, Default and you can event create your own custom style. In order to set

the color display mode, use the DisplayMode property.

<viblend:ColorPicker x:Name="picker2" DisplayMode="Html" Width="140" Height="24"/>

Palette

System.Object

VIBlend.Silverlight.Controls.Palette

Represents a control designed to display and select colors.

2. Create a new Palette control.

<viblend:Palette Name="palette1"/>

You can change the size of the color box by using the ColorBoxSize property. The Colors

property represents a collection of colors and it allows you to add additional colors to the

palette or remove some of the already available colors. If you want, you can change the

palette’s caption, too. Just set the HeaderText property to the string you want to display.

The SelectedColor property enables you to get or set the Palette’s selected color. When the

user selects a color, the SelectionChanged event occurs.

In order to change the horizontal and vertical spacing between the color boxes, use the

ColorHorizontalSpacing and ColorVerticalSpacing properties.

The PaletteColumns property allows you to specify the number of color boxes shown per row.

By default, the property is set to 10.

The image below shows a color palette which uses 8 columns.

ListPanel

System.Object

System.Windows.Controls.Panel

VIBlend.Silverlight.Controls.ListPanel

Represents a container control where you can arrange child elements in HorizontalWrap,

VerticalWrap, Vertical and Columns layout types.

1. Specify the namespace xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.Editors"

2. Create a new ListPanel instance and add 12 buttons to it.

<viblend:ListPanel x:Name="ListPanel" LayoutMode="Columns" MaxWidth="400" MaxHeight="300" WrapWidth="250" ColumnsWidth="90" WrapHeight="150">

<viblend:Button MaxWidth="90" Text="Button1”/> <viblend:Button MaxWidth="90" Text="Button2”/> <viblend:Button MaxWidth="90" Text="Button3"/> <viblend:Button MaxWidth="90" Text="Button4"/> <viblend:Button MaxWidth="90" Text="Button5"/>

<viblend:Button MaxWidth="90" Text="Button6”/> <viblend:Button MaxWidth="90" Text="Button7”/> <viblend:Button MaxWidth="90" Text="Button8”/> <viblend:Button MaxWidth="90" Text="Button9"/> <viblend:Button MaxWidth="90" Text="Button10"/> <viblend:Button MaxWidth="90" Text="Button11"/> <viblend:Button MaxWidth="90" Text="Button12"/>

</viblend:ListPanel>

In order to change the type of layout, use the LayoutMode property. ColumnsCount property allows you to set the number of columns. ColumnsWidth property specifies the width of the columns when the LayoutMode property is set to LayoutModes.Columns. CSharp this.ListPanel.LayoutMode = LayoutModes.Columns;

VB. NET Me.ListPanel.LayoutMode = LayoutModes.Columns

LayoutMode = Vertical

LayoutMode = VerticalWrap

LayoutMode = HorizontalWrap

LayoutMode = Columns, ColumnsCount = 3, ColumnsWidth = 60

DockPanel

System.Object

System.Windows.Controls.Panel

VIBlend.Silverlight.Controls.DockPanel

Represents a container control where you can arrange child elements either horizontally or

vertically, relative to each other.

The position and size of the DockPanel’s children is determined by the Dock property of the

respective child elements and the relative order of those child elements under the DockPanel.

The following XAML creates a DockPanel with 3 buttons as shown in the above image.

1. Specify the namespace xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.Editors"

2. Create the DockPanel

<viblend:DockPanel Width="300" Height="200" LastChildFill="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <viblend:Button x:Name="Item1" BorderThickness="0" Background="LightGreen" Text="Item1" viblend:DockPanel.Dock="Top"/> <viblend:Button x:Name="Item2" BorderThickness="0" Background="Cyan" Text="Item2" viblend:DockPanel.Dock="Left"/> <viblend:Button BorderThickness="0" Background="#22FF00FF" Text="Fill"/> </viblend:DockPanel>

VIBlend DockPanel for Silverlight supports animations. When the Dock property of a child element is changed, the element changes its size and location with a smooth animation. You can enable or disable this animation by using the EnableLayoutAnimation property. The animation is enabled by default.

viblend silverlight controls documentation - componentsource · range of business scenarios. the...

Documents

pro telerik asp.net and silverlight controls : master...

designing silverlight

what's silverlight?

devforce silverlight devforce winclient · devforce...

tdc2010 silverlight

silverlight 1 september 2007 silverlight 2 october 2008...

programmer's update information - componentsource

xamarin.ios controls - componentsource · controls in your...

silverlight ppt.ppt

devexpress spreadsheet control for - componentsource

silverlight databinding

silverlight multimedia

microsoft silverlight

developing asp.net ajax controls with silverlight

componentone maps for silverlight - silverlight, wpf,...

xamarin.android controls - componentsource ·...

tm microsoft silverlight microsoft@ silver light 2 developer...

guide workﬂow engine - componentsource

founded in 2004 interactive application development flash,...

tms silverlight - wpf planner developers guide...