Assigning Image for treeview item in wpf progrmatically

[Arshad]

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

[Martin Ivanov]

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

[Arshad]

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

[Martin Ivanov]

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

[Arshad]

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

 

[Arshad]

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:TreeView_WPF_Customized"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        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();

        }

    }

}

 

[Martin Ivanov]

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