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)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
STYLING AND APPEARANCE.................................................................................................................................... 117
TREEVIEW .......................................................................................................................................................... 118
EDITORS ........................................................................................................................................................... 121
CHECKBOXES AND RADIOBUTTONS ......................................................................................................................... 127
CUSTOM TREEVIEWITEM INDICATORS ...................................................................................................................... 130
STYLING AND APPEARANCE.................................................................................................................................... 131
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
EULA.
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?
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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 [email protected] 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
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:[email protected]
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 [email protected]. 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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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 [email protected]
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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 Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
- 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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
(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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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:[email protected]
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
Menu
Context Menu
Mask Editor
TreeView
OutlookPane
NavigationPane
ColorPicker
GroupBox
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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)
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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 [email protected]
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
4. The DataGrid.dll will appear in your project references
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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 x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="360"/>
</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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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();
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
}
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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"/>
<DataTemplate x:Name="currencyCellDataTemplate">
<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;
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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>
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
Step 2: Prepare the data source and set the DataGrid.ItemsSource property:
CSharp
public partial class DemoPage : UserControl
{
public DemoPage()
{
InitializeComponent();
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; }
}
private void PopulateGridContent()
{
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
Inherits UserControl
Public Sub New()
InitializeComponent()
PopulateGridContent()
End Sub
Public Class Person
Public Sub New(
ByVal FirstName As String,
ByVal LastName As String)
Me.FirstName = FirstName
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
Me.LastName = LastName
End Sub
Private privateFirstName As String
Public Property FirstName() As String
Get
Return privateFirstName
End Get
Set(ByVal value As String)
privateFirstName = value
End Set
End Property
Private privateLastName As String
Public Property LastName() As String
Get
Return privateLastName
End Get
Set(ByVal value As String)
privateLastName = value
End Set
End Property
End Class
Private Sub PopulateGridContent()
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
private void PopulateGridContent()
{
List<Person> list = new List<Person>();
for (int i = 0; i < 10; i++)
list.Add(new Person(
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
"First Name " + i,
"Last Name " + i));
dataGrid.BoundFields.Add(new BoundField(
"First Name",
"FirstName"));
dataGrid.ItemsSource = list;
}
VB.NET
Private Sub PopulateGridContent()
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.BoundFields.Add(New BoundField(
"First Name", "FirstName"))
dataGrid.ItemsSource = list
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
This can be done by adding BoundFields to the GroupingColumns collection and setting
the GroupingEnabled property to true.
CSharp
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;
dataGrid.ItemsSource = list;
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
dataGrid.ItemsSource = list
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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"));
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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))
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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(
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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"))
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))
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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)
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.
<DataTemplate x:Name="LastNameCellTemplate"> <Grid> <TextBlock Text="{Binding [LastName], Mode=OneWay}" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,5,0"/> </Grid> </DataTemplate> <DataTemplate x:Name="FirstNameCellTemplate"> <Grid> <TextBlock Text="{Binding [FirstName], Mode=OneWay}" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,5,0"/> </Grid> </DataTemplate>
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:
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
[XAML]
<UserControl x:Class="DataGridBindingToDynamicObjects.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="400" d:DesignWidth="750" xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.DataGrid"> <UserControl.Resources> <DataTemplate x:Name="LastNameCellTemplate"> <Grid> <TextBlock Text="{Binding [LastName], Mode=OneWay}" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,5,0"/> </Grid> </DataTemplate> <DataTemplate x:Name="FirstNameCellTemplate"> <Grid> <TextBlock Text="{Binding [FirstName], Mode=OneWay}" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,5,0"/> </Grid> </DataTemplate> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <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> </Grid> </UserControl>
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
{ 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
Get
If (Not data.ContainsKey(key)) Then
data(key) = Nothing
End If
Return data(key)
End Get
Set(ByVal value As Object)
data(key) = value
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
RaiseEvent PropertyChanged(Me, New
PropertyChangedEventArgs(""))
End Set
End Property
Public ReadOnly Property Keys() As IEnumerable(Of String)
Get
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;
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
HierarchyItem column1 = dataGrid.ColumnsHierarchy.Items[0];
dataGrid.SortBy(column1, true);
VB.NET
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
Dim column1 As HierarchyItem = dataGrid.ColumnsHierarchy.Items(0)
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
HierarchyItem column1 = dataGrid.ColumnsHierarchy.Items[0];
column1.AllowFiltering = true;
VB.NET
Dim column1 As HierarchyItem = dataGrid.ColumnsHierarchy.Items(0)
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:
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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); }
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
} this.dataGrid1.ColumnsHierarchy.AutoResize(AutoResizeMode.FIT_ALL); this.dataGrid1.RowsHierarchy.AutoResize(AutoResizeMode.FIT_ALL);
VB .NET
For i As Integer = 0 To 19
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()
For i As Integer = 0 To 19
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
text.
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
The following code snippet enables the column selection mode:
CSharp
dataGrid.SelectionMode = VIBlend.
Silverlight.Controls.DataGrid.SELECTION_MODE.FULL_COLUMN_SELECT;
VB .NET
dataGrid.SelectionMode = VIBlend.
Silverlight.Controls.DataGrid.SELECTION_MODE.FULL_COLUMN_SELECT
3. Cell Selection Mode
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
dataGrid.SelectionMode = VIBlend.
Silverlight.Controls.DataGrid.SELECTION_MODE.CELL_SELECT
You can also enable/disable the multiple selection by using the MultipleSelectionEnabled
property.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
use:
CSharp
dataGrid.RowsHierarchy.AllowDragDrop = true;
dataGrid.ColumnsHierarchy.AllowDragDrop = true; VB.NET
dataGrid.RowsHierarchy.AllowDragDrop = True
dataGrid.ColumnsHierarchy.AllowDragDrop = True
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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]
<DataTemplate x:Name="rowDetailsTemplate">
<Grid Margin="0,0,0,0">
<Grid.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFE0FFEA" Offset="0"/>
<GradientStop Color="#55E0FFEA" Offset="0.7"/>
<GradientStop Color="#FFE0FFEA" Offset="1.0"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="120"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding Image}"
Grid.Column="0" Grid.Row="0"/>
<Grid Grid.Row="0" Grid.Column="1" Margin="3,5,1,5" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<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>
</Grid>
<Border BorderBrush="#FFC0C0C0" BorderThickness="1"
Grid.ColumnSpan="2"></Border>
</Grid>
</DataTemplate>
CSharp
public partial class RowDetailsDemo : UserControl
{
public RowDetailsDemo()
{
InitializeComponent();
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;
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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;
dataGrid.ColumnsHierarchy.Items[1].Width = 110;
dataGrid.ColumnsHierarchy.Items[2].Width = 48;
foreach (HierarchyItem row in dataGrid.RowsHierarchy.Items)
{
row.RowDetailsDataTemplate = this.rowDetailsTemplate;
row.RowDetailsHeight = 120;
}
dataGrid.SelectionBorderEnabled = false;
dataGrid.SelectionMode =
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];
}
}
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
VB.NET
Partial Public Class RowDetailsDemo
Inherits UserControl
Public Sub New()
InitializeComponent()
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
dataGrid.ColumnsHierarchy.Items(1).Width = 110
dataGrid.ColumnsHierarchy.Items(2).Width = 48
For Each row As HierarchyItem In
dataGrid.RowsHierarchy.Items
row.RowDetailsDataTemplate =
Me.rowDetailsTemplate
row.RowDetailsHeight = 120
Next row
dataGrid.SelectionBorderEnabled = False
dataGrid.SelectionMode =
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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 for CheckBox in-place editor --> <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 for CheckBox column --> <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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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()
For i As Integer = 0 To 999
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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) {
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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 If
End Sub
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
[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>
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
<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> </UserControl.Resources>
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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">
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
<GradientStop Color="#FFF9FCFD" Offset="0"/> <GradientStop Color="#FFD3DBE9" Offset="1.0"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="HorizontalContentAlignment" Value="Left" /> <Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="ExpandButtonHorizontalAlignment" Value="Left" /> <Setter Property="ExpandButtonVerticalAlignment" Value="Top" /> <Setter Property="BorderBrush" Value="#FF2D3E5C" /> <Setter Property="Padding" Value="0,0,0,0" /> <Setter Property="ContentPadding" Value="3"/> </Style> <Style x:Key="CellStyle" TargetType="c:GridCellElement"> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush EndPoint="0.5,0.971" StartPoint="0.5,0.042"> <GradientStop Color="#FFC0CAD9" Offset="0" /> <GradientStop Color="#FFC0CAD9" Offset="0.36" /> <GradientStop Color="#FFC0CAD9" Offset="0.36" /> <GradientStop Color="#FFC0CAD9" Offset="9.0" /> <GradientStop Color="#FFC0CAD9" 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="#FFFFECB5" Offset="0" /> <GradientStop Color="#FFFFECB5" Offset="0.418"/> <GradientStop Color="#FFFFECB5" Offset="0.632"/> <GradientStop Color="#FFFFECB5" 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> </ResourceDictionary> </UserControl.Resources>
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;
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
VB .NET
Dim hierarchyItemElementStyle As Style =
CType(Me.Resources("ItemStyle"), Style)
pivotGrid1.CellsArea.DefaultCellStyle =
CType(Me.Resources("CellStyle"), Style)
pivotGrid1.RowsHierarchy.HierarchyItemDefaultStyle =
hierarchyItemElementStyle
pivotGrid1.ColumnsHierarchy.HierarchyItemDefaultStyle =
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]
<Style x:Key="AlternatingCellStyle" 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" />
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
<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>
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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"];
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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.RowsHierarchy.HierarchyItemDefaultStyle =
hierarchyItemElementStyle
pivotGrid1.ColumnsHierarchy.HierarchyItemDefaultStyle =
hierarchyItemElementStyle
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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)
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
Namespace: VIBlend.Silverlight.Controls
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.
XAML:
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
<!-- Number Input-->
<viblend:NumberEditor x:Name="NumberEditor" SpinType="None"
Height="25" Width="250" DecimalPlaces="2"/>
<!--End of Number Input-->
<!--Decimal Input-->
<viblend:DecimalEditor x:Name="DecimalEditor" SpinType="None"
Width="250" Height="25" DecimalPlaces="10"/>
<!--End of Decimal Input-->
<!--Currency Input-->
<viblend:CurrencyEditor x:Name="CurrencyEditor" SpinType="None"
Width="250" Height="25" DecimalPlaces="2"/>
<!--End of Currency Input-->
<!--FixedPoint Input-->
<viblend:FixedPointEditor x:Name="FixedPointEditor" SpinType="None"
Width="250" Height="25" DecimalPlaces="2"/>
<!--End of FixedPoint Input-->
<!--Percentage Input-->
<viblend:PercentageEditor Margin="10" x:Name="PercentageEditor"
SpinType="None" Width="250" Height="25"
DecimalPlaces="2"></viblend:PercentageEditor>
<!--End of Percentage Input-->
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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 =
VIBlend.Silverlight.Controls.SpinType.SpinValueBeforeDigit;
this.PercentageEditor.SpinType =
VIBlend.Silverlight.Controls.SpinType.SpinValueBeforeDigit;
this.FixedPointEditor.SpinType =
VIBlend.Silverlight.Controls.SpinType.SpinValueBeforeDigit;
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
this.DecimalEditor.SpinType =
VIBlend.Silverlight.Controls.SpinType.SpinValueBeforeDigit;
VB .NET
Me.NumberEditor.SpinType =
VIBlend.Silverlight.Controls.SpinType.SpinValueBeforeDigit
Me.CurrencyEditor.SpinType =
VIBlend.Silverlight.Controls.SpinType.SpinValueBeforeDigit
Me.PercentageEditor.SpinType =
VIBlend.Silverlight.Controls.SpinType.SpinValueBeforeDigit
Me.FixedPointEditor.SpinType =
VIBlend.Silverlight.Controls.SpinType.SpinValueBeforeDigit
Me.DecimalEditor.SpinType =
VIBlend.Silverlight.Controls.SpinType.SpinValueBeforeDigit
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
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
Namespace: VIBlend.Silverlight.Controls
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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.
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.
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
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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)
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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.
Value
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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.
Home – moves the caret position to the first character.
End – moves the caret position to the last character.
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
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
AutoCompleteEditor is a textbox control with auto-complete and default text features.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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()
{
InitializeComponent();
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",
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
"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
Inherits UserControl
Public Sub New()
InitializeComponent()
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 rand As New Random()
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
For i As Integer = 0 To 99
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.
Styling and Appearance
In order to change the Theme of the editors, you need to load the theming files.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
<ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="/VIBlend.Silverlight.Theme.Office2010Blue;component/InputBase.xaml"/> <ResourceDictionary Source="/VIBlend.Silverlight.Theme.Office2010Blue;component/DateTimeEditor.xaml"/> <ResourceDictionary Source="/VIBlend.Silverlight.Theme.Office2010Blue;component/MaskEditor.xaml"/> <ResourceDictionary Source="/VIBlend.Silverlight.Theme.Office2010Blue;component/SpinEditor.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary>
The code snippet below, demonstrates how to apply the Office2010Blue Theme to the editors.
<StackPanel <TextBlock Text="Percentage Editor:" /> <viblend:PercentageEditor Style="{StaticResource Office2010BlueInputBaseStyle}" TabIndex="0" x:Name="PercentageEditor" SpinType="None" Width="250" Height="25" DecimalPlaces="2"/> <TextBlock Text="Fixed-Point Editor:" /> <viblend:FixedPointEditor Style="{StaticResource Office2010BlueInputBaseStyle}" TabIndex="1" x:Name="FixedPointEditor" SpinType="None" Width="250" Height="25" DecimalPlaces="2"/> <TextBlock Text="Currency Editor:" /> <viblend:CurrencyEditor Style="{StaticResource Office2010BlueInputBaseStyle}" TabIndex="2" x:Name="CurrencyEditor" SpinType="None" Width="250" Height="25" DecimalPlaces="2"/> <TextBlock Text="Decimal Editor:" Grid.Row="1"/> <viblend:DecimalEditor Style="{StaticResource Office2010BlueInputBaseStyle}" TabIndex="3" x:Name="DecimalEditor" SpinType="None" Width="250" Height="25" DecimalPlaces="10"/> <TextBlock VerticalAlignment="Top" Text="Number Editor:" /> <viblend:NumberEditor Style="{StaticResource Office2010BlueInputBaseStyle}" TabIndex="4" x:Name="NumberEditor" SpinType="None" Height="25" Width="250" DecimalPlaces="2"/> <TextBlock Text="DateTime Editor:"></TextBlock> <viblend:DateTimeEditor Style="{StaticResource Office2010BlueDateTimeEditorStyle}" TabIndex="5" Margin="0,0,0,0"></viblend:DateTimeEditor> <TextBlock Text="Spin Editor:"></TextBlock> <viblend:SpinEditor Style="{StaticResource Office2010BlueSpinEditorStyle}" Height="25" TabIndex="6"/> <TextBlock Text="Mask Editor:"></TextBlock> <viblend:MaskEditor Style="{StaticResource Office2010BlueMaskInputBaseStyle}" Mask="9999-9999" TabIndex="7" Height="25"/> </StackPanel>
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
Menu
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Menu.dll)
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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>
<ResourceDictionary Source="/VIBlend.Silverlight.Menu;component/Cielo.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </UserControl.Resources>
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"/>
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
Item text
You can set a text to a MenuItem using the Text property.
XAML
<viblend:MenuItem Text="File"></viblend:MenuItem>
Item image
You can set an image to a MenuItem using the ImageSource property.
XAML
<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.
XAML
<viblend:MenuItem Header="Mail Message"</viblend:MenuItem>
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
and
<viblend:MenuItem>
<viblend:MenuItem.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="27"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<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.
XAML
<Border BorderThickness="1" BorderBrush="#FF111111">
<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>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="27"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<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.
XAML
<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:Toshiba>
</samples:ObjectCollection>
Menu Orientation
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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:
XAML
<viblend:MenuItem IsSeparator="True"></viblend:MenuItem>
Disabled Item
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
You can specify that a menu item is disabled using the MenuItem’s IsEnabled property.
XAML:
<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.
XAML
<viblend:MenuItem DropDownWidth="110" Text="Go">
<viblend:MenuItem Text="Mail">
</viblend:MenuItem>
<!--Mail-->
<viblend:MenuItem Text="Calendar" >
</viblend:MenuItem>
<!--Calendar-->
<viblend:MenuItem Text="Contacts"
</viblend:MenuItem>
<!--Contacts-->
<viblend:MenuItem Text="Tasks"
</viblend:MenuItem>
<!--Tasks-->
<viblend:MenuItem Text="Notes">
</viblend:MenuItem>
<!--Notes-->
</viblend:MenuItem>
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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.
XAML:
<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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
Context Menu
Namespace: VIBlend.Silverlight.Controls
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,
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
ByVal e As MouseButtonEventArgs)
Dim pt As Point = e.GetPosition(Me)
Me.Menu.Open(pt)
End Sub
Styling and Appearance
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
XAML
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="/VIBlend.Silverlight.Theme.OfficeBlack;component/Menu.xaml"/>
<ResourceDictionary
Source="/VIBlend.Silverlight.Theme.OfficeBlack;component/MenuItem.xaml"
/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
3. Set Style property of the Menu and the Menu items
XAML:
<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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
OutlookPane
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.NavigationPanes.dll)
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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.
2. Right click and select Add Reference
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=
VIBlend.Silverlight.NavigationPanes"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot">
<viblend:OutlookPane Width="200" Height="200">
</viblend:OutlookPane>
</Grid>
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
</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>
</viblend:OutlookPane>
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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.
<viblend:OutlookPaneItem
Style="{StaticResource OfficeBlueOutlookPaneItemStyle}"
MenuItemHeader="Mail"
CollapsedDefaultHeaderTemplate =
"{StaticResource ShortMailTemplate}"
CollapsedStatusContentTemplate =
"{StaticResource ShortMailTemplate}"
DisplayHeaderTemplate="{StaticResource BoldMailTemplate}"
DefaultHeaderTemplate="{StaticResource MailTemplate}">
</viblend:OutlookPaneItem>
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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>
<DataTemplate>
<utilityControl:LayoutTransformer>
<utilityControl:LayoutTransformer.LayoutTransform>
<RotateTransform Angle="-90">
</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>
</viblend:OutlookPane>
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:
<viblend:OutlookPaneItem
Style="{StaticResource OfficeBlueOutlookPaneItemStyle}"
MenuItemHeader="Notes"
CollapsedDefaultHeaderTemplate="{StaticResource ShortNotesTemplate}"
CollapsedStatusContentTemplate="{StaticResource ShortNotesTemplate}"
DisplayHeaderTemplate="{StaticResource BoldNotesTemplate}"
DefaultHeaderTemplate="{StaticResource NotesTemplate}">
<StackPanel>
<RadioButton Margin="3" Content="Icons"></RadioButton>
<RadioButton Margin="3" Content="Notes List"></RadioButton>
<RadioButton Margin="3" Content="Last Seven Days"></RadioButton>
<RadioButton Margin="3" Content="By Category"></RadioButton>
<RadioButton Margin="3" Content="Data Files"></RadioButton>
</StackPanel>
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
</viblend:OutlookPaneItem>
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">
</viblend:OutlookPaneItem>
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
Styling and Appearance
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.
<ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="/VIBlend.Silverlight.Theme.Office2010Blue;component/OutlookPane.xaml"/> <ResourceDictionary Source="/VIBlend.Silverlight.Theme.Office2010Blue;component/OutlookPaneItem.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary>
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}"/>
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
NavigationPane
Namespace: VIBlend.Silverlight.Controls
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.
2. Right click and select Add Reference
3. Locate the NavigationPanes.dll assembly inside the VIBlend Silverlight Controls folder
and click Ok.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
4. The NavigationPanes.dll will appear in your project references
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.NavigationPanes" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot">
<viblend:NavigationPane Width="200" Height="300">
<viblend:NavigationPaneItem
DisplayValue="Item1">
</viblend:NavigationPaneItem>
<viblend:NavigationPaneItem
DisplayValue="Item2">
</viblend:NavigationPaneItem>
<viblend:NavigationPaneItem
DisplayValue="Item3">
</viblend:NavigationPaneItem>
</viblend:NavigationPane>
</Grid>
</UserControl>
The result of the XAML markup is shown here:
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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">
<viblend:NavigationPaneItem
DisplayValue="Item1">
</viblend:NavigationPaneItem>
</viblend:NavigationPane>
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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)
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:viblend="clr-
namespace:VIBlend.Silverlight.Controls;assembly=NavigationPanes"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="/VIBlend.Silverlight.Theme.OfficeBlack;
component/NavigationPane.xaml"/>
<ResourceDictionary
Source="/VIBlend.Silverlight.Theme.OfficeBlack;
component/NavigationPaneItem.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<viblend:NavigationPane
Style="{StaticResource OfficeBlackNavigationPaneStyle}"
AreExpandCollapseElementsVisible="False"
x:Name="NavigationPane" Width="200" Height="300">
<viblend:NavigationPaneItem
Style="{StaticResource OfficeBlackNavigationPaneItemStyle}"
IsExpanded="True" DisplayValue="Item1">
<StackPanel>
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
<Button
HorizontalAlignment="Left"
Margin="12,2,2,2"
Content="Button1">
</Button>
<Button
HorizontalAlignment="Left"
Margin="12,2,2,2"
Content="Button2">
</Button>
</StackPanel>
</viblend:NavigationPaneItem>
<viblend:NavigationPaneItem
Style="{StaticResource OfficeBlackNavigationPaneItemStyle}"
IsExpanded="True" DisplayValue="Item2">
<StackPanel>
<Button
HorizontalAlignment="Left"
Margin="12,2,2,2"
Content="Button1">
</Button>
</StackPanel>
</viblend:NavigationPaneItem>
</viblend:NavigationPane>
</Grid>
</UserControl>
The image below shows the result:
Working with NavigationPaneItems
You can create and use a template for the header and content parts.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:viblend="clr-
namespace:VIBlend.Silverlight.Controls;assembly=NavigationPanes"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot">
<viblend:NavigationPane AreExpandCollapseElementsVisible="False"
x:Name="NavigationPane" Width="200" Height="300">
<viblend:NavigationPaneItem>
<viblend:NavigationPaneItem.HeaderTemplate>
<DataTemplate>
<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>
<StackPanel>
<Button
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
HorizontalAlignment="Left" Margin="12,2,2,2"
Content="Button1">
</Button>
<Button HorizontalAlignment="Left" Margin="12,2,2,2"
Content="Button2">
</Button>
<Button HorizontalAlignment="Left" Margin="12,2,2,2"
Content="Button3">
</Button>
<Button HorizontalAlignment="Left" Margin="12,2,2,2"
Content="Button4">
</Button>
<Button HorizontalAlignment="Left" Margin="12,2,2,2"
Content="Button5">
</Button>
</StackPanel>
</viblend:NavigationPaneItem>
<viblend:NavigationPaneItem DisplayValue="Default Template"/>
<viblend:NavigationPaneItem Header="Header"/>
</viblend:NavigationPane>
</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>
<DataTemplate>
<StackPanel>
<Button HorizontalAlignment="Left"
Margin="12,2,2,2" Content="Button1"/>
<Button HorizontalAlignment="Left"
Margin="12,2,2,2"
Content="Button2"/>
<Button HorizontalAlignment="Left"
Margin="12,2,2,2"
Content="Button3"/>
<Button HorizontalAlignment="Left"
Margin="12,2,2,2"
Content="Button4"/>
<Button HorizontalAlignment="Left"
Margin="12,2,2,2"
Content="Button5"/>
</StackPanel>
</DataTemplate>
</viblend:NavigationPaneItem.ContentTemplate>
</viblend:NavigationPaneItem>
You can expand or collapse the NavigationPaneItem by using the IsExpanded property.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
The following XAML markup demonstrates how to expand a NavigationPaneItem:
<viblend:NavigationPane
AreExpandCollapseElementsVisible="False" x:Name="NavigationPane"
Width="200" Height="300">
<viblend:NavigationPaneItem IsExpanded="True" DisplayValue="Item1">
<StackPanel>
<Button HorizontalAlignment="Left" Margin="12,2,2,2"
Content="Button1"/>
<Button HorizontalAlignment="Left" Margin="12,2,2,2"
Content="Button2"/>
<Button HorizontalAlignment="Left" Margin="12,2,2,2"
Content="Button3"/>
<Button HorizontalAlignment="Left" Margin="12,2,2,2"
Content="Button4"/>
<Button HorizontalAlignment="Left" Margin="12,2,2,2"
Content="Button5"/>
</StackPanel>
</viblend:NavigationPaneItem>
</viblend:NavigationPane>
If you want to disable a NavigationPaneItem you can do that using the IsEnabled property:
Styling and Appearance
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.
<ResourceDictionary> <ResourceDictionary.MergedDictionaries>
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
<ResourceDictionary Source="/VIBlend.Silverlight.Theme.Office2010Blue;component/NavigationPane.xaml"/> <ResourceDictionary Source="/VIBlend.Silverlight.Theme.Office2010Blue;component/NavigationPaneItem.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary>
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
Namespace: VIBlend.Silverlight.Controls
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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]
<UserControl x:Class="VIBlend.Silverlight.Examples.TreeView.Templates" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:common="clr-namespace:VIBlend.Silverlight.Utilities;assembly=VIBlend.Silverlight.Utilities" xmlns:src="clr-namespace:IntegratedDemo" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.TreeView" Width="735" Height="500"> <UserControl.Resources> <!-- HierarchicalDataTemplates --> <common:HierarchicalDataTemplate x:Key="NetbooksEntry"> <StackPanel Orientation="Horizontal"> <ContentPresenter Content="{Binding Icon}" /> <StackPanel> <TextBlock VerticalAlignment="Bottom" TextAlignment="Left" FontStyle="Italic" Text="{Binding Vendor}" /> <TextBlock VerticalAlignment="Center" TextAlignment="Left" FontSize="12" FontStyle="Italic" Text="{Binding Model}" /> </StackPanel> </StackPanel> </common:HierarchicalDataTemplate> <common:HierarchicalDataTemplate x:Key="ComputersEntry" ItemsSource="{Binding Path=SpecificDevices}" ItemTemplate="{StaticResource NetbooksEntry}"> <StackPanel Orientation="Horizontal"> <ContentPresenter Margin="0 0 4 0" Content="{Binding Icon}" /> <TextBlock VerticalAlignment="Center" TextAlignment="Center" Text="{Binding Name}" /> </StackPanel> </common:HierarchicalDataTemplate> <common:HierarchicalDataTemplate x:Key="HardwareTemplate" ItemsSource="{Binding Path=Devices}" ItemTemplate="{StaticResource ComputersEntry}"> <StackPanel Orientation="Horizontal">
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
<TextBlock FontWeight="Bold" TextWrapping="Wrap" Width="180" FontSize="12" Text="{Binding Name}" /> </StackPanel> </common:HierarchicalDataTemplate> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="Transparent"> <viblend:TreeView Width="280" Height="300" ItemTemplate="{StaticResource HardwareTemplate}" VerticalAlignment="Center" HorizontalAlignment="Center" Background="White" x:Name="TreeView"> </viblend:TreeView> </Grid> </UserControl>
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
[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 Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
<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;
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
} 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)
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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;
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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 Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
<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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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)
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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 Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
</viblend:TreeViewItem> </viblend:TreeViewItem>
Styling and Appearance
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]
<ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="/VIBlend.Silverlight.Theme.Office2010Black;component/TreeView.xaml"/> <ResourceDictionary Source="/VIBlend.Silverlight.Theme.Office2010Black;component/TreeViewItem.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary>
2. Set the Style property of the TreeView and TreeViewItem objects.
[XAML]
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
<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
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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" />
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
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
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
In order to add a toggle 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: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
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
VIBlend.Silverlight.Controls.RepeatButton
In order to add a repeat 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: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))
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
If interval > 0 Then
Me.RepeatButton.Interval = interval
End If
CheckBox
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
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. 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:
1. Specify the namespace
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.Editors"
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
Namespace: VIBlend.Silverlight.Controls
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
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. 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:
1. Specify the namespace
xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.Editors"
2. Create the button
<viblend:RadioButton Content="RadioButton1" Name="RadioButton1"/>
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
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
VIBlend.Silverlight.Controls.PopupBase
VIBlend.Silverlight.Controls.DropDownButton
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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.
1. Specify the namespace
xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.Editors"
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
SplitButton
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
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
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.
1. Specify the namespace
xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.Editors"
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 Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
<TextBlock Text="Select Item..."></TextBlock> </viblend:SplitButton.PrimaryContent> <StackPanel> <viblend:RadioButton Margin="5" Content="High"/> <viblend:RadioButton Margin="5" Content="Average"/>
<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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
ListBox
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
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.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
xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.Editors"
2. Create a new ListBox instance and add several ListBoxItem instances as content.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
<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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
VerticalWrap Layout
Columns Layout
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
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.ItemsControl
System.Windows.Controls.Selector
System.Windows.Controls.ListBox
VIBlend.Silverlight.Controls.ListBox
VIBlend.Silverlight.Controls.CheckedListBox
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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()
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
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
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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.
xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.Editors"
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 )
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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", };
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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" }
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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 rand As New Random()
For i As Integer = 0 To 29
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
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
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
VIBlend.Silverlight.Controls.GroupBox
Represents a container control that logically groups a collection of controls.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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.
1. Specify the namespace
xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.Editors"
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>
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
HeaderPositionPrimary = Left, HeaderPositionSecondary = Right
HeaderPositionPrimery = Bottom, HeaderPositionSecondary = Top
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
3. Collapse to BothHeaders
CSharp
this.groupBox1.CollapseMode = GroupBoxCollapseMode.CollapseToPrimaryHeader;
VB .NET
Me.groupBox1.CollapseMode = GroupBoxCollapseMode.CollapseToPrimaryHeader
PasswordBox
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
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.TextBox
VIBlend.Silverlight.Controls.TextBox
VIBlend.Silverlight.Controls.PasswordBox
Represents a control designed for entering and handling passwords.
1. Specify the namespace
xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.Editors"
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
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.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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
1. Specify the namespace
xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.Editors"
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
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
Inheritance Hierarchy:
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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.Primitives.RangeBase
System.Windows.Controls.ProgressBar
VIBlend.Silverlight.Controls. ProgressBar
Represents a control designed to visually indicate the progress of a lengthy operation.
1. Specify the namespace
xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.Editors"
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
bar.
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
Slider
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
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.Primitives.RangeBase
VIBlend.Silverlight.Controls. Slider
Represents a control designed for selecting a value from a range of values.
1. Specify the namespace.
xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.Editors"
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
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
VIBlend.Silverlight.Controls. PopupBase
VIBlend.Silverlight.Controls.ColorPicker
Represents a control designed to pick colors.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
1. Specify the namespace.
xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.Editors"
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)
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
Inheritance Hierarchy:
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
System.Object
System.Windows.Threading.DispatcherObject
System.Windows.DependencyObject
System.Windows.Media.Visual
System.Windows.UIElement
System.Windows.FrameworkElement
System.Windows.Controls.Control
VIBlend.Silverlight.Controls.Palette
Represents a control designed to display and select colors.
1. Specify the namespace.
xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.Editors"
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
ListPanel
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
Inheritance Hierarchy:
System.Object
System.Windows.Threading.DispatcherObject
System.Windows.DependencyObject
System.Windows.Media.Visual
System.Windows.UIElement
System.Windows.FrameworkElement
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 Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
<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
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
LayoutMode = Columns, ColumnsCount = 3, ColumnsWidth = 60
DockPanel
Namespace: VIBlend.Silverlight.Controls
Assembly: VIBlend. Silverlight.Controls( in VIBlend. Silverlight.Editors.dll)
Inheritance Hierarchy:
System.Object
System.Windows.Threading.DispatcherObject
System.Windows.DependencyObject
System.Windows.Media.Visual
System.Windows.UIElement
System.Windows.FrameworkElement
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.
VIBlend Silverlight Controls DOCUMENTATION (ver.3.0.0)
Copyright© 2010, VIBlend Technical Support: [email protected]
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.