How can I customize my C1TreeView lines to mimic the FlexGrid TreeLine styling?

Posted by: jacob.a.buchanan6.ctr on 9 July 2026, 5:16 pm EST

    • Post Options:
    • Link

    Posted 9 July 2026, 5:16 pm EST

    We recently updated from the .NET framework release of C1 to .NET9. Much of the UI is different and we have been going through updating things. We are using C1 v9.0.20251.1133.

    We use both a FlexGrid and C1TreeView in multiple areas throughout our app. One FlexGrid in particular has 2 groupings set on the data with trees lines enabled and it looks fantastic. I wanted to mirror this style with the tree lines & expanders in my C1TreeView, but I just can’t get it to match.

    It is near impossible for me to get screenshots due to restrictions at my work environment, but i’ll do my best to describe the setup.

    We have a FlexGrid with 4 manually defined GridColumns which are essentially just Data Source, First Name, Last Name, Count. We group on Data Source and Last Name. We set the IsVisible on the Data Source and Last Name columns to false to hide these 2 columns so that we are left with 2 groupings and 2 columns under these groupings. We then set TreeLinesMode to Connected, TreeLinesRadiusX to 3, TreeColumnIndex to 2, and TreeIndentMode to AllCells. We also set the GroupExpandedIconTemplate to C1IconTemplate.TriangleDown.

    Is it possible to mimic this ‘tree view’ line styling from the FlexGrid inside our C1TreeViews?

    Any insight into customizing the C1TreeView connector lines would be appreciated! And I’m sorry if this post was difficult to follow as it’s hard to describe visuals without code or pictures.

  • Posted 10 July 2026, 5:30 am EST

    Hi Jacob,

    Thank you for sharing all the details.

    We tried to replicate the FlexGrid tree-line appearance in the TreeView, and found that it can currently be customized using the following properties:

    treeView.ShowLines = true;
    treeView.LineThickness = flexGrid.TreeLinesThickness;
    treeView.LineStroke = flexGrid.TreeLinesBrush;
    treeView.ExpandedIconTemplate = flexGrid.GroupExpandedIconTemplate;
    treeView.CollapsedIconTemplate = flexGrid.GroupCollapsedIconTemplate;

    However, the visuals cannot currently be matched exactly, as there is no option to configure the line-radius, and the TreeView icon color also appears to follow the LineStroke color.

    We are reaching out to the development team to determine whether the TreeView tree-lines can be customized further, and we will let you know as soon as we have an update.

    [Internal Tracking ID: C1XAML-39906]

    Best Regards,

    Kartik

  • Posted 13 July 2026, 5:33 pm EST

    Thanks for looking into this further for me.

    I did notice the style for C1TreeView (pulled from the C1.WPF.TreeView.C1TreeView.xaml file in the C1 Themes folder) contains a C1TreeViewLine and C1TreeViewLinePanel component in the C1TreeViewItem control template. There are also two styles defined for C1TreeViewLine in that same ResourceDictionary. I tried editing these templates but was getting weird results. I was changing the stroke color to something noticeable like Red just to see if I was editing the right component and only parts of the lines changed color? I’m not exactly sure how these lines are being built out for the tree view.

    I tried to find some similar line styles for FlexGrid so that I could use that as a baseline when building out the styling for the C1TreeViewLine, but I couldn’t find anything like that. I was checking in C1.WPF.Grid.Generic.xaml because this seems to store the base FlexGrid styling. I see no line styling or even a reference to the grid lines other than the dependency property. Are the styles for the lines stored in another theme file? I scanned through several of the xaml files but couldn’t find any styling for those FlexGrid lines.

    The main behavior from FlexGrid’s GridLines that I would like to imitate in my C1FlexGrid lines is how the lines for child items seem to come out of the expander. It’s almost as if I need to shift the C1TreeLines to the left by 1 item. I saw the C1TreeViewLines had a margin of 15,0,0,0 so I thought that was the issue, but setting this to 0 only moved some of the lines? It’s weird.

    Thanks again for all your help.

  • Posted 14 July 2026, 6:11 am EST

    Hi Jacob,

    Apologies for the delay in responding.

    The development team has confirmed that the FlexGrid and TreeView use different architectures for tree styling. Because of this, there is no 100% equivalent for every FlexGrid feature available in the TreeView.

    They have shared a sample project that uses custom icons in both the FlexGrid and TreeView to provide a similar appearance, and they also customized the line style to closely match both controls. The only remaining differences are:

    (1) The radius of the lines in the FlexGrid, and

    (2) The lines for child items originating from the expander.

    Unfortunately, neither of these features is directly possible with the TreeView. We apologize for the inconvenience this has caused.

    As a workaround, the development team also suggested using the FlexGrid as the tree-view throughout your application (by using only one column and setting HeadersVisibility=“None” and GridLinesVisibility=“None”) to ensure consistent styling across the app. However, it is possible that some features may not be available in the FlexGrid as per your usage.

    Attachment: FlexGridTreeViewDemo.zip

    Best Regards,

    Kartik

  • Posted 14 July 2026, 12:55 pm EST

    Thanks Kartik, I really do appreciate all of your help.

    I ended up just going with a much simpler style to mimic the treeview lines/expanders from the .NET Framework version of C1. I’m still fine tuning the styling, but it works.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels