KirilStanoev

RadBook now supports virtualization

Kiril Stanoev — Fri, 12 Mar 2010 03:58:00 GMT

I am proud to announce that RadBook, along with RadGridView, RadTreeView, RadTreeListView, RadChart and RadScheduler, now supports virtualization. With previous versions, it would take up to 16 seconds to load 1000 pages, where now it takes just 2 seconds to load a set of 10,000,000 (10 million) items.

The cause of the performance boost is the way RadBook handles the unnecessary(non-visible) elements. As you probably know, while turning a page, only four pages are visible at any given moment in time.

Previous versions of RadBook would just collapse the unnecessary elements, which had a significant impact on the initial loading time. The new version of RadBook now takes advantage of the VirutalizingPanel and creates only as many elements as necessary for the book to render properly. Enjoy and if you have comments or questions on the topic, let us know.

First Look at RadBook for Silverlight

Kiril Stanoev — Thu, 19 Nov 2009 10:56:00 GMT

I am glad to announce the addition of one more control to our Silverlight suite. The control is called RadBook and it is a page-flip type of control that allows browsing through a set of items as if flipping the pages of a book.

RadBook inherits System.Windows.Controls.ItemsControl, which allows you to turn any type of content into a RadBook's page. The main features of RadBook are:

Ability to template every page by using LeftPageTemplate, RightPageTemplate, LeftPageTemplateSelector and RightPageTemplateSelector.
Ability to change the way a page is flipped i.e. flip a page on a single click, double click or simply forbid page flipping.
Ability to define whether the first page will appear on the left or on the right, thus resembling a real cover page.
Smooth flip animations that significantly improve the user experience.

Since this is RadBook's first version, I'd like to ask for any feedback you might have. It would be highly appreciated. Also, if you want to learn more about RadBook, you can take a look at our online demos or join our community.

Editing Telerik's Silverlight Controls in Expression Blend

Kiril Stanoev — Thu, 04 Sep 2008 20:00:31 GMT

Along with the release of Telerik RadControls for Silverlight Beta 2, we also released a "blendable" Silverlight project. What I mean under "blendable" is that when this project is opened in Expression Blend, it allows you an easy and straightforward approach to editing the style of every control in out suite.

To begin with, go to your Client.net account and download Telerik.Windows.Controls.Blend.

Unzip the project anywhere and open the Telerik.Windows.Controls.Blend.sln files using Expression Blend.

If you explore the Project tab, you will find that each control is represented by a separate XAML file.

Open, for example, the Expander.xaml file. You will see that there is nothing more than an Expander control on the page. If you want to edit the ControlTemplate of the control, simply right-click the control and choose "Edit Control Parts(Template) > Edit Template"

After that Blend will show you all the elements that compose the ControlTemplate of the Expander control.

I am not much of a designer so I will leave the rest to your imagination.

The same instructions are fully applicable to the rest of the controls in the project. All the xaml that a single control uses is placed inside the resources of the respective host page. This means that if you want to edit the ControlTemplate of the TreeView you can find its xaml inside the UserControl.Resources tag in TreeView.xaml.

Populating Silverlight TreeView from WCF Service with LINQ to SQL

Kiril Stanoev — Wed, 27 Aug 2008 06:20:00 GMT

In this example I will show you how to populate a RadTreeView using LINQ and WCF. Also you will see how to transform a flat data into a hierarchical one.

The target result is:

1. Create a new Silverlight Web Application Project

NOTE: Make sure you choose "Web Application Project"

After the project loads you can see that besides the regular Silverlight application, Visual Studio adds a Web application that will host the .xap file.

Before writing any LINQ or creating any WCF service, we need a database to target.

2. Right-click on RadTreeViewWithWCFWeb project and add a new item - "SQL Server Database". You can give the database any name you wish. I personally called mine TVSeries since this is going to be a TV related tutorial :).

Visual Studio will ask you whether you want to place the database in the App_Data folder. Click Yes to confirm.

Examine the RadTreeViewWithWCFWeb's App_Data folder and you will find your database there.

3. Double-clicking the TVSeries.mdf file will automatically send the database to the "Server Explorer" window.

It is now time to populate the database with some data. To keep the tutorial short, I will add only one table and fill it with data. I have called my table FoxTVSeries. You can download the database here.

Since the database is populated, it is time to do LINQ on it.

4. Right-click on RadTreeViewWithWCFWeb project and add a new item - "LINQ to SQL Classes".

5. Open the "Server Explorer" window and drag the FoxTVSeries table onto the "Object Relational Designer". ("Object Relational Designer" opens automatically when you open the DataClasses1.dbml file)

The "Object Relational Designer" will automatically show the columns that the table has.

6. By default, the LINQ class is not serializable. In order to use the table in a web service, we need to make the DataClasse1.dbml file serializable. Right-click on the design surface and choose Properties from the drop-down. In the properties window change the "Serialization Mode" to Unidirectional.

7. The LINQ is done, it is time now to create the web service. Again, right-click on RadTreeViewWithWCFWeb project and add a new item - "WCF Service".

Visual Studio adds 3 files that hold the service contract for the WCF service - IService1.cs, Service1.svc and a code-behind to it - Service1.svc.cs.

8. Open the first file - IService1.cs. This file contains the operation contract. Change the name and the signature of the DoWork() method - change its name to GetTVSerie and change its return value to be List<FoxTVSery>.

9. Go to the Service1.svc.cs file and implement the IService1 interface

10. Keeping the example as simple as possible, we will select all the the items in the table, without any grouping, ordering etc.

11. One thing that is important is to make sure that your web service uses a basicHttpBinding, not the default wsHttpBinding. Go to the Web.config file and scroll down until you find the system.serviceModel tag. Change the binding="wsHttpBinding" to binding="basicHttpBinding".

The reason to change the binding is because Silverlight supports only basic binding (SOAP 1.1 etc.).

Congrats, the web service is all set! The next step is to use the web service in the Silverlight application.

12. Go to the RadTreeViewWithWCF project, right-click on References and add a "Service Reference".

A popup window appears hit the Discover button to find the web service and then hit OK to add it.

13. Once you have the WCF Service added, it is time work a little on the XAML and actually add the TreeView. First of all add references to Telerik.Windows.Controls.dll and Telerik.Windows.Controls.Navigation.dll.

14. Open the Page.xaml file and reference the previously added dlls. Also you need to reference the RadTreeViewWithWCF project.

15. In the UserControl.Resources of Page.xaml we have to create a hierarchical data template that will be used as an item template for the TreeView. Also we create the data source for the TreeView

  1: <UserControl.Resources>  2:    3: <local:HierarchicalDataSource x:Key="Source" />  4:    5: <core:HierarchicalDataTemplate x:Key="NodeTemplate" ItemsSource="{Binding Children}">  6: <core:HierarchicalDataTemplate.HeaderTemplate>  7: <DataTemplate>  8: <TextBlock Text="{Binding NodeText}" TextWrapping="Wrap" Width="400"/>  9: </DataTemplate>  10: </core:HierarchicalDataTemplate.HeaderTemplate>  11: </core:HierarchicalDataTemplate>  12:    13: </UserControl.Resources> 

16. Next step is to create the TreeView and apply the item template and the data source.

  1: <telerik:RadTreeView  2: HorizontalAlignment="Left"  3: VerticalAlignment="Top"  4: ItemsSource="{Binding Source={StaticResource Source}}"  5: ItemTemplate="{StaticResource NodeTemplate}"   6: /> 

17. If you decide to build, Visual Studio will encounter an error at the line

 3: <local:HierarchicalDataSource x:Key="Source" />

18. In the RadTreeViewWithWCF project add a new class called HierarchicalDataSource.cs. Make this class inherit from ObservableCollection<TableItem>.

  1: public class HierarchicalDataSource : ObservableCollection<TableItem> 

Try to build and you will get an error telling you that you are missing the TableItem class. Therefore we need to create the TableItem class. This class is going to represent a single entry from the FoxTVSeries table. This means that this class is going to have properties like NodeID, ParentID, NodeText and one additional property called Children. The Children property will be used to turn the flat data into hierarchical one.

  1: public class TableItem  2: {  3: private string nodeText;  4: private int nodeID;  5: private System.Nullable<int> parentID;  6: private List<TableItem> children;  7:    8: public TableItem(string nodeText, int nodeID, System.Nullable<int> parentID)  9:     {  10: this.nodeText = nodeText;  11: this.nodeID = nodeID;  12: this.parentID = parentID;  13:    14: this.children = new List<TableItem>();  15:     }  16:    17: public string NodeText  18:     {  19:         get  20:         {  21: return this.nodeText;  22:         }  23:     }  24: public System.Nullable<int> ParentID  25:     {  26:         get  27:         {  28: return this.parentID;  29:         }  30:     }  31: public int NodeID  32:     {  33:         get  34:         {  35: return this.nodeID;  36:         }  37:     }  38: public List<TableItem> Children  39:     {  40:         get  41:         {  42: return this.children;  43:         }  44:     }  45: } 

Once the TableItem class is done, we are ready to proceed with the HierarchicalDataSource class.

  1: public class HierarchicalDataSource : ObservableCollection<TableItem>  2: {  3: // This list holds all the items that come from the web service result  4: private List<TableItem> unsortedList = new List<TableItem>();  5:    6: public HierarchicalDataSource()  7:     {  8: // Create a new instance of the web service and get the data from the table  9:         Service1Client webService = new Service1Client();  10:         webService.GetTVSerieCompleted += new EventHandler<GetTVSerieCompletedEventArgs>(WebService_GetTableCompleted);  11:         webService.GetTVSerieAsync();  12:     }  13:    14: private void WebService_GetTableCompleted(object sender, GetTVSerieCompletedEventArgs e)  15:     {  16: // transfer all the items from the result to the unsorted list  17: foreach (FoxTVSery item in e.Result)  18:         {  19:             TableItem genericItem = new TableItem(item.NodeText, item.NodeID, item.ParentID);  20: this.unsortedList.Add(genericItem);  21:         }  22:    23: // Get all the first level nodes. In our case it is only one - House M.D.  24:         var rootNodes = this.unsortedList.Where(x => x.ParentID == x.NodeID);  25:    26: // Foreach root node, get all its children and add the node to the HierarchicalDataSource.  27: // see bellow how the FindChildren method works  28: foreach (TableItem node in rootNodes)  29:         {  30: this.FindChildren(node);  31: this.Add(node);  32:         }  33:     }  34:   35: private void FindChildren(TableItem item)  36:     {  37: // find all the children of the item  38:         var children = unsortedList.Where(x => x.ParentID == item.NodeID && x.NodeID != item.NodeID);  39:    40: // add the child to the item's children collection and call the FindChildren recursively, in case the child has children  41: foreach (TableItem child in children)  42:         {  43:             item.Children.Add(child);  44:             FindChildren(child);  45:         }  46:     }  47: } 

It is a pretty straightforward class. It has a list that will contain the flat data coming from the web service result. Then this list is traversed and the hierarchical data is built.

If you need any more explanations or you have any suggestions, do not hesitate to drop me a comment.

Resources:

RadTreeViewWithWCF.zip

Telerik.Windows.Controls.dll

Telerik.Windows.Controls.Navigation.dll

FoxTVSeries.mdf

Editing Slider's ControlTemplate in Expression Blend

Kiril Stanoev — Fri, 22 Aug 2008 08:37:22 GMT

In this tutorial I will show you how to edit the ControlTemplate of one of our controls – the slider. Before you begin you need to cover the prerequisites bellow. You have to download the Telerik Controls for Silverlight as well as the project that contains all the controls and their ControlTemplates.

Telerik Controls for Silverlight

Project with all the ControlTemplates – this project is created in such way that allows you easily to edit the control templates. This means that all the control templates are copied in the resources of each Silverlight page.

If you are missing any of the components bellow, please install them:

Visual Studio 2008

Silverlight 2 Beta 2

Blend 2.5 June 2008 Preview

The first few steps from this tutorial can be done directly in Expression Blend, but for ease I will use Visual Studio and take advantage of its Intellisense.

1. Create a new Silverlight project in Visual Studio and call it StylingSlider.

Note: In this particular project the test page is generated dynamically, but you are free to attach a website.

2. Once the project is loaded, add a reference to the Telerik.Windows.Controls.dll

3. Open Page.xaml and add an xmlns referencing the previously added dll.

    1: xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" 

Build the project and you are ready to open Page.xaml in Expression Blend.

4. When Blend loads, click the “Asset Library” button, choose the “Custom Controls” tab and then select RadSlider from the list.

5. Add RadSlider to the page (can be done in two ways):

5.1 Double-click the icon to insert RadSlider

5.2 Switch to XAML view and add RadSlider declaratively.

    1: <Grid x:Name="LayoutRoot" Background="White">    2:      3: <telerik:RadSlider />    4:      5: </Grid> 

Currently Blend is not able to find the ControlTemplate of the control, so if you decide to right click and select “Edit Control Parts (Template)” > “Edit a Copy”, you will get a ControlTemplate with nothing inside.

Therefore you need to manually insert the theme in the resources of the page.

6. From the zip archive, open Slider.xaml, copy everything that is inside the UserControl.Resources and paste it in the Resources of your UserControl.

7. RadSlider’s ControlTemplate uses the Visual State Manager, therefore you need to add a reference to the System.Windows.dll in order to use it.

    1: xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows" 

We are approaching the finish line. Now you need to apply the style that you added in the resources to the slider.

8. Expand the style that targets RadSlider and add a key to it as shown in the screen shot bellow.

9. Apply the style to the slider, again can be done in two ways.

9.1 Apply the style using Blend

9.2 Declaratively

    1: <Grid x:Name="LayoutRoot" Background="White">    2:      3: <telerik:RadSlider Style="{StaticResource SliderStyle}" />    4:      5: </Grid> 

10. With all the steps completed so far, you can easily edit the template of the slider.

Source code for this tutorial: StylingSlider

Additional Resources:

Articles on Visual State Manager

Using ControlTemplates

Any comments and suggestions would be greatly appreciated.

How To: Color Picker done with few slider controls

Kiril Stanoev — Wed, 06 Aug 2008 09:10:00 GMT

This tutorial demonstrates how to create a color picker using nothing more than few elements and Telerik's slider control for Silverlight.
To start off, create a new Silverlight project. It is up to you to decide whether you want a web page in the project or not. This particular example does not to include a web page, but a simple html page that is generated dynamically. Once you have the project created go ahead and add a reference to the Telerik.Windows.Controls.dll. At the top of your main UserControl, add a namespace in order to use the dll. Check if everything compiles and we are done with the preparation.

On the image bellow you can see what the basic structure of the color picker will be.

As you can see there are 3 sliders (hue, saturation and luminance), 1 thumb to pick the color, 1 element to display the result(can be anything that you wish, but in this particular example it is a Rectangle) and a Pad(a Grid that contains the thumb).
You might have already guessed but we are going to use the HSL(hue,saturation,luminance) to RGB(red,green,blue) conversion. Since this is not a tutorial on how the conversion exactly works I advice you to search for HSL/HSV to RGB in case you want to understand the details.

This is the structure of the elements in Blend. Most of the elements have already been explained. One key part that needs some explanation is the resizer element.

The resizer is necessary in order to be able to move the color picker thumb. Basically, moving the color picker thumb causes the saturation and luminance sliders to update their values. These values are set as width and height respectively to the resizer. Changing resizer's size will force the container grid(pad) to recalculate the size of its row and columns and thus causing the thumb to move. Simple enough!

  1: private void LuminanceSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)   2: {   3:     resizer.Height = DistanceConverter.ValueToPixels((double)e.NewValue, (pad.ActualHeight - colorPickerThumb.ActualHeight), (luminanceSlider.Maximum - luminanceSlider.Minimum));   4: }  5:    6: private void SaturationSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)   7: {   8:     resizer.Width = DistanceConverter.ValueToPixels((double)e.NewValue, (pad.ActualWidth - colorPickerThumb.ActualWidth), (saturationSlider.Maximum - saturationSlider.Minimum));   9: } 

Note: The ValueToPixels method accepts 3 arguments - the current value of the slider, the size in pixels of the container that holds the color picker thumb, the range of the slider(Range == Maximum - Minimum)

Change the value of the slider's and see how this reflects the thumb

Download source

On the sample above, if you try to move the thumb nothing will happen. This is in fact the next step - making the thumb dragable.
Thumb control has 2 major events - DragStarted and DragDelta. Our goal is:
1. On DragStarted to obtain the value of saturation and luminance slider's.
2. On DragDelta to calculate the offset(horizontal and vertical) and convert it from pixels to value .
3. Assign the converted values to saturation and luminance sliders.
4. Optional: Make saturation and luminance sliders invisible

  1: // ColorPicker Thumb Drag events   2: private void ColorPickerThumb_DragStarted(object sender, System.Windows.Controls.Primitives.DragStartedEventArgs e)   3: {   4: this.dragDeltaX = saturationSlider.Value;   5: this.dragDeltaY = luminanceSlider.Value;   6: }  7:    8: private void ColorPickerThumb_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)   9: {   10: double offsetX = 0;   11: double offsetY = 0;  12:   13:     offsetX = DistanceConverter.PixelsToValue(e.HorizontalChange, (pad.ActualWidth - colorPickerThumb.ActualWidth), (saturationSlider.Maximum - saturationSlider.Minimum));   14:     offsetY = DistanceConverter.PixelsToValue(e.VerticalChange, (pad.ActualHeight - colorPickerThumb.ActualHeight), (luminanceSlider.Maximum - luminanceSlider.Minimum));  15:   16: this.dragDeltaX += offsetX;   17: this.dragDeltaY += -offsetY;  18:   19:     saturationSlider.Value = this.dragDeltaX;   20:     luminanceSlider.Value = this.dragDeltaY;   21: } 

Download source

Since we have the two slider's done, it is time do create the third component - the hue slider.

This is an example of a hue slider from Expression Blend.

The hue slider has a little bit different responsibility that the saturation and luminance sliders. Besides updating the result box, the hue sliders takes care of updating the gradient background of the pad as well.
Like the other two sliders, the value of the hue slider is used to convert from HSL to RGB. The interesting task here is to make the slider to look like the one on the last image. This means that we have to restyle the slider completely(track, thumb etc).

After some time in Blend:

Download source

Since we have all the necessary parts to assemble a decent color picker, I'd like to spend just a little bit of time on the converter class that does the magic - ColorConverter.cs. ColorConverter has one very important method called HSLtoRGB. Correct, this method takes 3 values - hue, saturation and luminance and return an object of type Color.

This is the final result. Dragging the thumb and changing the value of the hue slider makes the result box change its color. Enjoy!

Download source

Using ValueConverter to edit Slider's TickTemplate

Kiril Stanoev — Thu, 24 Jul 2008 02:00:00 GMT

RadSlider for Silverlight has a neat functionality that allows you to display tick marks along the track.

But what if you are not pleased with the current design of the ticks? Of course you can completely change the look of a tick mark. Let’s say that instead of bluish rectangles, you want your ticks to be ellipses, or triangles maybe. This is easily achieved by setting the TickTemplate property.

<telerik:RadSlider TickPlacement="BottomRight" TickFrequency="1" Maximum="10">

<telerik:RadSlider.TickTemplate>

<Grid>

</Grid>

</DataTemplate>

</telerik:RadSlider.TickTemplate>

</telerik:RadSlider>

Let’s take this a step further. Instead of shapes we might want to place some text underneath the track, displaying the months of the year for example. We could do that using a TemplateSelector and depending on the value of the tick to pick the right template, but this means that we have to have 12 different templates.

A more elegant way of achieving the desired outcome is by using a ValueConverter. Since the numeric representation of each tick is given to its DataContext, all we need is the appropriate converter.

Let’s start by setting some properties to our slider. Since we are going to display the name of the months, we need to set the Maximum to 12 and the Minimum to 1. Since the numeric representation of the months goes like 1, 2, 3…12 we have to set the TickFrequency to 1. Also we want the names of the months to appear bellow the track so TickPlacementhas to be BottomRight. The next property is optional but since it is a show off why not use it. Let’s set the IsSnapToTickEnabled property to True and we are now ready to proceed with our TickTemplate.

The TickTemplate consists of a StackPanel that has 2 children – an Ellipse and a TextBlock. The interesting stuff is that the Text property of the TextBlock is bound and has a specific ValueConverter in it called MonthNameConverter.

<telerik:RadSlider Maximum="12" Minimum="1"

TickFrequency="1" TickPlacement="BottomRight" IsSnapToTickEnabled="True">

<telerik:RadSlider.TickTemplate>

<Ellipse Width="5" Height="5"

Fill="Black"

HorizontalAlignment="Center"/>

<TextBlock Text="{Binding Converter={StaticResource MonthNameConverter}}"

FontSize="10"/>

</StackPanel>

</DataTemplate>

</telerik:RadSlider.TickTemplate>

</telerik:RadSlider>

One final step we should take is to actually implement this MonthNameConverter. Go to your code-behind file and create the following class:

public class MonthNameConverter : IValueConverter

{

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

{

// Get the numeric representation of the tick, cast it to int and

// based on this int value, get the corresponding month name

return CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName((int)(double)value);

}

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

{

throw new NotImplementedException();

}

Last but not least we have to reference MonthNameConverter in the XAML file. You can do this by creating a reference to your project:

xmlns:local="clr-namespace:UsingValueConverter"

Then in the UserControl.Resources attach a key to the converter.

<UserControl.Resources>

<local:MonthNameConverter x:Key="MonthNameConverter" />

</UserControl.Resources>

Run the project and you output should look something like the following:

KirilStanoev

RadBook now supports virtualization

First Look at RadBook for Silverlight

Editing Telerik's Silverlight Controls in Expression Blend

Populating Silverlight TreeView from WCF Service with LINQ to SQL

Editing Slider's ControlTemplate in Expression Blend

How To: Color Picker done with few slider controls

Using ValueConverter to edit Slider's TickTemplate

Silverlight Test Page