Adam Kinney posts tagged with 'controls'

Two new Silverlight Contests

Adam Kinney — Mon, 30 Jun 2008 21:28:00 GMT

The first contest is the Silverlight Control Builder Contest put on by a few people you might know Page Brooks and Silverlight Cream's David Campbell. Custom controls submitted will be judged on their usefulness, creativity, experience and how easy they are to template.

And the big bonus is that all controls submitted will be made available as open source and free to reuse.

For a jumpstart on creating your own awesome controls, I've posted the code for a simple HelloWorld custom control that demonstrates the basic architecture.

Sans fancy logo, there is also a Silverlight Article Competition going on where the prize is a e-book copy of the new Silverlight 2 in Action book. So basically, if you write one worthy article on Silverlight 2, you will get a return of 12 chapters of Silverlight 2 goodness.

Good luck to all those who enter in either contest!

Building a Simple Custom Control in Silverlight 2

Adam Kinney — Mon, 30 Jun 2008 21:19:00 GMT

With the recent announcement of the Silverlight Controls Builder Contest, I thought it may be useful to post code that creates a very simple custom control.

The example I'm posting isn't even worth a screenshot as all the control does is render the text "Hello property_value_here". Something like:

Hello Gilbert

The value of the sample is that it provides code and architecture to demonstrate the basics of creating a simple control. A few items to note:

The control lives in a separate assembly as the application
The generic.xaml file is used to define the default template of the control
DefaultStyleKey must be set in order for your control to show up without a custom template defined
A DependencyProperty is used to enable animation and binding
You can change the value by entering text in the TextBlock and clicking the button.

For a deeper look at creating custom controls I would recommend Karen Corby's 4 part Parts & States Model with VisualStateManager.

3rd party Silverlight controls

Adam Kinney — Tue, 17 Jun 2008 00:43:00 GMT

This is a list of all the 3rd Party controls that have demos or samples running on the latest version of Silverlight.

ComponentOne	A full suite of components including custom layout panels, menus, treeview, textboxes, charts and more.
DevExpress	A free datagrid with grouping, sorting, resizing, template support, multi-row selection and more.
Infragistics	A large collection of charts and gauges for data visualization.
Intersoft	Two alternative controls to the standard menu, FishEye and CoverFlow.
NETiKA Tech	An implementation of the standard Windows Forms control library, developed as Windows Forms Applications and run as Silverlight applications.
Telerik	A full suite of components including menus, tabcontrols, treeviews, mediaplayer, progressbar and more.
Visifire	A large collection of open source data visualization components.
Xceed	An asynchronous, multiple file upload control with data compression.

I'll keep this page up to date as Silverlight evolves and control offerings grow.

Silverlight 2 has just hit Beta 2 and they are already some really nice offerings available. Take a minute and check out some of the cool demo applications on each site that show off the controls.

Building the Gamercard Part 1, Composing the UI

Adam Kinney — Thu, 17 Apr 2008 23:39:00 GMT

I recently published an Xbox Gamercard based on Silverlight 2 Beta 1. In that post a talked a little bit about the XAP model which now allows you to embed Silverlight applications via the object. In Silverlight 1.0 application instantiation was handled via JavaScript and HTML with loose files. Now with the XAP model we have a single file and object tag support which allows for simpler embedding of an application. Especially by a non-developer web user, which is the main audience for the Gamercard application.

In this three part series I will highlight a few of the new features in Silverlight 2 and how the application was built. In this first part, I'll cover how the interface for the application was composed.

First stop the Grid

Ah, the mighty Grid, master of layout panels. The Grid is the embodiment of what you always wanted from the HTML table. That is, of course, back in the old days when you were still using the table for layout.

The screenshot to the right shows the Grid used for the Gamercard with the ShowGridLines property turned on. GridLines can be very useful as an aid when in design mode, whether you're working in Blend or Visual Studio. The Grid is the main container of all the elements seen on the screen.

Like the HTML table, the Grid is made up of Columns and Rows and elements can span multiple Columns or Rows using ColumnSpan and RowSpan, respectively.

Unlike the HTML table there is no table cell concept. Each Element defines its location using attached properties provided by the Grid class instead.

The TextBlock at the bottom of the grid with the text value of "Shadowrun (G 885/1000)" is defined in XAML as:

<TextBlock Grid.Row="4" Grid.ColumnSpan="2" ... />

This places the TextBlock in the first column (0) which is the default value of Grid.Column and in the fourth Row based on the value set. It also spans both columns to make room for longer text that would not fit in the first column which has a width of 76 pixels.

Columns and Rows are defined and their values are set using the ColumnDefinitions and RowDefinitions. In the case of the Gamercard, the height and width of each column and row is set to a specific value except for the last one which is set using the star (*) syntax.

The star denotes proportional sizing, which means here the last Row and Column take up the remaining space in the Grid not yet claimed by other Columns or Rows.

Proportional sizing can also be used across Columns or Rows. For example, the width of the first column could be set to "*" and the second set to "2*". If the Grid was 150 pixels wide, the first column would end up being 50 pixels wide and the second column would be 100 pixels wide.

For more on Grids check out Jesse Liberty's Controls Tutorial or his Grids and Stack panels video.

Composing Controls

Another great feature of Silverlight is the ability to compose controls. In the Gamercard application, a HyperlinkButton control is used to link to the Gamertag profile page. Rather than simply using text for the link, in this case I wanted to use the the Profile Image which was easily accomplished using the XAML below:

<HyperlinkButton ....>    
    <HyperlinkButton.ToolTip>     
        <ToolTip Content="View Profile" />     
    </HyperlinkButton.ToolTip>     
    <Canvas>     
        <Rectangle Width="64" Height="64" RadiusX="3" RadiusY="3" Fill="#333" />     
        <Image Width="64" Height="64" ...>     
            <Image.Clip>     
                <RectangleGeometry RadiusX="3" RadiusY="3" Rect="1,1,62,62" />     
            </Image.Clip>     
        </Image>     
    </Canvas>     
</HyperlinkButton>

The first child element is the attached property for ToolTip, similar to the Grid.Row property mentioned above. Although not a part of the HyperlinkButton's composition, this shows a simple version of implementing the Content property. The same property is available on the HyperLinkButton control which could be set to a string value, which is how we would define a simple text link.

As mentioned though, we want to customize the Template of the Content property which is done implicitly when child nodes that are not attached properties or added within the Control. Content can only hold a single child, which was why the Canvas element is added first as a simple container. After that a Rectangle and an Image control is added to provide the custom look. And due to the composing functionality, the Hyperlink links to the profile page whether you click the Rectangle or the Image.

The extra attributes on Rectangle and Image provide the round corners as well as clipping the raster image so it appears that it has transparent round corners. I found the clipping method to be very useful when customizing images provided by an external service.

...pausing to think about more mashup possibilities...

For more on Composing Controls check out Jesse Liberty's Controls Tutorial. And if you have not watched it yet please check out Karen Corby's Controls presentation at MIX08. The slides and sample code is available and she does a great job showing off how to compose, style and skin controls.

Other parts in this series are available:

XAP, silverlight+controls, silverlight

Mindscape's WPF Property Grid

Adam Kinney — Fri, 25 Jan 2008 19:41:00 GMT

Mindscape recently announced the release of their WPF Property Grid.

The Mindscape WPF Property Grid is a 100% WPF component for browsing and editing object properties. Use the WPF Property Grid to rapidly add features such as user configuration, preference editing and domain-specific designers to your application without sacrificing the visual flexibility of Windows Presentation Foundation.

When I looked at some of the screenshots, I quickly flashed back to the long days as a consultant creating LOB apps in Windows Forms. (Erik knows what I'm talking about)

This looks like it would have been very useful when creating those Master/Detail editing type of applications. I especially liked the Manuscript Browser screenshot. I think its just because the caption reads "A classic rendering of the WPF Property Grid." while behind the Grid is a rendering of a classic painting.