This is a migrated thread and some comments may be shown as answers.

How to change the style of radtreeview ?

9 Answers 458 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Suzi
Top achievements
Rank 1
Suzi asked on 03 Aug 2009, 04:10 PM
Hi,

I would like to change the style of my radtreeview. When, my mouse is over an item, an orange panel appears. I would like to change
the color of this panel (for example in red and black). How may I to do ?

Thank you in advance,

9 Answers, 1 is accepted

Sort by
0
Ivan
Telerik team
answered on 06 Aug 2009, 04:10 PM
Hi Suzi,

Thank you for your interest in the RadtreeView for Silverlight.

In order to change the selection look you should edit the style of the RadTreeViewItem and assign the new style to the tree items. Generally there are two approaches:
  • if you code (i.e. create) tree items in the Xaml than you should initialize their Style property:
     
    <telerik:RadTreeView> 
        <telerik:RadTreeViewItem Header="item 1" Style="{StaticResource Style1}"
            <telerik:RadTreeViewItem Header="item 1 a" Style="{StaticResource Style1}" /> 
            <telerik:RadTreeViewItem Header="item 1 b" Style="{StaticResource Style1}" /> 
    . . . 
     
  • if you bind the tree's ItemsSource property you should use the tree's ItemContainerStyle property:
     
    <telerik:RadTreeView 
        ItemContainerStyle="{StaticResource Style1}" 
        ItemsSource="{StaticResource Collection1}"/> 
     
    Note: if you have different items and/or you prefer to display items with different styles than you should use the ItemContainerStyleSelector property.

About the new Style.
The easiest way is to edit an existing Style. For example you can open and page with the Blend and add the RadTreeView with at least one RadTreeViewItem. Select the tree item and choose to Edit its Template. This action will generate a new item style and than you can change what you want. I have used this approach to change the MouseOverVisual, the SelectionUnfocusedVisual and the SelectionVisual elements.

In the attached example you can preview both approaches. Please give it a try and let us know if you have other questions.

All the best,
Ivan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Suzi
Top achievements
Rank 1
answered on 19 Aug 2009, 01:42 PM
Thank you very much for the example, it's working very well.
0
L D
Top achievements
Rank 1
answered on 30 Oct 2009, 05:42 PM
Hi
I was trying to style the radTreeViewItem and your post was definately very informative.
However I was not able to find a way to change the font color when the mouse is over the radTreeViewItem. Any help would be great.

Thanks
LD  
0
Miroslav
Telerik team
answered on 02 Nov 2009, 09:44 AM
Hi L D,

The content of the TreeViewItem's header is displayed in a ContentPresenter element:

<ContentPresenter x:Name="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}"/>
                        <ContentPresenter x:Name="EditHeaderElement" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed"/>

Unfortunately in Silverlight the ContentPresenter element does not have a Foreground property. You can replace the ContentPresenters in the template with ContentControls which have a Foreground property which you will be able to change in a VisualState. Unfortunately in Silverlight there is a bug in the ContentCotnrols where visual content can only be displayed in them only once.

If you do not assign a header that is a visual element, this will be fine. This means that you will be able to use strings and business objects as headers (and use templates as well). You may not be able to assign a visual header directly, like so:

<RadTreeViewItem.Header>
    <Button />
</RadTreeViewItem.Header>

 Do come back to us if you need more help,

All the best,
Miroslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
tim David
Top achievements
Rank 1
answered on 13 Nov 2009, 10:39 AM
I aways using TextBlock instand of the ContentPresent,Then you can change the foreground .But I  don't know what was breaken when I do that! 
0
Miroslav
Telerik team
answered on 17 Nov 2009, 09:22 AM
Hi tim,

Technically you can put TextBlocks in the CotnrolTemplate and {TemplateBind} the Header property to them but then you will not be able to use ItemTemplate / ItemTemplateSelctors.

I suggest using a ContentControl if changes of the foreground are required.

Sincerely yours,
Miroslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Lilit
Top achievements
Rank 1
answered on 02 Oct 2012, 12:51 PM
Hi Ivan,
I have similar task with tree view.
Actually I need to redesign RadTtree view with DragAnd Drop option enabled. For some reasons I can't edit my treeview in blend 
it shows:
 "Exception: Catastrophic failure (Exception from HRESULT: 0x8000FFFF (E_UNEXPECTED)) "
I've edited styles manually on visual studio using example that I founded in forums.
But I need to style the items in dragging  mode also.  I mean the highlighted background when user drags item, the control that shows where will be placed item after dropping .. etc.

I'll be grateful if you can help me with some example.

Thanks in advance 

 
0
Pavel R. Pavlov
Telerik team
answered on 05 Oct 2012, 09:03 AM
Hello Lilit,

We are sure what may have caused this failure, but please keep in mind that Blend 4 is not compatible with Silverlight 5. You need Blend 5 Preview to edit Silverlight 5 projects.

Our RadTreeView Control internally uses a TreeViewDragCue control (the control you see when you drag a RadTreeViewItem) which can be customized. In order to do this you need to edit the default Theme used by RadTreeView. The easiest way is by using Implicit Styles. You can read about them in this article. I implemented the example in the attached project where the "TreeViewDragCueStyle" is edited:
<Style TargetType="treeView:TreeViewDragCue" x:Key="TreeViewDragCueStyle">
The default BackGround Brush is changed:
<Setter Property="Background" Value="{StaticResource RadTreeView_DragContainerFormInnerBackground}" />

All the best,
TeamX2_Pavel
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Lilit
Top achievements
Rank 1
answered on 05 Oct 2012, 01:41 PM
Hello Pavel,
Thank you so much , your reply definitely solved my problem.

By the way, I would like to note that in our company
 we are using "VisualStudio 2012" and "Blend+ SketchFlow Preview for VS 2012", and we are always kipping telerik product up to date .
Some times everything work fine, but in some cases (unfortunately very frequently) I can't edit controls in blend because of error mentioned above.
Any way, thank you again for very useful reply.

Regards
Lilit
Tags
TreeView
Asked by
Suzi
Top achievements
Rank 1
Answers by
Ivan
Telerik team
Suzi
Top achievements
Rank 1
L D
Top achievements
Rank 1
Miroslav
Telerik team
tim David
Top achievements
Rank 1
Lilit
Top achievements
Rank 1
Pavel R. Pavlov
Telerik team
Share this question
or