Silverlight Tip of the Day #100 – ComponentArt Controls
I recently had the opportunity to try out the controls from ComponentArt.com. I was very impressed with their ease of use, professional design and overall quality. Also, their staff are very prompt to responding to questions which made my developer experience a lot easier. Overall, they are very friendly and easy to work with.
ComponentArt currently has a Beta 2 release available here; I highly recommend you check it out!
The Silverlight controls they currently support include:
Let’s take a look at the Toolbar, Menu, Data Grid and Tree View controls.
Toolbar
The following screenshots shows you what the toolbar looks like in each of the available themes. These themes can be applied to all controls. For the toolbar, you can enable/disable items, change orientation from horizontal to vertical, and more. Also, you can have a seperate icon represented for enabled, disabled and hover.
Black Ice
Arctic White
Office 2003
Office 2007
Windows 7.
Example code needed to create a toolbar:
<ComponentArt:ToolBar Width="600" x:Name="MainToolbar" Canvas.Left="250" ItemOrientation="Horizontal" >
<ComponentArt:ToolBarItem Icon="Arrow.png" Click="ToolBarItemSelect_Click" ></ComponentArt:ToolBarItem>
<ComponentArt:ToolBarItem Icon="Draw.png" Click="ToolBarItemDraw_Click" ></ComponentArt:ToolBarItem>
<ComponentArt:ToolBarItem Icon="Dropper.png" Click="ToolBarItemDropper_Click" ></ComponentArt:ToolBarItem>
<ComponentArt:ToolBarItem Icon="Fill.png" Click="ToolBarItemFill_Click" ></ComponentArt:ToolBarItem>
<ComponentArt:ToolBarItem Icon="Erase.png" Click="ToolBarItemErase_Click" ></ComponentArt:ToolBarItem>
<ComponentArt:ToolBarItem Icon="Grid.png" Click="ToolBarItemGrid_Click" ></ComponentArt:ToolBarItem>
</ComponentArt:ToolBar>
Menu
The following screenshot shows an example menu in action.
With menus you can change how they expand and collapse. You can make it so they instantly expand or you can send an interval for the rate of acceleration or deceleration. You can also set whether they expand when hovered or expand when clicked. There are a lot more settings that make the menu extremely customizable to your needs.
Example code needed to create a menu:
<ComponentArt:Menu ExpandDuration="0" ExpandTransition="None" Width="222" ExpandDelay="0" x:Name="MainMenu" MenuClick="MainMenu_MenuClick">
<ComponentArt:MenuItem ItemLabel="File" >
<ComponentArt:MenuItem x:Name="MenuItemNewMap" ItemLabel="New Map..."/>
<ComponentArt:MenuItem x:Name="MenuItemOpenMap" ItemLabel="Open Map..."/>
<ComponentArt:MenuItem x:Name="MenuItemSaveMap" ItemLabel="Save Map..."/>
<ComponentArt:MenuItem ItemLabel="Close"/>
</ComponentArt:MenuItem>
<ComponentArt:MenuItem ItemLabel="Layers">
<ComponentArt:MenuItem x:Name="MenuItemLayer1" IsCheckable="True" IsChecked="True" ItemLabel="Layer 1"/>
<ComponentArt:MenuItem x:Name="MenuItemLayer2" IsCheckable="True" IsChecked="True" ItemLabel="Layer 2"/>
<ComponentArt:MenuItem x:Name="MenuItemGameObjefts" IsCheckable="True" IsChecked="True" ItemLabel="Game Objects"/>
</ComponentArt:MenuItem>
<ComponentArt:MenuItem ItemLabel="Help">
<ComponentArt:MenuItem ItemLabel="Search"/>
<ComponentArt:MenuItem ItemLabel="Contents"/>
<ComponentArt:MenuItem ItemLabel="Index"/>
</ComponentArt:MenuItem>
</ComponentArt:Menu>
Data Grid
The data grid is probably one of the more impressive controls. Columns can be resized and re-ordered. Check out the screen shot here:
You can also group rows by area:
TreeView
The following screen shot shows the tree view in action.
The tree view supports icons, drag/drop, node editing, tree view lines styles (none, solid, dotted), tree view line colors, multiple selection, enabling and disabling nodes and more.
Given a tree view control:
<ComponentArt:TreeView x:Name="TreeViewObjects" Width="220" Height="300"></ComponentArt:TreeView>
The following snippet of code shows you how easy it is to add nodes to the tree:
public void CreateRootNode()
{ TreeViewNode rootNode = new TreeViewNode();
rootNode.Header = "Mailbox";
TreeViewObjects.Items.Add(rootNode);
}
Any data you want to store with a node in the tree can be set in the TreeViewNode.Tag property.
Thank you,
--Mike Snow
Subscribe in a reader