Miro Miroslavov's blog

RadDiagram Q2.2012 Roadmap

Miro Miroslavov — Tue, 20 Mar 2012 07:25:00 GMT

It was just a month ago when we released the first version of the RadDiagram control/framework and now is time to share with you some plans about the future. We (and our partner and friend - The Orbifold) are very committed to the RadDiagram success and becoming one of the top diagramming frameworks for WPF and Silverlight out there. We will be pushing new features and possibilities as much as possible as well as trying to reach different platforms.

Official for Q2

As you already know it is currently in beta state (even we think it is more than a beta) but with the upcoming Q2.2012 release the RadDiagram will become official control. That is not the only major thing that is coming; we are already working on lots of new cool features and examples. Let me just name a few:

New Features

Shapes
- Hierarchical groups - you'll be able to group shapes together and manipulate them accordingly.
- Custom connectors - specify exact point on the shape where a connection could be pinned.
Connections
- Bezier curves - read more about Bezier here.
- Polyline improvements
- Routing improvements
Diagram export
- Printing
- Export to Image
Diagram Canvas improvements
- Rulers - we'll add vertical and horizontal rulers for easier positioning of the shapes.
- Thumbnail (mini-map) view - this is a very cool feature. The control will visualize the whole diagram "world" and what part of it you're seeing.
- Auto-layout and auto-aligning
- Improved handling of dropped content
Tree layout and variations - this is something huge. You'll be able to easily choose between different types of tree layouts like mindmap, tip-over-tree or radial trees and forests.
New Extension assembly - It will contain the Toolbox control and some other cool stuff to help you create easily diagramming applications. It will be prety much like the current Features assembly that is part of the demos distribution.

New Samples

Mindmap example - we are creating a mindmap example that will demonstrate the power of the RadDiagram framework.

Connection Routing

Connection routing is an algorithm or a set of algorithms that should "trace" the route of link/connection, that takes into account the other nodes/shapes and some other heuristics.

Tree Layouts

Have a look at few screenshots of the RadDiagram showing the new tree layouts.

That is our current plan, but stay tuned for more information on the RadDiagram. Your feedback and ideas are more than welcomed.

A financial dashboard designer based on RadDiagram

Miro Miroslavov — Wed, 07 Mar 2012 12:01:00 GMT

by Francois Vanderseypen and Miroslav Miroslavov

» Full source code of the demo application here

The new RadDiagram framework brings, together with a host of new exciting things in Telerik's 2012 Q1 release, a new world of possibilities to the WPF and Silverlight community. This article attempts to show you that Telerik's RadDiagram is easy-to-use and that it differs from other Telerik controls in that it more closely represents a framework than a control. It’s an invitation to augment and customize the RadDiagram toolset in function of your application and business context. That said, we have to tell you straight away that RadDiagram, as released with Q1, is just the beginning. We have at this point put down the foundations for lots of exciting things to come and you can expect to see this RadDiagram branch off in various directions in coming releases. Great care and much energy were put in making it a flexible, robust, and broad framework for future developments. We have tried to make your (and our) task of customizing things easy while retaining the possibility to make the complex possible.

The dashboard designer described in this article aims to highlight various development tasks related to RadDiagram and how to integrate it into a real-world LOB application. It also tries to underline the fact that the diagramming world is a very broad subject on many levels. In its most basic form a diagram (graph, network) is just a set of shapes and lines connecting these shapes, but diagramming frameworks are also used for a wild spectrum of other tasks:

For so-called HMI (human-machine interface) diagrams where the shapes contain data from sensors and other real-time data providers
In geographic maps to position labels (using appropriate layout algorithms) and to calculate shortest paths or other extremum, graph-based things
To design workflows in which case shapes and connections are tightly bound to an underlying API
To simulate processes and represent data logic (so-called system dynamics) in which case the graph effectively represents a flow of data and logical switches. The typical example being the diagrams used in rendering applications where texture and material properties are modeled through graphs.
For data visualizations and data analysis; social networks and IP networks, for example

[Picture above] Typical dashboard in our sample application representing an overview of stock-related data coming from Yahoo Finance.

Yet another context wherein diagrams come in handy is when you need a flexible surface on which you need to drop elements to design a document or data dashboard. While graphs are intrinsically related to links and connections, nothing prevents you from using a diagram framework without them and thus reduce it to a layout or design engine (a form designer anyone?). Our financial dashboard designer uses the RadDiagram surface in both ways; to design data dashboards (no connections here) and to represent the hierarchical structure of these dashboards (relationship graph).

[Picture above] The very same RadDiagram surface which presents a digital dashboard is re-used to display the relationships contained within different dashboards by inspecting the hyperlinks between the screens.

How does the application gets its relational structure? Put simply, the hyperlinks you add on a dashboard can be internal; you can create a link which jumps to another dashboard page much like hyperlinks in a web site.

[Picture above] Example of an internal link in a dashboard page.

[Picture left]The link editor (which pops up on double-clicking a link) allows you to add an internal link to another dashboard page or to an arbitrary (external) address.

The important bit here is the fact that across the application there is only one RadDiagram instance used in multiple ways and that all the dynamics occur through the (de)serialization. In fact, the generic flow in the application is as follows:

At any moment there is only one active page which corresponds to a diagram. You can remove or add pages as you please, but only one is active at a time, much like a TabControl tab-page in fact.
From the toolbox data elements can be drag-dropped onto the diagram (dashboard) and real-time data is fetched from the Yahoo Finance service (you need to specify a stock symbol, of course).
The elements can be customized, if needed, by double-clicking them.
When a page is saved it's being serialized to the isolated storage space and the hyperlinks are analyzed thus creating a graph (an hypergraph in fact) of relations between pages/dashboards.
Whenever a page is loaded from the storage the corresponding diagram XML is deserialized.

[Picture above] A dashboard page in design mode shows some additional elements in the UI: the toolbox and the toolbar. Through these you can achieve a very diverse set of data pages. In addition, it’s really easy to add your own toolbox items.

This flow demonstrates the following aspects of RadDiagram:

The flexible serialization pipeline you can plug into to include your application-specific data.
The ease with which you can customize the RadDiagram toolbox to incorporate your own bits.
The way you can use the many switches and properties of the diagramming surface to model a particular behavior, enabling/disabling e.g. connections, resizing, rotation, and so on.
The speedy loading and unloading of diagrams, which effectively enables a multi-view paradigm, bypassing the need for a TabControl
The way you can use diagramming shapes as containers for other Telerik controls, for your own data or to act as recipients for real-time data sources

Now that you have an overview of what the demo application does and its various features let’s dig a bit more into the technical details.

A note on the Yahoo Finance API

The dashboard designer uses realtime financial information from the Yahoo Finance API:

You can drag-drop the 'company profile' shape onto the diagram surface and it will fetch the company profile for the stock symbol of your choice.
General financial information, timeline graph and other data can be fetched in the same way. Each type of information is presented in a different shape (format) and demonstrates how you can combine Telerik's controls into the RadDiagram framework
RSS news feeds can be appended

The code to access the Yahoo Finance API is quite straightforward and one can, of course, reuse these controls and the underlying code for other data sources.

[Picture left] Sample output of the Yahoo API which lets you query the stock details of an arbitrary symbol (here show is ‘MSFT’).

Creating custom shapes with RadDiagram

The RadDiagram framework comes with a standard set of flowcharting shapes (geometry shapes) but this shouldn't prevent you from enlarging it with your own set. In fact, diagramming is such a vast domain and its integration within the business context is so tight that any diagramming framework would fail to deliver a complete set of shapes. Rather than trying to offer lots of shapes RadDiagram offers you a flexible and straightforward route to designing custom shapes and embedding (Telerik or third-party) controls.

[Picture left] Sample custom RadDiagram shape hosting a RadChart control,which displays the latest trade price as well as the procentual change.

The generic recipe for creating a custom shape goes as follows:

Inherit from a base class, either RadDiagramShapeBase or RadDiagramShape. The latter one contains a Geometry property, if you need to have some geometry inside your shape.
Design a control or content template in XAML. This is the point where you can go wild in combining the Telerik controls and all the goodness of the XAML framework.
Optional: Add some (dependency) properties reflecting the business context. For example, in the custom shapes provided with the sample you’ll often see the stock Symbol property defined.
Optional: Override a couple of serialization methods, if the custom properties need to be saved/loaded/copied.

Let’s take, as an example, the GaugeShape from the sample, which (see adjacent picture) displays the latest price and price change of a stock. The shape inherits from RadDiagramShape

public sealed GaugeShape :RadDiagramShape

and defines a custom Symbol dependency property

public static readonly DependencyProperty SymbolProperty = DependencyProperty.Register("Symbol", typeof(string), typeof(GaugeShape), new FrameworkPropertyMetadata(null, OnSymbolChanged));

Whether it’s a standard or a dependency property depends really on what you want to do with it, see the MSDN documentation on this.

Next, you need to define the visual appearance of the control. Here is an important point you need to consider; do you need the adorning elements (resizing adorner, connectors, rotation handle) of the RadDiagram framework to appear? If so, the easiest way is to base your XAML style on the base style (using the BasedOn property) from the framework;

<Style TargetType="{x:Type local:GaugeShape}" BasedOn="{StaticResource {x:Type telerik:RadDiagramShape}}">

As a result, all the adorning diagramming elements are already present and your custom shape will take part in the internal mechanics of RadDiagram. If you omit the directive, then the shape will still be part of the diagram, but you will not see or be able to use the resizer, rotation handle, and so on.

From this point on you can define inside the style all you wish, but there are some gotchas:

The ContentTemplate does not immediately give access to the (dependency) properties of the class, but instead exposeses the Content property. So, if you want to access the DataContext inside the Content template you have to either assign this data context to the Content, or you need to walk up the visual tree a bit (see below).
The EditTemplate can be (and usually is) a totally different template than the ContentTemplate; it allows you to define how the control looks when the user double-clicks the shape and shifts to ‘edit’ mode. A good pattern here would be to set some data in the DataContext, assign the DataContext to the Content, and to access this data bucket both from the ContentTemplate and the EditTemplate. In situations where the EditTemplate is not sufficient you can hook up the routed DoubleClick event and redirect the default editing behavior (showing the EditTemplate) to some custom behavior. For example, in the sample you will notice that the TextShape shows a custom window on double-clicking. One essential elements here is that you need to halt the event bubbling by setting ‘Handled = true’ otherwise you will have both a custom handler active and the EditTemplate visible.

In the content template of the GaugeShape you will see the following bits:

<TextBlock Text="{Binding Path=Name}" Foreground="{StaticResource MetroAccentBrush}" FontWeight="Bold" HorizontalAlignment="Center" /> <telerik:RadRadialGauge OuterBorderBrush="#FF08FF00" Grid.Row="1" Background="WhiteSmoke">

The TextBlock accesses the Name property because the Content contains the Quote information:

var quote = new Quote(Symbol);

YahooEngine.Fetch(new List<Quote> { quote }); this.Content = quote;

On the other hand, if you want your shape to be stretched and resized according to the outer resizing adorners, you should set the following properties:

<Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="VerticalContentAlignment" Value="Stretch" />

Finally, in order to have the Symbol property persistent, you need to tell the framework how to serialize it. While this might sound complicated we really made it simple for you to perform this step. The serialization of a property (say, the Symbol property) amounts to adding an entry in a dictionary:

public override SerializationInfo Serialize() {

var info = base.Serialize();

info[“Symbol”] = this.Symbol ?? ""; return info; }

Conversely, if you want to pick up the saved value of the Symbol property you just ask the dictionary for the value:

public override void Deserialize(SerializationInfo info) { base.Deserialize(info); if (info[“Symbol”] != null) this.Symbol = info[SymbolTag].ToString(); }

There is more under the hood than this straightforward serialization alone, please consult the RadDiagram documentation for more serialization goodies.

Once all this is in place you can add the custom shape to the diagram and bind it to the application data like so:

var shape = new GaugeShape

{

Position = new Point(10, 120)

};

Diagram.AddShape(shape);

Many more possibilities and extension points are at your disposal, several of which are demonstrated in the custom shapes inside the sample application. This elementary overview, however,should get you going and we have made the documentation as complete as possible to guide you through the ins and outs of the RadDiagram framework.

The toolbox: how to add your custom items

The RadDiagram framework does not provide a Toolbox control out-of-the-box. It is too specific a part of the story and could just be used for some diagramming applications. That said, it is not part of the core framework, but we wrote several lines of code that can be used and easily customized for your needs. There is an Assembly that we called Features (Telerik.Windows.Diagrams.Features.dll), which is an extension of the core RadDiagram framework, and contains some nice features. For example, there is a ToolBox control there. It is a very simple Hierarchical ItemsControl that you can populate with a hierarchical data source or manually with ToolBoxGroups and items. On the other hand, the items are not much more than ContentControl, so you can effectively add any UI Elements you would like to the toolbox(i.e. you can even add regular shapes from the RadDiagram framework)

<expandertoolbox:DiagramToolbox> <expandertoolbox:ToolboxGroup Header="Shapes"> <expandertoolbox:ToolboxItem Header="Rectangle" Description="A simple rectangle"> <local:ShapeToolboxItem Geometry="{telerik:CommonShape ShapeType=RoundedRectangleShape}"/> </expandertoolbox:ToolboxItem> <expandertoolbox:ToolboxItem Header="Ellipse" Description="A simple rectangle"> <local:ShapeToolboxItem Geometry="{telerik:CommonShape ShapeType=EllipseShape}"/> </expandertoolbox:ToolboxItem> </expandertoolbox:ToolboxGroup> </expandertoolbox:DiagramToolbox>

But the interesting part here is how to handle the drop from the Toolbox to the diagram surface. To make our lives easier, we’re using the Telerik DragDropManager, which automatically handles the start-drag operation of the toolbox item. Thus we need to handle the drop operation at the other side, on the diagram surface.

this.diagram.Drop += this.OnDropToolboxItem;

Let’s take a look at the handler as well.

var item = (e.Data as DataObject).GetData("Telerik.Windows.Diagrams.Features.ExpanderToolbox.ToolboxItem") as ToolboxItem; if (item != null) {

IToolboxItem toolboxItem = item.Content as IToolboxItem;

RadDiagramShape shape = null;

var position = e.GetPosition(this.diagram); if(toolboxItem != null) {

shape = toolboxItem.CreateShape(position); } if (shape != null) { this.diagram.AddShape(shape);

e.Handled = true; } }

The trickier part is that each type of ToolboxItem implements the CreateShape factory method (from the IToolboxItem interface), which creates a new, configured shape for this type of toolbox item.

public override RadDiagramShape CreateShape(Point position) {

var shape = new ImageShape { Location = this.ImageLocation, Address = this.Address, Position = position, NavigateUri = this.NavigateUri }; return shape; }

The RadDiagram surface properties

There is one more interesting story in this application: How to switch between Edit and Design surface modes. The RadDiagram framework provides you with plenty of properties that can control the read-only state in different aspects. Mentioning these properties here affects the run-time through UI behavior and does not enforce changes through the APIs.

They are:

IsEditable - Indicates whether editing is enabled.
IsPanningEnabled – Indicates whether panning is enabled.
IsZoomEnabled - Indicates whether zooming is enabled.
IsResizingEnabled - Indicates whether shape resizing is enabled.
IsRotationEnabled - Indicates whether shape rotation is enabled.
IsDraggingEnabled - Indicates whether shape dragging is enabled.
IsConnectorsManipulationEnabled - Indicates whether connection creating is enabled through the connectors.
AllowDelete – Indicates whether item deletion is enabled.
AllowDrop – Indicates whether the diagram can accept drop.
AllowCopy – Indicates whether item copying is enabled.
AllowPaste – Indicates whether item pasting is enabled.
SelectionMode – Can choose the selection mode through enumeration:
- None – selection is disabled.
- Single – only one can be selection either with Rectangle selection tool or pressing CTRL key.
- Multiple – selecting items on each click and with Rectangle selection tool.
- Extended – selecting items with CTRL or using Rectangle selection tool.

To conclude

[Picture above] Please visit the documentation on RadDiagram for much more info on other aspects not touched by this overview article.

While this demo application shows off some of the more juicy features of RadDiagram it is by no means the end of the story. You are invited to continue reading on:

RadDiagram for Silverlight and the many additional possibilities Silverlight offers to display rich diagrams in the browser
The MVVM mechanism for RadDiagram
The inter-operability of the clipboard between RadDiagram for Silverlight and WPF
The shared WPF and Silverlight document format, which allows you to exchange diagrams between the two technologies.

RadDiagram Architecture

Miro Miroslavov — Tue, 21 Feb 2012 12:00:00 GMT

Telerik Q1.2012 XAML Controls are here!

And one of the most interesting new pieces there is the Diagramming control/framework. It is a product of joint venture between Telerik and our awesome partner - Orbifold.

RadDiagram brings lots of new and exiting possibilities to both WPF and Silverlight worlds. In this post I'll show off what RadDiagram is and how you can best use it for number of different applications. Let's first take a look and play with it.

Control or a Framework?

The Control.

RadDiagram is very extensible and flexible Control (part of the Telerik.Windows.Controls.Diagrams assembly). It mimics the intrinsic ItemsControl and has two major types of children:

RadDiagramShape - an object that describes the nodes of the diagram. You can configure its form using the Geometry property as it allows you to define a custom geometry. But note that it is also a ContentControl, meaning that you can add any content to it - TreeView, GridView or any other XAML control you are accustomed to.
RadDiagramConnection - an object that connects zero, one or two shapes. It provides lots of properties to further customize it and extend it.

RadDiagram also brings you all the XAML goodies you are used to plus much more features you'd love. Let me just name a few:

Binding to list of objects and MVVM support
Easy declarative composition model - create beautiful diagrams with just few lines of XAML
UI Virtualization
Built-in Shape and Connection's Manipulations and Editing
Plenty of RoutedCommands to ease you hook to ready functionality. Also built in keyboard support
Plenty of RoutedEvents that you can hook to and handle
Serialization - one of my favourite features - you can copy/paste diagram items between Silverlight and WPF applications. You can also save and load entire diagram
Clipboard operations - Copy, Cut, Paste and Delete
Built in Undo-Redo framework that works for all and every operation, but also gives you extensible API to hook up and add your functionality to the stack
Pan and Zoom
Align and Snap to grid shapes
Different types of selection modes
Read-only diagram - there are plenty of properties you can modify to suits your needs

The Framework.

But behind all that XAML goodies, there is a rich Diagramming Framework (Telerik.Windows.Diagrams.Core) that deals with the core objects and functionality - I call that Graph Object Model (GOM). This framework is platform independent and can be easily reused across other .Net technologies. The tricky part here is that the core framework and services depends only on bunch of interfaces and not on the real classes. This gives us a good chance to reuse the core in multiple platforms.

Graph - The structure that contains the nodes and the connections of the Diagram
Node (shape, vertex) - Object in a graph
Link (connection, edge) - Object that is part of the graph and connects zero, one or two nodes
Connector - Defines a point of a Shape that you can connect a connection to it. Usually a node has four built-in connectors
Graph analysis - A set of functionality that helps you find Spanning trees, find shortest graph paths and many other interesting stuff and algorithms.
Layout and Routing algorithms - A set of algorithms that describes how the nodes and connections should be layout

The Applications.

There are hundreds of different diagrams and thousands of different types of diagramming applications. There are tons of features that can be added to a diagram control, but they are not the same for each and every type of diagram. That is why we tried to add only the most common and reusable features to the RadDiagram and leave a lot of places for extensibility. RadDiagram is just your starting point, but then you'll have to add some custom (business) logic and rules, custom layout algorithms and custom types of shapes and connections. For example our four major samples in the public demos site have also some custom, in place logic that is different.

The Class Diagram.

You can take a look at the beautiful Class Diagram example that shows the entire RadDiagram class structure.

This is just the beginning of a series of posts regarding RadDiagram, so you'd better stay tuned. Your feedback and comments are more than welcome.

Volume Mixer with the new shiny RadSlider for Silverlight and WPF

Miro Miroslavov — Fri, 15 Apr 2011 12:34:00 GMT

As you may already know, we are working hard to improve the RadSlider in a broad way. We've fixed a lot of issues, but also added a lot of new cool features. Now it's so easy to customize and bind (in MVVM-ish way), that I've created this Windows 7 "Mixer" like example in less than an hour. I didn't change the Slider's ControlTemplate and don't have a single line of code behind.

(Please note that the new slider will be available with the beta of Q2.2011).

Download and play with the new bits.

Just play with the Sliders - note that the most left one is the Master that can "control in a way" the others.

Styling

Silverlight controls are all about styling. They MUST be easy to style and easy to customize. That's why we've changed the old slider's style with new one, that is much easier to customize (due to the less code used). But also we've added a bunch of new Style type properties that will allow you to customize it without the need of changing the ControlTemplate.

ThumbStyle - this will allow you to change the look of the little Thumb that you drag.
TrackStyle - this will allow you to change the thick line behind the Thumb.
TickBarStyle - the Style used for the bar standing behind the ticks.
HandleStyle - you may change the look of the Repeat Buttons at the both ends of the Slider (in case you use them).
TickTemplate - of course you can change the ticks template.
And much more

MVVM

MVVM is other Most important thing when we're talking about Silverlight. Each and every property must be "bindable". Here is how I've bound the Slider to the ViewModel properties.

The View

I have one Master slider on the left and ItemsControl populated with Sliders on the right. They both are bound to ViewModel properties.

<telerik:GroupBox Header="Devices" Style="{StaticResource BorderStyle}">

<ContentControl ContentTemplate="{StaticResource SliderTemplate}" Content="{Binding MasterSlider}" />

</telerik:GroupBox>

<telerik:GroupBox Header="Applications" Style="{StaticResource BorderStyle}" Grid.Column="1">

<ItemsControl ItemsSource="{Binding Sliders}" ItemTemplate="{StaticResource SliderTemplate}">

<ItemsControl.ItemsPanel>

<ItemsPanelTemplate>

<StackPanel Orientation="Horizontal" />

</ItemsPanelTemplate>

</ItemsControl.ItemsPanel>

</ItemsControl>

</telerik:GroupBox>

Placing the visuals.

<Style TargetType="telerik:RadSlider" x:Key="sliderStyle">

<Setter Property="HorizontalAlignment" Value="Center" />

<Setter Property="VerticalAlignment" Value="Bottom" />

<Setter Property="TickFrequency" Value="50" />

<Setter Property="Minimum" Value="0" />

<Setter Property="Maximum" Value="100" />

<Setter Property="EnableSideTicks" Value="True" />

<Setter Property="TickPlacement" Value="BottomRight" />

<Setter Property="Orientation" Value="Vertical" />

<Setter Property="TickBarStyle" Value="{StaticResource TickBarStyle}" />

<Setter Property="TrackStyle" Value="{StaticResource TrackStyle}" />

<Setter Property="ThumbStyle" Value="{StaticResource ThumbStyle}" />

<Setter Property="TickTemplate">

<Setter.Value>

<DataTemplate>

<Rectangle Width="1" Height="20" Fill="Gray" />

</DataTemplate>

</Setter.Value>

</Setter>

</Style>

Styling the Slider...

<DataTemplate x:Key="SliderTemplate">

<Border Margin="10 0" Padding="20 0">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<TextBlock Text="{Binding Title}" Margin="0 10"/>

<telerik:RadSlider Grid.Row="1" Style="{StaticResource sliderStyle}"

Value="{Binding Value, Mode=TwoWay}" />

</Grid>

</Border>

</DataTemplate>

And the slider template...

The ViewModel

In this nice demo I'm using two ViewModels that are doing the actual calculations and control the Sliders. The first one is only representing a single Slider with it's Value and Title property. The second ViewModel is doing the actual calculations, when a Value of some slider has changed.

void slider_ValueChanged(object sender, ValueChangedEventArgs e)

{

this.minorChanging = true;

this.masterSlider.Value = Math.Max(this.masterSlider.Value, ((SliderViewModel)sender).Value);

this.minorChanging = false;

}

void masterSlider_ValueChanged(object sender, ValueChangedEventArgs e)

{

var delta = e.New - e.Old;

this.masterSlider.Value = e.New;

if (!minorChanging)

{

foreach (var slider in sliders)

{

slider.Value += delta;

}

Share your feedback

Please let me know what do you think about the new version of the RadSlider. Also note that this is preview version and may have some issues in it.

Download and play with the new bits.

Virtualized TileView for Silverlight and WPF, different sizes, automatic scrolling and much more.

Miro Miroslavov — Thu, 10 Feb 2011 10:22:03 GMT

With the Q1 2011 release just being around the corner a new and amazing version of RadTileView will be available. It is sleek, fast and more responsive than ever and it brings a whole set of new features and functionality to the table.

Download and play with the new bits.

Virtualization

The main feature, that I’m sure you’d like most is the UI Virtualization (delaying the creation of UI Elements). We implemented it in both tiling scenarios:

Restored – this includes both directions - Horizontal and Vertical. It means that if you have 10 columns x 1000 rows you'll get 10 000 tiles and you’ll see both scrollbars. However, the realized tiles will be just these which are visible and while scrolling new tiles will be realized and showed on the fly.
Maximized | Minimized – when you maximize a tile, the rest become Minimized. At this point the necessary scrollbar will be shown and only the visible minimized tiles will be created (realized). At the end you’ll have just few tiles created even though the TileView has thousands of items. This feature is available for every minimized items dock position - Left, Right, Bottom and Top.

This new feature will enable tons of new scenarios where great UX and incredible performance and mandatory.

Different Sizes

The new TileView comes with a bunch of new ways to set various sizes to the tiles. You can quickly start with the following RadTileView properties:

RowHeight – defines the height of the restored tiles. Note that it's of type GridLength:
- Absolute sizing – sets exact height to the restored tiles.
- Star sizing (*) – the available height will be distributed equally among the restored tiles (just like a Grid panel).
- Auto sizing – each restored tile will take as much as it needs. This will allow scenarios where the tiles may have different height.
ColumnWidth - defines the width of the restored tiles. Note that it's of type GridLength:
- Absolute sizing – sets exact width to the restored tiles.
- Star sizing (*) – the available width will be distributed equally among the restored tiles (just like a Grid panel).
- Auto sizing – each restored tile will take as much as it needs. This will allow scenarios where the tiles may have different width.
RowsCount – specifies how many rows you need.
ColumnsCount – specifies how many columns you need.
MinimizedRowHeight – defines the height of the minimized tiles. It is of type GridLength.
- Absolute sizing – sets exact height to the minimized tiles.
- Auto sizing – each minimized tile will take as much as it needs. This will allow scenarios where the minimized tiles may have different height.
MinimizedColumnWidth – define the width of the minimized tiles. (GridLength)
- Absolute sizing – sets exact width to the minimized tiles.
- Auto sizing – each minimized tile will take as much as it needs. This will allow scenarios where the minimized tiles may have different width.

Please note that each RadTileViewItem also allows you to specify sizes on per tile base.

RestoredHeight(Width) – specify the size of the tile in restored state.
MinimizedHeight(Width) – specify the size of the tile in minimized state.

Combining all these properties allows you to use TileView in a lot of new scenarios and types of applications.

Automatic Scrolling

Lets imagine we have a TileView with 100 000 restored tiles (10 x 10 000) and both scrollbars are visible. In this scenario we need a way to automatically scroll the tile while Dragging – the way we do it in Windows Explorer when dragging a file just near the end of the viewable area. You can enable the same functionality using a single property of RadTileView - IsAutoScrollingEnabled. So to recap – drag an item near the end of the viewable area and stay there for a moment – the automatic scrolling will start immediately. Also note that this will work in both directions - horizontal and vertical.

What’s next

These are just a few of the new features that will be available with the Q1 Beta and later with the official release. Please stay tuned for upcoming posts, demos and examples showing the rest of the features.

What do you think about the new RadTileView? Please share your feedback.

But first Download and play with the new bits.

Welcome to the new Telerik Minifier

Miro Miroslavov — Mon, 22 Nov 2010 15:10:00 GMT

What's new in Telerik Minifier

It is a huge pleasure to announce the release of Telerik’s new Minifier tool now featuring Xap file minification option. It has been a while since we have released the Assembly Minifier and now we bring the concept for minification and reducing the XAP file size to a new level. We have just released the new Telerik Minifier tool that now features Xap Minification to enable you prune and remove everything that your application does not need from the Telerik assemblies in the Xap. As a result, the size of your application's Xap file will be dramatically reduced. Behind the scenes it uses the Assembly Minifier, to discover what should be removed and what not.

Optimize your Xap file in just two steps

Go to http://minifier.telerik.com/#/Xap and Upload your Silverlight Application’s Xap file that uses Telerik assemblies
Let the minifier discover what's redundant.
Download the minified Xap file that will behave in the exact same way.

Features

Minification Information – you can check the result of the minification process and see the actual size of the new Xap file compared to the size of the original one.
Details Information – you can observe the actual Telerik controls that have been removed by clicking the “View Details” link. These are the controls that your application does not use, so they have been excluded from the original assemblies.

Restrictions

Currently the Xap minification is not working well or may introduce some problems if used with more complex scenarios - Application that uses Prism, Assembly Library Caching or some reflection based Load on Demand. We will be working on implementing these features for the future releases.

Windows Phone 7 support

The new Minifier fully supports our newest and innovative RadControls for Windows Phone 7 suite, which means that you can use the Telerik assemblies for WP7 and extract only the controls (classes) that you will need for your development. Or, the other way around, you can simply optimize the compiled Xap file of your Windows Phone application. We know that when it comes to mobile application, the download time, the generated internet traffic and the overall performance of the application really matter. Therefore, we extended our minification tool to also support RadControls for Windows Phone 7. Please read my blog post on how to use the Assembly Minifier for more information.

New Design and Theme

The new Minifier comes also with great new Design. You can enjoy our new Expression Dark theme as well as some new navigation features. Both the Assembly Minifier and the Xap Minifier are available at http://minifier.telerik.com.

Home Page

Conclusion

I am looking forward to see your comments and feedback on the new Telerik Minifier tool, the Xap minification and the support for our controls for Windows Phone 7. We highly value your feedback as we know that this is always the best way to keep our products getting better.

The World of Model–View–ViewModel - through my eyes.

Miro Miroslavov — Fri, 12 Nov 2010 06:48:00 GMT

The Big UI Problem

Since the User Interface came on the scene of software development, it is constantly one of the biggest problems. It is really hard to design the architecture of the User Interfaces, User Interactions and deal with all the logic around, all the different states and behaviors. It is not an easy task also to separate the UI logic from the other layers of the architecture. On the other hand, even if you develop the whole application, you should start to think about how to automatically test the UI (unit tests, components tests, integration tests…), how to maintain it in a way that will reduce the regression, will easily let you add new functionality and the very important one – the new team members should be able easily get the idea or say it – readability.

The No-No Approach

Get some data from the Database
Create some visual controls to show this Data
Add some visual logic
Add some domain specific (business) logic
Add some database logic
Tighten up everything with some more event handlers
Put all this in the ‘code-behind’
Now you just messed up the things.
And enjoy this portion of Spaghetti

The “Benefits” of this approach

Can Not test it.
Can Not maintain it.
Can Not read it. (even if you write it)
It is Not the faster approach.
And much more…

I don’t think this “approach” needs more to say about, so will leave it like this.

UI Design Patterns - MVVM Predecessors

Let me start with the father, but still the so good and famous -

Model – View – Controller. It introduces 3 separate layers of abstraction. Where the Model stands for the business (domain) object model that in most cases is similar to the Database model. The View is the layer that will be shown to the end user. It is often passive, so leave the actual screen (visual) logic to be done by the Controller – the mediator between the View and Model. This is the most famous UI Pattern across the web – used extensively in ASP.NET MVC, Ruby On Rails and much more.

Model – View – Presenter – Derivative of MVC, with some changes. The Controller is replaced with a Presenter abstraction, which stands for a guy that will hold an instance of a View and a Model and will do the visual logic by calling methods of the View. Most of the time the View is abstracted with an Interface, so leave the implementation of the Presenter fully separate and as a result the View can be easily replaced with new one.

Presentation Model - by the father of the Enterprise design patterns Martin Fawler. Here the Presentaion model is holding the state of the UI and the data. The difference with the MVP is that the View is active, it gets the state out of the Presentation Model and is synchronizing it on every change. The Presentation model doesn’t know anything about the View.

Some years later this idea was modified slightly and fitted into the world of WPF with the name of:

Model – View – ViewModel

It was 2005, when this beautiful name was firstly mentioned by Josh Gossman in his blog post “Introduction to Model/View/ViewModel pattern for building WPF apps”. He described entirely the nature of the new UI pattern for building better WPF application. But four years later Josh Smith’s article (WPF Apps With The Model-View-ViewModel Design Pattern) in the msdn magazine really popularize the pattern and gave much more information about some of the not very well documented tricks. And that was the moment when MVVM became really popular and perfectly suited for building all types of WPF and Silverlight applications. Both WPF and Silverlight were evolving with MVVM in their blood, that’s why it so natural and well suited in their both worlds.

The Model

As every other UI pattern – it is mostly about ‘Showing and Reading Data’. The Model is the part that is concerned about the actual raw Data. It is those plain old CLR objects (POCOs) that represents each domain specific object and nothing more. Please note that these classes don’t have any business logic in them. This logic is separated in Services or Utilities alike objects. Example for Model classes are the well known Customers, Orders and so on.

The View

This is the part that usually gets really messed and we should pay special attention to it. In the world of MVVM:

It defines how the Data will be presented to the end user. The view usually uses the full power of WPF/Silverlight with the concepts of DataTemplates and Styles to define how will be presented each piece of data.
Only plain XAML and nothing more. (Code-behindless).
It is Stateless. The state that is important to the application is kept by the ViewModels.
It is kind of Passive – doesn’t have any specific logic in it – business or UI related. It’s activity is mainly due to the fact that it synchronizes it’s state with the ViewModels. More about these later.

The ViewModel – “Model of a View”

This is the guy that separates The View from The Model. (Presentation Separation)

Expose the model’s data via Properties. Each piece of data should be exposed out of the ViewModel via Properties, so the View can get it from the ViewModel and visualize it on the screen. Very often is doing some presentation logic, formatting and making the model data more User friendly.
Keeps the state of the View in Properties. Examples are IsSelected, IsExpanded and so on. These properties are always synchronized with the actual visual objects that are exposing this Selection and Expanding functionality.
Expose functionality to the View via Commands. Commanding is the very important part of MVVM, because this is the way a Visual object can bind and execute method that exists in the ViewModel. At the end using Commands, a Button can execute Command (functionality) from the ViewModel when the user initiate an action (like Clicking it). The actual benefit of this is much easier Testability (in contrast with the eventing and event handling patterns)

The Glues

Now lets see how these 3 layers are communicating between each other.

Data Binding – is the built-in way of Synchronization between The View and The ViewModel. When two properties are bound and the one changes – the other gets changed as well. This technique is so powerful and natural to me that I can not even imagine writing software without it. Please read more about Data Binding at msdn.
- INotifyPropertyChanged – Once you implement this interface and raise appropriately its only PropertyChanged event each bound property will be notified about the change.
- INotifyCollectionChanged – The same idea, but notifies Item’s controls for adding, removing or clearing operations over the bound ViewModel collection. There is built-in implementation in WPF/Silverlight called ObservableCollection.
Data Templates – One of those things that really differentiate Silverlight/WPF from the other platforms. It brings the concept of Data Driven Development to a new level, allowing us to define how we want to represent each piece of data using the declarative and so powerful XAML. So the Template is a declaration of the look of an object (Model, or the better – ViewModel). Read more.
Commands – As we discussed, this is the way to expose functionality out of the ViewModel, so the View can bind to it and execute it when it has to, based on the user actions. In the world of MVVM, the implementation of the Commanding pattern uses the so called DelegateCommand (RelayCommand). I really encourage you to read the full article about commanding.
Messaging – It’s optional concept that uses shared media to decouple ViewModels, but still make it possible to communicate between each-other. So the very basic scenario is one ViewModel sends message to the queue and a second ViewModel listens for that kind of messages and does an action. You may implement it in a very different ways, according to your needs. But keep in mind that most of the MVVM toolkits have it ready for use. (And one of the best out there is the MVVM Light Toolkit).
- Decouple the ViewModels via shared media (Message queue)
- Send messages to the Queue
- Receive (Listen for) messages from the Queue

The Bag of Tricks

Behaviors – gives us a way to define declaratively in XAML interactivity and also extends existing controls with new functionality. Behaviours can be attached to a Visual and this way add it new functionality like dragging, moving, floating, reflection and much more. They can be very helpful in order to separate any visual logic out of the View into separate behavior class, that do only something very specific.
Value Converters – it’s a very useful technique to Convert a bound value to new one. Can be used for presentation purposes and converting a piece of data to something more readable. (Note that most of this can be done in the ViewModel directly).
Template and Style Selectors – provides a way to apply data templates based on custom logic. Most of the time, you may use template selector when you want to use more than one data template for the same type data.

Benefits of MVVM

Separation of Concerns.
Can Test the UI.
Can Read the code.
Can Maintain the application.
Can Reuse the view logic.
Better Designer and tools support. (Blendability).
And much more…

Thank you for your time!

I’ll keep this post codeless, but I’ve prepared for you an example project, that demonstrates every one of these techniques, in a very obvious way. It is called RadWebBrowser and is very basic(for the sake of simplicity) Silverlight out-of-browser Web Browser application. It also uses some of the great RadControls for Silverlight. I'm also using the Great MVVM Light toolkit - if you don't know it, please go there, download it and start using it.

Please drop me a line if you have any comments, questions or suggestion.

Download it here.

5+ Ways to Reduce your .Xap Size

Miro Miroslavov — Wed, 15 Sep 2010 09:00:00 GMT

Being Silverlight developer means that we are also kind of web developers. From this point of view, we also have to think about the web traffic that our applications generate. We need to reduce it as much as possible. So basically we need to reduce the size of the application's output - the .xap file.

In this post I'll try to summarize the five ways to reduce the size of a xap that I've shared today with Sofia's Silverlight User Group.

Understanding the Xap

In order to reduce the size of a xap file, we should first be aware of its structure. Basically it can contain only 4 things:

AppManifest.xaml - xaml file that identifies the packaged assemblies and the application entry point
Application Assembly - the one that contains the Application class.
Library assemblies.
Resource files - like images and videos

So we can smaller its size by reducing the code and resources of our assemblies, load assemblies on demand (exclude them from the xap) or minify some of the compiled library assemblies.

Start with the Resources

You should carefully think about the resources (Images, Videos...) - how you use and manage them! You have 3 options to choose from - embed them into assembly, add them as a content in the xap or leave them on the server as web content. Note that the last option can reduce the xap significantly. You have to check their "Build Action" and choose the correct one:

Resource - The resource gets embedded into the assembly, so respectively in the xap.
Content - The resource gets embedded into the xap.
None - The resource won't be embedded into the assembly nor the xap. But you can "Copy it to the Output Directory", so use it as web resource, thus Load it on Demand.

You can read more about Silverlight resource files here.

Application Library Caching

It allows you to exclude assemblies form the xap with just a single click option, mark them as external parts and make them ready to be cached by the browser. I'm not going to dive into Assembly Caching, since Evan made a great post about it. Just read it and consider using it.

Load assemblies on Demand

This trick is possible due to the Silverlight API, that allows us to load assemblies into the AppDomain. We need to download one using simple WebClient, load it and use Reflection to use its types and resources. Although this is tricky and kind of obsolete (thanks to the Prism), one can find it interesting and implement it on his/her own. You can read more about this approach.

Modularity with Prism

Prism is probably the best approach out there for Silvrelight application development. The architecture allows us to slice the application into Moduls. Each module can be easily configured to be Loaded On Demand | When Available and On the Background. So the resulting application consist of a lot of xaps and some of them are delayed and downloaded during run-time, which can significantly reduce the initial download time and respectively enhance the overall user experience. Download the latest binaries and play with the modularity example projects.

Note that if a Module reference assembly that is loaded with the main module, you can set its CopyLocal = False attribute, which means that the assembly won't be included into the xap. But since it will be already loaded into the AppDomain, everything is ok.

Dead-code removing - Minification

Although the Prism give us so much flexibility and great features, it can't fix one problem that comes with using already compiled assemblies. The abstract problem is that it doesn't matter how much code or features you use from one assembly - you get it as a whole. This problem was addressed long time ago and the solution is named "Minification" (the process of removing all unnecessary characters from source code, without changing its functionality). This is very popular trick in the JavaScript world (and it obviously makes sense - to reduce the size of a web page, by removing unused JS code). In the Telerik's Silverlight world the solution is called Assembly Minifier. It reduces the compiled assemblies size by removing the controls (code and resources) that your application doesn't need during run-time. The result is smaller assemblies, smaller xap, which results in faster download time and faster application loading. You can read my post for more information on how to use the tool.

Some more Tricks

Re-zip your xap package using higher compression ratio. Read the full story by Valeri Hristov.
Configure long expiration date on your IIS, so the xap will be cached by the user's browser, thus downloaded only once.
Create nice looking and professional SplashScreen that will reduce the bad experience from downloading big xap package.

Thank you for your time and keep in mind that the Xap size matters!

Nesting Prism Regions using RadRibbonBar

Miro Miroslavov — Thu, 02 Sep 2010 08:25:11 GMT

This post is update to my first post about "Decouple RadRibbonBar with Composite Silverlight (Prism)" (Read More). Nesting Regions in Prism could sound weird to someone, but the demand for this is growing. Check this forum post for more info.

As a result to this post I've decided to update my previous example project. I've started by marking the one of the RibbonTabs as a Region as well, giving it a name SalesTab.

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

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

xmlns:telerikRibbonBar="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.RibbonBar"

Header="Sales"

xmlns:Regions="clr-namespace:Microsoft.Practices.Composite.Presentation.Regions;assembly=Microsoft.Practices.Composite.Presentation"

Regions:RegionManager.RegionName="SalesTab">

<telerikRibbonBar:RadRibbonGroup Header="Sales">

<telerikRibbonBar:RadRibbonButton Content="Add" />

<telerikRibbonBar:RadRibbonButton Content="Remove" />

</telerikRibbonBar:RadRibbonGroup>

</telerikRibbonBar:RadRibbonTab>

After that I've added a new project similar to the other Modul projects, but the main view will be of base type - RadRibbonGroup:

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

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

xmlns:telerikRibbonBar="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.RibbonBar"

Header="Dynamic Sales">

<telerikRibbonBar:RadRibbonButton Content="First" />

<telerikRibbonBar:RadRibbonButton Content="Prev" />

<telerikRibbonBar:RadRibbonButton Content="Next" />

<telerikRibbonBar:RadRibbonButton Content="Last" />

</telerikRibbonBar:RadRibbonGroup>

And Finally add the new GroupModule to the bootstraper 's Module catalog.

ModuleCatalog catalog = new ModuleCatalog()

.AddModule(typeof(CustomersRibbonTab.CustomersRibbonTabModule))

.AddModule(typeof(SalesRibbonTab.SalesRibbonTabModule))

.AddModule(typeof(SalesGroup.SalesGroupModule));

As a result I get nested Prism Regions, where the main region has two Tabs and the nested Region tab has one static Group and one Dynamic.

I've also updated the project's referenced assemblies to the latest Prism and Telerik binaries. Also migrated the project to Visual Studio 2010 using Silverlight 4.

Download the code - RadRibbonBarPrism.zip

All comments and feedback are more than welcomed.

RadRibbonBar - Keyboard navigation using Key tips

Miro Miroslavov — Thu, 12 Aug 2010 05:00:00 GMT

The Keyboard navigation major feature is now available with the Q2 ServicePack1 release. You can start using it immediately in WPF and Silverlight and as a result enhance your application’s Usability and Accessibility.

Try it yourself.

The API

The API is pretty straight-forward. First you should enable Key tips, for the instance of a RadRibbonBar, with simple attached property like follows.

<telerik:RadRibbonBar telerik:KeyTipService.IsKeyTipsEnabled="True">

Then you can attach key tip text to every component in the RadRibbonBar with simple line of code.

<telerik:ApplicationMenu telerik:KeyTipService.AccessText="F">

Some components need alternative key tip activation text like the RibbonGroup. Foe example one could be used for the DialogLauncher button and one for the group itself, when the group is collapsed due to insufficient space.

<telerik:RadRibbonGroup telerik:KeyTipService.AccessText="FN"

telerik:KeyTipService.AltAccessText="ZF">

Usage

You can show the key tips by pressing CTRL + Q for Silverlight or ALT for WPF.
When you select a key tip – it executes the control’s action.
- Selects RibbonTab
- Opens DropDown or Split button
- Opens Ribbon gallery
- Drops ContextMenu
- Executes click if normal Button
- Toggles the state of ToggleButton
- Expands RibbonGroup if it’s collapsed
You can navigate back thought the layers of the key tips using Esc key.

Features

Key tips are themeable related to your selected telerik’s theme.
Can be customized by changing KeyTipControl's ControlTemplate.

Download the sample project.

The first Ribbon Bar for Silverlight, to fully comply with the Microsoft fluent UI guidelines.

Miro Miroslavov — Mon, 26 Jul 2010 13:40:00 GMT

This week we will release new major feature for the RadRibbonBar – keyboard access.

KeyTips provide keyboard access to every control in the Ribbon. They are activated by pressing the ALT key, following by the key for the button you want to activate. KeyTips are very well explained at the Microsoft’s fluent UI guidelines, you can read more about KeyTips on msdn…

This feature is in the Required section from the Ribbon specification, but it’s nature and hard implementation details was preventing us from implementing it sooner.

Currently this feature is the one with most votes in our PITS system, thus we considered it for high priority.

Announcing the first keyboard support for Silverlight Ribbon Bar.

Currently this is feature is not implemented by any other control vendor for Silverlight. Telerik is the first to offer this feature.

KeyTips are also available for the ApplicationMenu, QuickAccessToolbar, drop down items – DropDown buttons, Split Buttons, Collapsible panels and so forth.

With KeyTips you can “execute” each action available on the Ribbon:

You can simulate click on a button
You can Open drop down contents
You can expand collapsed groups (Editing – ZN tip)
You can execute Group dialog launcher.
You can open galleries
Drop down the ComboBox, check checkboxes and so on…

With other words – KeyTips should fully replace the mouse for those that wants to. And it will do it with the new RadRibbonBar.

You may see the ApplicationMenu tips as well.

You may also notice the new re-designed ApplicationMenu and Collapse button (on the top right).

It will be officially Available with the Service Pack 1.

You will be able to play with it later this week - with the internal build.

In the following release you will see some more really nice RadRibbonBar features like:

Full DataBinding support
New design for the ApplicationMenu
Collapse Ribbon button
And a lot more fixes

What’s next for Telerik RadRibbonBar

For the next official release, we will be working on RadRibbonWindow for Silverlight (OOB) and Office 2010 Theme with Back-stage functionality.

Also available for WPF.

As you already know, our suite is fully compatible with Silverlight and WPF as well, so the guys using Windows Presentation Foundation will also be able to use the keyboard navigation.

Hope you will enjoy this major feature. Thanks for your feedback.

Telerik Assembly Minifier - official release

Miro Miroslavov — Thu, 15 Jul 2010 14:15:00 GMT

What is Assembly Minifier

If you still don’t know what it is:

You should first read my previous post, where I announced the first Beta version of the tool
You can watch the “Introduction to Assembly Minifier” video, kindly provided by Todd Anglin and Telerik TV
You can read “why Silverlight application size matters” (the xap file) and how Assembly Minifier helps you reduce the XAP file size - by Todd Anglin. Read more…
You can go to http://minifier.telerik.com/, get your reduced Silverlight assemblies, build your application's XAP file with the new assemblies and significantly improve your application performance and downloading experience

What is New in the Q2 2010 release?

Among the great Q2 release of RadControls for Silverlight and the tons of new features, we have also been working hard to bring you more stable and better Assembly Minifier tool.

There are a lot of features coming with the official version:

We now support minifying the themes’ assemblies. Which means that you can now upload themes’ assemblies along with the controls and select the needed controls. At the end of the process you will get the new themes' assemblies having styles only for the controls you selected. The minifier client application uses this feature. As a result the Vista theme assembly was reduced from 2600+K to less then 400K (25% of the original size). And now the assembly contains only the styles for the couple of controls used in the Assembly Minifier UI.

Minifying Vista theme for the Minifier UI. Comparison to the original sizes

The second major new feature is support for the Charting assembly. Furthermore we now split the control into separate features, so you will be able to choose which features you need for your project

Minifying chart components.

We now support Feature Based Selection. Meaning that some controls have optional parts/features that you can select and at the end you will have even smaller control package, having only the needed parts/features
With the new version you are able to select for minifying even our theme Styles for the built-in Silverlight controls like CheckBox, RadioButton, PaswordBox, TextBox and so on. Thus, you can download an assembly having only the themes for those controls. The item in the minifier's TreeView is called “Silverlight Controls Styles”
We also made a lot of improvements and fixes in the main XAML processing module. The XAML is reduced much better and efficient, resulting in smaller size and more correct assemblies

What to expect from Assembly Minifier?

Just a little insights about what to expect from the Assembly Minifier in the future.

For the next Quarter, we will work hard to bring you better user experience. We will optimize the whole process, giving you much easier way to minimize your XAP files. We will also continue to work on improving the resulting assembly sizes and making our controls suite more “minification suitable”.

We will greatly appreciate your feedback and comments.

Telerik Assembly Minifier

Miro Miroslavov — Thu, 10 Jun 2010 11:45:00 GMT

What is it?

Telerik Assembly Minifier is a tool that lets you extract only the controls’ classes and resources you need to use in your application development, thus significantly reducing the size of the assemblies. Using the Assembly Minifier you will achieve significantly better loading time when the XAP files containing the minified (optimized) assemblies are to be loaded on the client side.

Reducing (minifying) the size of Telerik Silverlight assemblies

In order to minify the assemblies, you should:

Open the application at: http://minifier.telerik.com.
Browse and upload Telerik Silverlight Assemblies, the ones that you want to optimize. See the tips at the bottom, for more information on uploading.
After you select and upload the assemblies,the Assembly Minifier will automatically start processing and analyzing the files.
Then, you will be able to select only the controls you will need in your application.
As soon as the analyzing process finishes, you will be able to see the relative size of each control.The size is just for comparison purposes and does not mean that the output assemblies will have the exact same size as shown in the TreeListView.
Once you finish the selection, you can click the Extract button.
As soon the server processes the Extraction, you will be prompted to Save a ZIP file containing the minified assemblies.
If you want to try the minified assemblies in an existing project:

You should first remove the references to the old assemblies
Clean up the Visual Studio Solution
Add references to the newly created (minified) assemblies
Build the Solution

If you want to use the minified assemblies in a new project you should simply add reference to the newly created assemblies in the project. If you have troubles referencing the assemblies, you may need to check the assembly files for the Lock bit and unlock them if needed – right click on the file, go to Properties/Unlock assembly)

Here is how The Minifier looks like:

Tips for using the Assembly Minifier

To get the best results from using the Assembly Minifier, you should upload all referenced assemblies (as well as the one that contains the controls you will need) – so that they will be minified according to your selection. For example if you want to use only RadDocking from Telerik.Windows.Controls.Docking.dll, you should also upload Telerik.Windows.Controls.dll and Telerik.Windows.Controls.Navigation.dll and select only RadDocking control. This way you will get minified versions, of all referenced (above mentioned) assemblies, specifically for RadDocking. In this example the output assembly - Telerik.Windows.Controls.dll should be around 400KB (compared to 1100KB) and the Telerik.Windows.Controls.Navigation.dll should be 230KB (compared to 840KB).
Some controls are using parts that are not compulsory, so you should take care and select them manually. For example RadRibbonBar frequently uses the RadRibbonButton. To include RadRibbonButton in the minified assembly, you should select it.
For the moment you can NOT optimize RadChart, DataVisualization and Themes assemblies, so you will not be allowed to upload them.

Thank you in advance for your feedback

Since this version of Telerik Assembly Minifier is beta release, we encourage you to use Minified assemblies only for testing purposes and NOT in production.

All comments, feedback, feature requests and bug reports are welcome. You can share your feedback in the public forum.

In Addition

Good to know is that the Telerik Assembly Minifier client application uses minified assemblies, containing only RadTreeView, RadWindow, RadButton and RadUpload. After minifying we got 400KB xap file out of 800KB.

Download

RadControls for Silverlight and over 300 examples

Decouple RadRibbonBar with Composite Silverlight (Prism)

Miro Miroslavov — Fri, 26 Mar 2010 10:23:36 GMT

Let's suppose we want to decouple our application that uses RadRibbonBar as a main menu. Doing this using Composite Application Guidelines (Prism) is common scenario, so let's see how to achieve it.

We'll make our RadRibbonBar to serve as RegionManager (This is possible because RadRibbonBar inherits from ItemsControl) and the RadRibbonTabs as actual views that will be plugged-in.

So first we start with declaring RadRibbonBar as RegionManager :

<telerikRibbonBar:RadRibbonBar Regions:RegionManager.RegionName="RibbonRegion" />

Having Region we can focus on creating the actual views. Let's add new Silverlight class library project and name it SalesRibbonTab. Now we need the view itself, so add new class let's say Ribbon that inherits from RadRibbonTab.

Ribbon.xaml.cs

public partial class Ribbon : RadRibbonTab

{

public Ribbon()

{

InitializeComponent();

}

And associate xaml file with it.

Ribbon.xaml

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

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

xmlns:telerikRibbonBar="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.RibbonBar"

Header="Customers">

<telerikRibbonBar:RadRibbonGroup Header="Cusomers">

<telerikRibbonBar:RadRibbonButton Content="Add" />

<telerikRibbonBar:RadRibbonButton Content="Remove" />

</telerikRibbonBar:RadRibbonGroup>

</telerikRibbonBar:RadRibbonTab>

Ok. Now we need a class that will serve as the glue between the RegionManager and the actual View. It has to inherit from IModule and lets name it

SalesRibbonTabModule.cs

public class SalesRibbonTabModule : IModule

{

private readonly IRegionManager regionManager;

public SalesRibbonTabModule(IRegionManager regionManager)

{

this.regionManager = regionManager;

}

public void Initialize()

{

regionManager.RegisterViewWithRegion("RibbonRegion", typeof(Ribbon));

}

Having the SalesRibbonTabModule class, now we need to add instance of it to the ModuleCatalog in the Bootstrapper class.

Bootstrapper.cs

public class Bootstrapper : UnityBootstrapper

{

protected override DependencyObject CreateShell()

{

Shell shell = Container.Resolve<Shell>();

Application.Current.RootVisual = shell;

return shell;

}

protected override IModuleCatalog GetModuleCatalog()

{

ModuleCatalog catalog = new ModuleCatalog()

.AddModule(typeof(SalesRibbonTab.SalesRibbonTabModule));

return catalog;

}

Now we are all set and can use all the benefits of Composing the UI.

Download the demo project including the Prism dlls from here.

[Update] The project is updated and improved in new post. Find more.