Apply our custom theme to TreeListView

[Arinto]

Hi there, 

Currently I plan to use TreeListView in our application. We have resource directory to control the look and feel of our application. How can we apply this look and feel to your TreeListView?

Example of the theme that we want to apply is to set the background color of the selected row as well as the TreeListView table header.

Regards, 

Arinto

[Vanya Pavlova]

Hello Arinto,

 
In our online documentation you can find how to create your own custom theme for RadControls/WPF using the Telerik approach, please follow this link. 
If you need to modify the default appearance of TreeListViewRow you have to edit its template and follow the approach demonstrated here.

If you have any difficulties feel free to send us a small application in a new support ticket which can help us to provide you with an appropriate solution.

Kind regards,
Vanya Pavlova
the Telerik team

[Arinto]

Hi Vanya, thanks for the prompt reply. 

I tried to click the link inside the first article that you gave (http://www.telerik.com/help/wpf/common-styling-apperance-themes-custom-theme-project-telerik-approach.html), but it doesn't work.

Here is the broken link inside aforementioned article
http://www.telerik.com/help/wpf/common-styling-apperance-themes-custom-theme-project.html

May I know what the correct link is?

Regards, 

Arinto

[Arinto]

Actually here is our scenario.

1. Our application use application-wide theme file, let's call it Resource/Theme.xaml (since it resides in Resource folder).
2. I need to synchronize RadTreeListView color scheme with this file.

Vanya already pointed this link: http://www.telerik.com/help/wpf/common-styling-apperance-themes-custom-theme-project-telerik-approach.html
The example is for RadSlider component which implies I need to modify the Slider.xaml inside MyTheme project.

For RadTreeListView, what styling file that I need to modify?
*Edited*: I found RadTreeListView.xaml inside Telerik\RadControls for WPF Q3 2010\Themes\Vista\Themes\Vista, Telerik\RadControls for WPF Q3 2010\Themes\Windows7\Themes\Windows7, Telerik\RadControls for WPF Q3 2010\Themes\Summer\Themes\Summer and Telerik\RadControls for WPF Q3 2010\Themes\Transparent\Themes\Transparent.

So I guess, I need to modify this files and follow the steps in Vanya's 1st link. Am I correct?

Regards, 

arinto

[Arinto]

Hi, 

I can't get the Source properties of Theme object from this code snippet inside this link: http://www.telerik.com/help/wpf/common-styling-apperance-themes-custom-theme-project-telerik-approach.html

using System;
using Telerik.Windows.Controls;
namespace Silverlight.Help.RadCommon
{
   [ThemeLocation( ThemeLocation.BuiltIn )]
   public class MyTheme : Theme
   {
       public MyTheme()
       {
           this.Source = new Uri( "/MyTheme;component/themes/Generic.xaml", UriKind.RelativeOrAbsolute );
       }
   }
}

Is there any steps that I missed?
Note that instead of using Silverlight class project, I'm using WPF User Control project because I'm using WPF for Window Application and not for Silverlight.

[Vanya Pavlova]

Hi Arinto,

 
Please find attached a working custom theme following the pattern described in our online help article "Creating a Custom Theme Project - Using the Telerik Approach".
Try this one and let me know if you need any further assistance.

Regards,
Vanya Pavlova
the Telerik team

[Arinto]

Hi Vanya, 

Thanks for the example. It works perfectly as what have been described in the article.
The next step is I tried to customize RadTreeListView using your custom project file.
What I did are:
a. Add RadTreeListView.xaml and TreeListViewRow.xaml from this folder Telerik\RadControls for WPF Q3 2010\Themes\Vista\Themes\Vista
b. Add RadTreeListView component to MainWindow.xaml
c. Create ViewModel classes so that the RadTreeListView can show some sample data
d. Edit MainWindow.xaml.cs to set the them of RadTreeListView using this line: StyleManager.SetTheme(myTreeListView, new MyCustomTheme());

However the result is not as I expected. The divider between column is missing, I changed the ControlBackground and ControlForeground inside RadTreeListView.xaml but there is no changes in the color scheme of the component.
I also changed the ItemBackground of TreeListViewRow but still no visible effect to the component. 

So did I miss some steps when trying to apply theme to RadTreeListView?.

Regards, 

Arinto

[Arinto]

Okie, 

I managed to make it works.
Here are the steps:
1. Looking at sample Windows7 theme in Telerik installation folder, I found that there is an entry of RadTreeListView.xaml in Telerik.Windows.Control.GridView.xaml. So, I created Telerik.Windows.Control.GridView.xaml in Theme folder inside MyTheme project.
2. I copy paste the content of Telerik.Windows.Control.GridView.xaml from Windows7 theme in Telerik installation folder to same file in MyTheme project. I need to comment  <ResourceDictionary Source="/MyTheme;component/Themes/FilteringControl.xaml" /> so that MyTheme project can be succesfully built.
3. I open RadTreeListView.xaml and changes the occurence of 

<Style  x:Key="{telerik:ThemeResourceKey ThemeType=telerik:Windows7Theme

to

<Style x:Key="{telerik:ThemeResourceKey ThemeType=customTheme:MyCustomTheme

Before that I added this line in the xml namespace definition of RadTreeListView.xaml

xmlns:customTheme="clr-namespace:MyTheme"

4. I did the same thing for TreeListViewRow.xaml.

Result:
I managed to get the coloring of the TreeListView header matches the Windows7 theme (since I copied from Windows7 theme folder)

However, I still need to do the same thing for other component that RadTreeListView.xaml refer to. Please correct me if I'm wrong.

Thanks and best regards, 

arinto

[Arinto]

Hi there, 

So in this case, what are the xaml resource files needed to style RadTreeListView?

Regards, 

Arinto

[Vanya Pavlova]

Hello Arinto,

Unfortunately, we are not able to see what is wrong in your project. I have updated the referred project for RadTreeListView/TreeListViewRow and everything works as expected. 

Please check the attached project and let me know if you need any further assistance.

Greetings,
Vanya Pavlova
the Telerik team

[Arinto]

Hi Vanya, 

Thanks for the example again :)

Yup, my code also similar as yours. However, note that if we only include the RadTreeListView.xaml and TreeListViewRow.xaml, there are functionalities that are missing, such as:
a. The column can't be resized
b. Check-box column could not be clicked.
c. When we edit a text-box column, the value is gone when the cell is in edit mode.

I suspect we need to include more resource file to achieve same functionality as normal TreeListView without custom theme. So, what do you think? 

Other than using theme approach, I tried to follow overiding default RadGridView styles example. But let me post my question in another thread.

[Vanya Pavlova]

Hello Arinto,

 
When you are creating a custom theme, you need to implement the same approach that is used in our Themes. The previous sample demonstrates how to apply this custom theme in RadTreeListView using the Telerik approach. If you need fully functional theme, you have to change the GridViewHeaderCell, GridViewCell, GridViewHeaderRow in the same way as it was implemented in our Themes. You can get the xaml files for all Telerik Themes from the Themes folder of your personal installation (you may also find this file attached here). Within Telerik.Windows.Controls.GridView.xaml file you need to get the styles for the rest of its parts and everything will work as expected. In addition to this I think the following online help article that shows how to "Modify Built-In Theme" would be helpful on that matter.
 
Please find attached your updated project.

Kind regards,
Vanya Pavlova
the Telerik team

[Arinto]

Okay, 

Thanks Vanya for the answers and discussion. :)
So all resource files under Telerik.Windows.Controls.GridView.xaml needs to be modified. 

Regards, 

Arinto

[Arinto]

Hi Vanya, 

I tried to follow the steps in Modifying a Built-In Theme walk-through. 
1. I opened Theme solution from Telerik installation folder
2. I noticed that all the project inside the solution has .NET Framework 3.5 client profile as its target framework. So I changed it to .NET Framework 4.
3. I rebuilt all project inside the Theme solution.
4. I changed ControlBackground property of RadTreeListView (RadTreeListView.xaml) in Windows7 project to <SolidColorBrush x:Key="ControlBackground" Color="Red" />. So it is similar to your example of using Telerik approach to change the theme.
5.  I changed the XAML file, I re-build the project and I noticed that the timestamp of Telerik.Windows.Themes.Windows7.dll is updated correctly.
6. I opened my CustomTheme project, and added reference to Telerik.Windows.Themes.Windows7.dll from step 5.
7. I modified App.xaml.cs with this following line:

public App():base()
{
    Telerik.Windows.Controls.StyleManager.ApplicationTheme = new Telerik.Windows.Controls.Windows7Theme();
}

8. I rebuilt my CustomTheme project and run the application.
9. I still see the background of my control is not red as shown in attached jpeg file (telerikmodifybuiltintheme.jpg)

Did I miss some steps?

Another question it's regarding the modifying theme using Telerik approach. I have included all the files from Telerik.Windows.Controls.GridView.xaml. But I still miss the functionality of text editing. When I edit the column, the editor disappear and I can't see the text that currently being edited as shown in attached jpeg file (telerikemptyeditor.jpg)
So, what xaml files that are needed to fix the empty editor issue?

Regads, 

Arinto

[Vanya Pavlova]

Hi Arinto,

Considering our theming mechanism, this approach will work only in Silverlight, not in WPF, because the themes for WPF are not in separate assemblies. If you need to modify some theme, you need to create your custom theme as it was described in my previous reply.

Please accept my apology for the initial misleading.

Kind regards,
Vanya Pavlova
the Telerik team

[Arinto]

it's allright.

So how about my other question,

I have included all the files from Telerik.Windows.Controls.GridView.xaml. But I still miss the functionality of text editing. When I edit the column, the editor disappear and I can't see the text that currently being edited as shown in attached jpeg file (telerikemptyeditor.jpg)
So, what xaml files that are needed to fix the empty editor issue?

If let's say we copy all the theme files from Telerik's installation folder and use all of them to create our custom theme, then it will solve the Silverlight constraint. Am I correct here?

Regards,

Arinto

[Vanya Pavlova]

Hi Arinto,

 
If you need to change this background you have to check the GridViewCell.xaml file and find the brush named GridView_CellBackground_Edited, which paints the background of a GridViewCell when it is in edit mode. Thinking in this way you may change the TextBox control in Windows7 theme as a default editor of GridViewDataColumn.

Kind regards,
Vanya Pavlova
the Telerik team

[vivien]

Hi,
i'm trying to modify your theme project "CustomThemeDemoWindows7" to add the edit functionnality to the radtreelistview but it doesn't work, can you give me some help?? Thank you so much!

[Vanya Pavlova]

Hi Vivien,

May you please share with us the exact problems you are currently experiencing? Is the sample project attached previously not helpful ?
On the other hand, you may also send us a small application in a new support ticket where we can see what is going on in your custom theme. Any additional information about the grid version you use will be highly appreciated as well.

Regards,
Vanya Pavlova
the Telerik team

[vivien]

Hi,
I take the project you had sent on the 15 of february named CustomThemeDemoWindows7.zip. But when I double click on an editable cell i didn't see the content of the cell, i didn't see the textbox... I use the "RadControls for WPF Q3 2010 SP1 Demos".
I didn't find how to send you a support ticket and I can't upload my project on the web.
Thank you for your help.

EDIT : I submitted a ticket with the attached solution

[David]

That link resolves to an error page: "An error occurred while processing your request."