How to change the style of radtreeview ?

10 posts, 0 answers
  1. Suzi
    Suzi avatar
    85 posts
    Member since:
    Mar 2008

    Posted 03 Aug 2009 Link to this post

    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,

  2. Ivan
    Admin
    Ivan avatar
    519 posts

    Posted 06 Aug 2009 Link to this post

    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.
  3. DevCraft banner
  4. Suzi
    Suzi avatar
    85 posts
    Member since:
    Mar 2008

    Posted 19 Aug 2009 Link to this post

    Thank you very much for the example, it's working very well.
  5. L D
    L D avatar
    6 posts
    Member since:
    Oct 2009

    Posted 30 Oct 2009 Link to this post

    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  
  6. Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 02 Nov 2009 Link to this post

    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.
  7. tim David
    tim David avatar
    7 posts
    Member since:
    Oct 2009

    Posted 13 Nov 2009 Link to this post

    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! 
  8. Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 17 Nov 2009 Link to this post

    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.
  9. Lilit
    Lilit avatar
    3 posts
    Member since:
    Oct 2012

    Posted 02 Oct 2012 Link to this post

    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 

     
  10. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 05 Oct 2012 Link to this post

    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.

  11. Lilit
    Lilit avatar
    3 posts
    Member since:
    Oct 2012

    Posted 05 Oct 2012 Link to this post

    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
Back to Top
DevCraft banner