Assigning Image for treeview item in wpf progrmatically

7 posts, 1 answers
  1. Arshad
    Arshad avatar
    10 posts
    Member since:
    Apr 2016

    Posted 07 Jun Link to this post

    Hi am adding new tree view items in a rad treeview programatically like below

    RadTreeViewItem itm = new RadTreeViewItem();
    itm.Header = "Demo";
    itm.DefaultImageSrc = "/Resources/8.png";

    but the image is not visible in the treeview .It only displays if i gave the full path of my solution .But its not possible for real time.I need to map the images from the resources folder of my project .How to achieve it..??

     

    Thanks 

    Arshad

  2. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 09 Jun Link to this post

    Hi Arshad,

    When you define a string path in code that points to a file included in the root folder of the project you will need to get two directories back. So, the following syntax should find your Resources folder if its located in the project's main folder.
    itm.DefaultImageSrc = "../../Resources/8.png";
    Note that in some cases the image might not be displayed until you Rebuild the project.

    I hope this helps.

    Regards,
    Martin
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Arshad
    Arshad avatar
    10 posts
    Member since:
    Apr 2016

    Posted 11 Jun in reply to Martin Link to this post

    I tried these steps and nothing works .Is there any other way ? Because it only displays if i gave the  full path
  5. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 13 Jun Link to this post

    Hello Arshad,

    Without your implementation I cannot tell why the image is not displayed. However, I can suggest you another syntax for the image path which you can try.
    itm.DefaultImageSrc="/MyAssemblyName;component/Resources/8.png";
    Where "MyAssemblyName" is the name of the assembly where the image is stored. By default the name of the project matches the assembly name. So, you can change "MyAssemblyName" in the code snippet with the name of your project. 

    The word "component" is a key word which should stay the same. And after this you can specify the path to the image.

    You can also take look at the Pack URIs in WPF MSDN article which demonstrates another way of constructing a path to a file in an application.

    Regards,
    Martin
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  6. Arshad
    Arshad avatar
    10 posts
    Member since:
    Apr 2016

    Posted 13 Jun in reply to Martin Link to this post

    How can i attach my sample soluition here...?? it only supportssome image format in the attachment..!!

     

  7. Arshad
    Arshad avatar
    10 posts
    Member since:
    Apr 2016

    Posted 13 Jun in reply to Martin Link to this post

    Hi here is the code which am trying to make it work.Can you please check it..

    I am extending the base class (RadTreeViewItem ) and using it.

    Check the code in the ViewModel.cs of the attached project.There

    DefaultImageSrc=@"C:\Users\SPK\Documents\WPF Samples\Treeview class extend\Resources\Object.png"

    works fine .But      DefaultImageSrc = @"../../Resources/Object.png"  is not working..!!

    Here is my codes 

    3Classes: CustomTreeView.cs ,CustomTreeViewItem.cs and ViewModel.cs

    1 Windows :MainWindow.xaml

     

     

     

    CustomTreeView class code

    // -----------------------------------------------------------------------
    // <copyright file="CustomTreeView.cs" company="Microsoft">
    // TODO: Update copyright text.
    // </copyright>
    // -----------------------------------------------------------------------
     
    namespace TreeView_WPF_Customized
    {
        using System;
        using System.Linq;
        using Telerik.Windows.Controls;
        using System.Windows.Media;
     
        /// <summary>
        /// TODO: Update summary.
        /// </summary>
        public class CustomTreeView : RadTreeView
        {
            protected override System.Windows.DependencyObject GetContainerForItemOverride()
            {
                return new CustomTreeViewItem() {
                    Foreground = new SolidColorBrush(Colors.Red),
                    Background = new SolidColorBrush(Colors.Bisque),
                    Width = 150 };
            }
     
            protected override bool IsItemItsOwnContainerOverride(object item)
            {
                if (item is CustomTreeViewItem)
                {
                    return false;
                }
                else
                {
                    return true;
                }
            }
        }
    }

     

    CustomTreeViewItem code

    // -----------------------------------------------------------------------
    // <copyright file="CustomTreeViewItem.cs" company="Microsoft">
    // TODO: Update copyright text.
    // </copyright>
    // -----------------------------------------------------------------------
     
    namespace TreeView_WPF_Customized
    {
        using System;
        using System.Linq;
        using Telerik.Windows.Controls;
        using System.Windows.Media;
     
        /// <summary>
        /// TODO: Update summary.
        /// </summary>
        public class CustomTreeViewItem : RadTreeViewItem
        {
     
        }
    }

     

    Viewmodel code

    // -----------------------------------------------------------------------
    // <copyright file="ViewModel.cs" company="Microsoft">
    // TODO: Update copyright text.
    // </copyright>
    // -----------------------------------------------------------------------
    namespace TreeView_WPF_Customized
    {
        using System;
        using System.Linq;
        using System.Collections.ObjectModel;
     
        /// <summary>
        /// TODO: Update summary.
        /// </summary>
        public class ViewModel
        {
            public ViewModel()
            {
                this.Items = new ObservableCollection<CustomTreeViewItem>();
                GenerateItems();
            }
     
            public ObservableCollection<CustomTreeViewItem> Items { get; set; }
     
            private void GenerateItems()
            {
                for (int i = 0; i < 10; i++)
                {
                    this.Items.Add(new CustomTreeViewItem()
                    {
                        Header = string.Format("{0}", i) ,
                        DefaultImageSrc = @"../../Resources/Object.png"
                        //DefaultImageSrc=@"C:\Users\SPK\Documents\WPF Samples\Treeview class extend\Resources\Object.png"   This works
     
                    });
                }
                 
            }
        }
    }

     

    and here is the code for main window.

    Window.xaml code

    <Window x:Class="TreeView_WPF_Customized.MainWindow"
            xmlns:local="clr-namespace:TreeView_WPF_Customized"
            Title="MainWindow"
            Width="525"
            Height="350">
        <Window.Resources>
            <Style x:Key="{x:Type local:CustomTreeViewItem}"   TargetType="{x:Type telerik:RadTreeViewItem}" BasedOn="{StaticResource {x:Type telerik:RadTreeViewItem}}" >
            <Setter Property="Background" Value="#676767"/>
            <Setter Property="Foreground" Value="White"/>
            
            <Style.Triggers>
                <Trigger Property="HasItems" Value="False">
                    <Setter Property="Background" Value="#828282"/>
                </Trigger>
                <!--Used to change selected item foreground color-->
                <Trigger Property="IsSelected" Value="true">
                    <Setter Property="Foreground" Value="Black"/>
                </Trigger>
                <!--Used to change mouseover item foreground color-->
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Foreground" Value="Black"/>
                </Trigger>
     
            </Style.Triggers>
        </Style>
        </Window.Resources>
        <Grid>
            <local:CustomTreeView x:Name="lst" ItemsSource="{Binding Items}" ></local:CustomTreeView>
        </Grid>
    </Window>

     

    and window.xaml.cs page code

     

    using System;
    using System.Linq;
    using System.Windows;
     
    namespace TreeView_WPF_Customized
    {
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
                this.DataContext = new ViewModel();
            }
        }
    }

     

  8. Answer
    Martin
    Admin
    Martin avatar
    1101 posts

    Posted 15 Jun Link to this post

    Hello Arshad,

    The forums allow to attach only image files. To send a zip file you can open a new support ticket. However, I used your code to assemble a working project.

    I noticed few things in your implementation that I want to emphasize on. The ItemsSource property of the RadTreeView control, or any other ItemsControl in the WPF framework, is designed for data binding scenarios. And it expects a collection of business objects that describe the RadTreeViewItems. In your case the ItemsSource is populated directly with visual elements (custom RadTreeViewItems) which is not recommended. You can read more about data binding in the Populating with Data section in the RadTreeView help documentation.

    So, when the ItemsSource is populated the items control (RadTreeView in this case) will create a RadTreeViewItem container for each business object in the collection. This happens in the GetContainerForItemOverride() method of the treeview. Then you will need to bind the properties of the generated RadTreeViewItems to the object from the ItemsSource collection. 

    About the missing image, I was not able to reproduce this, the image is displayed properly when using relative path. Keep in mind that the RadTreeViewItem with the image will be wrapped into the automatically generated RadTreeViewItem's Header, which is not quite expected behavior.

    In order to resolve this, instead of populating the ItemsSource with RadTreeViewItems you can create a model that holds information about the visual items (including the path to the image) and bind its properties using a Style. I attached a sample project demonstrating this approach. Please give it a try and let me know if it helps.

    Regards,
    Martin
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for WPF is Visual Studio 2017 Ready