CODEWITHSUNDEEP
c#wpfxamltelerik
Kyriakos Xatzisavvas
Kyriakos Xatzisavvas

Reputation: 304

How to make default TreeView (System.Windows.Controls) have the same style as RadTreeView (telerik)?

I tried simply changing the <TreeView> to <RadTreeView> but it messes up some code behind methods, so i thought i could just apply the style, but nothing i tried works.

The code below works fine, i tried change the static resource to RadTreeViewItemStyle it compiles with no problems, but then i get an error on runtime that says "Can only base on a Style with target type that is base type 'TreeViewItem' "

<TreeView.Resources>
  <Style BasedOn="{StaticResource MetroTreeViewItem}" TargetType="TreeViewItem">
    <Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}" />
    <Setter Property="IsExpanded" Value="{Binding Path=IsExpanded, Mode=TwoWay}" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
  </Style>
</TreeView.Resources>;

Upvotes: 3

Views: 247

Answers (1)

BionicCode
BionicCode

Reputation: 28968

First solution: you could make your TreeView extend the RadTreeView. I think RadTreeView has some special dependency properties and also seems to use it's own custom item container. That's why the Telerik style(s) didn't work properly on the TreeView, although it compiles in the first place.

Second solution: could be to extract the RadTreeView style and refactor it, so that it can apply to the WPF TreeView.

In Visual Studio, you have two options. First option is to follow this 5 simple steps:

  1. Go to the XAML Designer and open the Design Pane (Shift+F7)
  2. Select the element you wish to extract the style from (RadTreeView) and right click on it
  3. In the context menu select Edit Template -> Edit a Copy
  4. In the dialog enter a name for the new extracted style and click Ok
  5. You are now back in the XAML Designer. Look for the new style. It was added to the same file where you selected the element tag to extract the style and is named like you have specified before. It's usually added to the top level resource dictionary

To extract the items template repeat steps 1 and 2. Then select Edit Additional Template -> Edit Generated Items (ItemTemplate) from the context menu. Continue with step 4 and 5.

Second option is to follow this 7 simple steps to extract an element's style:

  1. Go to the XAML Designer and select the tag of the element you wish to extract the style from (RadTreeView)
  2. Then go to the Properties pane and scroll down to the Miscellaneous section
  3. Expand the Miscellaneous section and scroll down to the Style field
  4. On the right of this field is a small square. Left click this square to open a context menu
  5. In the context menu select Convert to New Resource.... This opens a dialog.
  6. In the dialog give the new style a name and click Ok
  7. You are now back in the XAML Designer. Look for the new style. It was added to the same file where you selected the element tag to extract the style and is named like you have specified before. It's usually added to the top level resource dictionary

To extract the template repeat steps 1 and 2. Then go to the Template field. Continue with steps 4 to 7.

Third solution: refactor your code-behind in order to make it work with a RadTreeView.

Fourth solution: if it's only the item container that makes the style(s) incompatible, tune your TreeView to use the Telerik item conatiner version (instead of the TreeViewItem). You can do this by extending TreeView and then overriding the default items container:

public class MyExtendedTreeView : TreeView
{    
  protected override bool IsItemItsOwnContainerOverride(object item)
  {
    return (item is RadTreeViewItem);
  }

  protected override DependencyObject GetContainerForItemOverride()
  {
    return new RadTreeViewItem();
  }
}

I think this are your options.

Upvotes: 1

Related Questions