Valeri Hristov's blog

TreeView in a ComboBox dropdown using RadControls for Silverlight

Valeri Hristov — Sat, 08 Nov 2008 13:13:09 GMT

As far as I can tell from the experience of my colleagues with RadControls for ASP.NET AJAX, one of the common feature requests for RadComboBox and RadTreeView is combining them into one piece. Recently we started to receive similar requests for RadComboBox and RadTreeView for Silverlight. Placing a TreeView in a ComboBox sometimes makes a lot of sense, so I decided to research the best way to do it.
�
The first, the simplest and most obvious way is to place a RadTreeView as content of RadComboBox:

<input:RadComboBox>
�<nav:RadTreeView 
�ItemTemplate="{StaticResource ItemTemplate}" 
�ItemsSource="{StaticResource ItemsSource}" />
</input:RadComboBox>

However, it has one important limitation: RadComboBox cannot display the RadTreeView selected item. The problem is that RadTreeView is actually inside a RadComboBoxItem and RadComboBox displays only the content of its items. I think that you could create a special ContentPresenter that will display the SelectedItem property of the inner TreeView, but in addition, you should search for ways to avoid other UI glitches, such as RadComboBoxItem highlight around the whole TreeView.
�
I abandoned this approach and created completely different prototype, that follows a WPF article I found on the Internet several months ago (I am unable to find it again, so if you know it, post a comment here with a link and I will give credit to the author). The idea is to replace the RadComboBox ItemsPresenter with a RadTreeView. To do this, I copied the two RadComboBox control templates into a separate XAML file, effectively creating a new RadComboBox skin (this is something that I will describe in detail in another article). You can see how it works�in the attached source. To keep this article short, I removed most of the code, leaving only the elements that demonstrate the idea:

<!-- NonEditableComboBoxTemplate -->
<ControlTemplate x:Key="NonEditableComboBox" TargetType="input:RadComboBox">
�<Grid Name="MainGrid">
��<ToggleButton x:Name="DropDownButton" />
��<ContentPresenter />
��<Popup x:Name="PART_Popup">
���<ScrollViewer x:Name="PART_ScrollViewer">
����<nav:RadTreeView ItemsSource="{TemplateBinding ItemsSource}"
�����ItemTemplate="{TemplateBinding ItemTemplate}"
�����ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
�����ItemContainerStyle="{TemplateBinding ItemContainerStyle}"
�����ItemContainerStyleSelector="{TemplateBinding ItemContainerStyleSelector}"
�����SelectedValuePath="{TemplateBinding SelectedValuePath}"
�����system:ScrollViewer.HorizontalScrollBarVisibility="Disabled"
�����system:ScrollViewer.VerticalScrollBarVisibility="Disabled" />
���</ScrollViewer>
��</Popup>
��<Rectangle x:Name="DisabledVisual" />
�</Grid>
</ControlTemplate>

I bound all data related properties of the RadTreeView with the corresponding properties of RadComboBox. I also disabled the integrated scrollbars of RadTreeView. The only thing left is to synchronize RadComboBox.SelectedItem and RadTreeView.SelectedItem. To do that I created a simple class, containing one attached property:

using Telerik.Windows;
public class ComboBoxExtensions
{
�public static bool GetEnableInnerTreeView(DependencyObject obj)
�{
��return (bool)obj.GetValue(EnableInnerTreeViewProperty);
�}

�public static void SetEnableInnerTreeView(DependencyObject obj, bool value)
�{
��obj.SetValue(EnableInnerTreeViewProperty, value);
�}

�public static readonly DependencyProperty EnableInnerTreeViewProperty =
��DependencyProperty.RegisterAttached("EnableInnerTreeView", typeof(bool), typeof(ComboBoxExtensions),
��new System.Windows.PropertyMetadata(InitializeTreeView));

�private static void InitializeTreeView(DependencyObject d,
����DependencyPropertyChangedEventArgs args)
�{
��RadComboBox combo = d as RadComboBox;
��if (combo != null)
��{
���combo.AddHandler(RadTreeView.SelectionChangedEvent, 
����new Telerik.Windows.Controls.SelectionChangedEventHandler(
����delegate(object sender, Telerik.Windows.Controls.SelectionChangedEventArgs e)
����{
�����RadTreeView tree = e.OriginalSource as RadTreeView;
�����if (tree != null)
�����{
������combo.SelectedItem = tree.SelectedItem;
������combo.IsDropDownOpen = false;
�����}
����}));
��}
�}
}

When you set the attached property on RadComboBox, ComboBoxExtensions attaches a RoutedEvent handler�to the RadTreeView's SelectionChanged event. The handler synchronizes the TreeView and the ComboBox, and closes the ComboBox dropdown when you change the selection in the treeview. The following code demonstrates the RadComboBox declaration:

<input:RadComboBox 
�telerik:RadControl.Theme="{StaticResource TreeInCombo}"
�SelectedValuePath="Text"
�ItemsSource="{StaticResource ItemsSource}"
�ItemTemplate="{StaticResource ItemTemplate}"
�local:ComboBoxExtensions.EnableInnerTreeView="True" />

�
For completeness, here is the hierarchical ItemTemplate, applied on RadComboBox:

<DataTemplate x:Key="SubItem">
�<TextBlock Text="{Binding Text}" />
</DataTemplate>

<telerik:HierarchicalDataTemplate x:Key="ItemTemplate" 
��ItemsSource="{Binding Children}"
��ItemTemplate="{StaticResource SubItem}">
�<TextBlock Text="{Binding Text}" />
</telerik:HierarchicalDataTemplate>

You may ask "Why not bind the SelectedItem properties of the two controls?". The answer is - RadTreeView's SelectedItem property is read-only and Silverlight does not provide the needed instruments (Triggers) to bind a read-only property. "Why SelectedItem is read-only?" you may ask - the answer is "Because RadTreeView is hierarchical control".

Here is the source:

TreeInCombo

I hope this article helps. Let me know if you have questions, you know how to find me :)

RadControls for Silverlight Demo with ADO.NET Data Services

Valeri Hristov — Thu, 09 Oct 2008 10:31:03 GMT

Yesterday I wrote about how to databind RadTreeView for Silverlight to ADO.NET Data Service and use Load on Demand. The simple application from yesterday was upgraded to a small back-end application for the Northwind database, that allows editing and deleting products. This time I decided to give it to one of our designers and our new Silverlight front end developer and they implemented this slick design:

The application is available online:

http://demos.telerik.com/silverlight/northwindbackend/Default.aspx

The source code can be downloaded from here:

NorthwindBackend.zip

In addition to yesterday's application, NorthwindBackend has extended data source, that provides simple undo mechanism and ability to update and delete products in the database through the ADO.NET Data Service. Product updates and deletes are really simple:

public void UpdateSelectedProduct() 
{ 
    if (this.SelectedProduct != null) 
    { 
        Service.UpdateObject(this.SelectedProduct); 
        Service.SetLink(this.SelectedProduct, "Supplier", this.SelectedProduct.Supplier); 
        Service.BeginSaveChanges(null, null); 
    } 
} 

public void DeleteSelectedProduct() 
{ 
    Service.DeleteObject(this.SelectedProduct); 
    Service.BeginSaveChanges((IAsyncResult result) => 
    { 
        SelectedProduct.Category.Products.Remove(SelectedProduct); 
        SelectedProduct = null; 
    }, null); 
}

�

Since deleting of rows in the database can be dangerous in a real-life application, I demonstrate how to implement simple confirmation, using RadWindow:

private void ButtonDelete_Click(object sender, System.Windows.RoutedEventArgs e) 
{ 
    RadWindow.Confirm("Are you sure you want to delete this product?", 
        (object window, WindowClosedEventArgs args) => 
        { 
            if (args.DialogResult.HasValue && args.DialogResult.Value) 
            { 
                this.DataSource.DeleteSelectedProduct(); 
            } 
        }); 
}

�

The second parameter of the RadWindow.Confirm method is an event handler, that will be executed when the window closes. There we provide the code that checks whether the user clicked OK or Cancel and then proceed accordingly.

In this application I also modified the generated code for the ADO.NET Data Service in order to change the collections' types. The new thing this time is that I added partial classes that implement INotifyPropertyChanged for each entity. You can find those classes in the Data folder of the NorthwindBackend application. The INotifyPropertyChanged interface is needed because I am using TwoWay bindings to implement the editing functionality of the application without writing code-behind:

<input:RadComboBox ItemsSource="{Binding Suppliers}" 
    SelectedItem="{Binding SelectedProduct.Supplier, Mode=TwoWay}" 
    DisplayMemberPath="ContactName" Height="26" />

�

There is one more trick, that I want to show. I am using a converter to show/hide the product properties panel, depending on the SelectedProduct property of the data source:

public class VisibilityNullConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
        return value == null ? Visibility.Collapsed : Visibility.Visible; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
        throw new NotImplementedException(); 
    } 
}

�

The panel is bound to the SelectedProduct property:

<Border x:Name="ProductInfoPanel" 
    Visibility="{Binding SelectedProduct, Converter={StaticResource VisibilityNullConverter}}" 
    Margin="330,50,110,50" 
    CornerRadius="10,10,10,10" 
    BorderThickness="1,1,1,1" 
    Height="260" 
    BorderBrush="#FFB1C69E" 
    Background="#19FFF200">

�

When the SelectedProduct is null, the converter will return Visibility.Collapsed and the Border and its content will be hidden. When the SelectedProduct becomes not null, the binding will automatically update the Visibility property of the Border, thanks to the INotifyPropertyChanged interface, that is implemented in the data source.

Silverlight TreeView Load on Demand

valeri — Wed, 08 Oct 2008 02:00:00 GMT

Today I created a really simple application that demonstrates "best practice" for using RadTreeView with load on demand and ADO.NET Data Service.

The application uses the Northwind database, that can be downloaded here.

The tricky part is that in order to create almost codeless application we need to modify the automatically generated code of the service reference. To do that you will need to show all files in the Silverlight application (click the Show All Files in the Solution Explorer title bar) and then open Reference.cs:

In this file replace all occurrences of "System.Collections.ObjectModel.Collection" with "System.Collections.ObjectModel.ObservableCollection". This probably will be changed in the RTM of Silverlight, but at the moment, there is no way to choose the data type of the collections in the generated code for ADO.NET data service. Note that you will have to repeat the replacement every time you update the service reference!

The rest of the application is really simple: a RadTreeView, bound to a data source object, that has a property Categories; when the LoadOnDemand event of RadTreeView is fired, the selected category asynchronously loads its related products:

private void RadTreeView_LoadOnDemand(object sender, 
    Telerik.Windows.RadRoutedEventArgs e)
{
    RadTreeViewItem item = e.OriginalSource as RadTreeViewItem;

    Category category = item.Item as Category;
    if (category != null)
    {
        NorthwindDataSource.BeginLoadingProducts(category);
    }
    else
    {
        item.IsLoadOnDemandEnabled = false;
    }
}

The hierarchy of the treeview is defined in its item template:

<DataTemplate x:Key="ProductTemplate">
    <TextBlock Text="{Binding ProductName}" />
</DataTemplate>

<telerik:HierarchicalDataTemplate x:Key="CategoryTemplate" ItemsSource="{Binding Products}"
        ItemTemplate="{StaticResource ProductTemplate}">
    <TextBlock Text="{Binding CategoryName}" />
</telerik:HierarchicalDataTemplate>

Since the first load of the categories is also asynchronous, it takes some time to display the treeview for the first time. I added a simple loading animation, that stops when the treeview is filled with items.

Download the source from here: TreeViewLoadOnDemand

Adding Mouse Wheel support in Silverlight. The easy way.

Valeri Hristov — Thu, 24 Jul 2008 00:00:00 GMT

One of the best uses of�our Routed Event extension is implementing missing system events in Silverlight, such as MouseWheel and RightButtonUp/Down. The API we provide is the same as WPF, so when Silverlight eventually gets support for those events, most probably you will not have to change much. Other good thing is that you do not need to write any JavaScript, or to know what's going on beneath.�The bad thing is that you will have to�enable the windowless mode of the Silverlight plug-in, which will slightly decrease the performance of your application.

To attach a Routed Event handler for the MouseWheel event�on a ScrollViewer you need to add the following code in the constructor of your Silverlight Page:

    
            Mouse.AddMouseWheelHandler(ScrollViewer1,�new�EventHandler<MouseWheelEventArgs>(OnMouseWheelHandler)); �
        
            �

Additionaly, you will have to declare the OnMouseWheelHandler method:

    
            private�static�void�OnMouseWheelHandler(object�sender,�MouseWheelEventArgs�args) �
        
            { �
        
            ����if�(e.Handled) �
        
            ����{ �
        
            ��������return; �
        
            ����} �
        
            ����ScrollViewer�scrollViewer�=�sender�as�ScrollViewer; �
        
            ����int�scrollDelta�=�40�*�args.Delta�/�3; �
        
            ����if�(scrollViewer.ComputedVerticalScrollBarVisibility�==�Visibility.Visible) �
        
            ����{ �
        
            ��������scrollViewer.ScrollToVerticalOffset( �
        
            ������������Math.Min(scrollViewer.ScrollableHeight, �
        
            �����������������scrollViewer.VerticalOffset�-�scrollDelta)); �
        
            ��������e.Handled�=�true; �
        
            ����} �
        
            ����else�if�(scrollViewer.ComputedHorizontalScrollBarVisibility�==�Visibility.Visible) �
        
            ����{ �
        
            ��������scrollViewer.ScrollToHorizontalOffset( �
        
            ������������Math.Min(scrollViewer.ScrollableWidth, �
        
            �����������������scrollViewer.HorizontalOffset�-�scrollDelta)); �
        
            ��������e.Handled�=�true; �
        
            ����} �
        
            } �
        
            �

Unfortunately, the method above is not suitable for enhancing controls which have internal ScrollViewer, such as the standard ListBox, because you cannot get a reference to its ScrollViewer, in order to attach the Routed Event handler. In this case you could create a Class Handler for the ScrollViewer type:

    
            EventManager.RegisterClassHandler(typeof(ScrollViewer),�Mouse.MouseWheelEvent,�new�EventHandler<MouseWheelEventArgs>(OnMouseWheelHandler)); �
        
            �

In this case,�since it�will affect ALL�ScrollViewer controls on the page, the OnMouseWheelHandler method should be slightly different in order to avoid interference with the Telerik controls, which already have mouse wheel support:

    
            private�static�void�OnMouseWheelHandler(object�sender,�MouseWheelEventArgs�args) �
        
            { �
        
            ����if�(e.Handled�||�!ListBox1.IsAncestorOf(scrollViewer))� �
        
            ����{ �
        
            ��������return;� �
        
            ����}� �
        
            ����... �
        
            } �
        
            �

The check could be modified to exclude certain controls, e.g.�if you have only a couple of Telerik controls on your page and lots ot other controls, containing ScrollViwers, you could disable the handler only for the Telerik controls and enhance all other ScrollViwers on the page.

The IsAncestorOf method is an extension method, that you could declare in some static class in your application as:

    
            public�static�bool�IsAncestorOf(this�FrameworkElement�target,�FrameworkElement�element) �
        
            { �
        
            ����if�(target�==�element) �
        
            ����{� �
        
            ��������return�true; �
        
            ����} �
        
            ����FrameworkElement�parent�=�VisualTreeHelper.GetParent(element)�as�FrameworkElement; �
        
            ����while�(parent�!=�null) �
        
            ����{ �
        
            ��������if�(parent�==�target) �
        
            ��������{ �
        
            ������������return�true; �
        
            ��������} �
        
            ��������parent�=�VisualTreeHelper.GetParent(parent)�as�FrameworkElement; �
        
            ����} �
        
            ����return�false; �
        
            } �
        
            �

Of course, the MouseWheel event is not limited to just scrolling ScrollViewer controls. For example, RadSlider and RadNumericUpDown use the MouseWheel event to change their values, you could zoom-in/out a DeepZoom image, etc. The possibilities are endless.

Attached is the source, containing the refactored code from the above. Happly MouseWheeling :)

Disabling Full Row Selection in Vista Explorer

Valeri Hristov — Tue, 22 Jul 2008 02:59:33 GMT

One of the things that irritates me the most in Vista is the enabled by default Full Row Selection in Explorer. To see what I'm talking about open an Explorer window in Details View and try to select files with dragging a rectangle. I googled a bit and found that there is a solution�for the problem:

Under the key:

�[HKCU\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced]

�

Create a new REG_DWORD value named FullRowSelect. Leave it's data as 0x0 and you are set.

�

After some more digging, I found�several�scripts which will automatically set and unset this key for you:

Keith Miller'�Windows Stuff

�

I hope this helps.

Increasing the compression ratio of the XAP files

Valeri Hristov — Tue, 13 May 2008 10:36:38 GMT

Today I was hacking around with a Silverlight application and decided to check if it is possible to recompress its XAP file in order to save some bytes. As you might already know, the XAP files are just renamed ZIP files and you can open and view their contents with almost any archiver.

I created a simple batch file that extracts an archive to a temp folder, deletes it and then compresses the extracted files into a new archive with the same name as the original (I am using the open source archiver 7-Zip, which was installed in its default location):

@if exist %temp%\%2 rd /s /q %temp%\%2

@"c:\program files\7-zip\7z.exe" x -r -o%temp%\%2\ %2 *.*  

@del /q %2

@"c:\program files\7-zip\7z.exe" a -r -tzip -mx%1 %2 %temp%\%2\*.*

If you name the file recompress.bat, you could use it the following way:

recompress N SilverlightApplication1.xap

where N specifies the desired compression ratio and could be 1, 3, 5, 7 or 9. Note that in order to use the command line above, you should copy the batch file to the folder, where the application XAP file is located, usually <Project Root>\ClientBin.

For testing I used our online demo, which has a 3.2MB XAP file:

Compression Ratio	1 and 3	5	7	9 (Max)
Compression Speed	Very Fast	Fast	Slow	Slower
Archive Size	2253kB	2184kB	2164kB	2155kB

The batch file operation reduced the original XAP file size with more than a megabyte with any compression ratio! Since the time to recompress with most ratios was less than a second, I decided to create a simple post-build command to process my application XAP file after each build. To use it copy (or move) the recompress.bat file into your project root folder and enter the following text in the "Post-build event command line" text box in the Build Events property pages of your Silverlight application:

pushd clientbin

..\recompress 3 $(projectname).xap

popd

I hope this helps :)