Adding Icon to TreeViewItem

Question

I have been asked to update a TreeVeiw in a WPF application that is built on the fly from a class object. As you will see treeveiw is not bound to anything. Below is not my code!!

<TreeView Grid.Row="0" HorizontalAlignment="Stretch" Name="tvLocations" VerticalAlignment="Stretch" SelectedItemChanged="tvLocations_SelectedItemChanged" />

 private void BuildTreeVeiw(Location locationList) { this.Title = _selectedLoc.Name + " - Locations"; tvLocations.Items.Clear(); TreeViewItem tvitem; tvitem = new TreeViewItem() { Header = locationList.Name, Uid = locationList.Id.ToString() }; if (locationList.Printers != null) { TreeViewItem tvprnitem = new TreeViewItem() { Header = "Printers" }; tvprnitem.FontWeight = FontWeights.Regular; foreach (Printer sprinters in locationList.Printers) { TreeViewItem psubitem = new TreeViewItem() { Header = sprinters.Name, Uid = sprinters.Id.ToString() }; TreeViewItem psubitem1 = new TreeViewItem() { Header = String.Concat("UNC: ", sprinters.UNC) }; psubitem.Items.Add(psubitem1); tvprnitem.Items.Add(psubitem); } tvitem.Items.Add(tvprnitem); } foreach (Location loc in locationList.Children) { AddChildren(loc, ref tvitem); } tvLocations.Items.Add(tvitem); } private void AddChildren(Location child, ref TreeViewItem tvi) { TreeViewItem tvitem; tvitem = new TreeViewItem() { Header = child.Name, Uid = child.Id.ToString() }; if (child.Name == _currentLocation.Name) { tvitem.FontWeight = FontWeights.Bold; } if (child.Printers != null) { TreeViewItem tvprnitem = new TreeViewItem() { Header = "Printers" }; tvprnitem.FontWeight = FontWeights.Regular; foreach (Printer sprinters in child.Printers) { TreeViewItem psubitem = new TreeViewItem() { Header = sprinters.Name, Uid = sprinters.Id.ToString() }; TreeViewItem psubitem1 = new TreeViewItem() { Header = String.Concat("UNC: ", sprinters.UNC) }; psubitem.Items.Add(psubitem1); tvprnitem.Items.Add(psubitem); } tvitem.Items.Add(tvprnitem); } if (child.Children != null) { foreach (Location loc in child.Children) { AddChildren(loc, ref tvitem); } } tvi.Items.Add(tvitem); }

This builds the tree correctly and all I have been asked to do is add an icon to the TreeViewItem. The icon will be a different depending on whether it is a location or a printer within that location.

I cannot see how to add icons to TreeViewItems can anyone point me in the right direction?

Why don't you use data bindings? It is much easier to work with WPF controls with bindings. — Dennis
– Dennis, Commented Nov 29, 2012 at 10:07
Yes but I was hoping adding an icon would be a small change. The whole app could do with a rewrite but time isnt on my side. — Fred
– Fred, Commented Nov 29, 2012 at 10:10

Fred · Accepted Answer · 2012-11-30 09:31:49Z

I solved this by changing this line

tvitem = new TreeViewItem() { Header = child.Name, Uid = child.Id.ToString() };

To

tvitem = GetTreeView(child.Id.ToString(), child.Name, "location.png");

Adding this function

 private TreeViewItem GetTreeView(string uid, string text, string imagePath) { TreeViewItem item = new TreeViewItem(); item.Uid = uid; item.IsExpanded = false; // create stack panel StackPanel stack = new StackPanel(); stack.Orientation = Orientation.Horizontal; // create Image Image image = new Image(); image.Source = new BitmapImage (new Uri("pack://application:,,/Images/" + imagePath)); image.Width = 16; image.Height = 16; // Label Label lbl = new Label(); lbl.Content = text; // Add into stack stack.Children.Add(image); stack.Children.Add(lbl); // assign stack to header item.Header = stack; return item; }

Worked perfectly.

It might be easier to use TextBlock instead, see the comment thread in this answer. it's strange but I noticed that TextBlock respects the theme's selection color for root nodes but Label does not.

Fred · Accepted Answer · 2015-02-25 12:17:53Z

Very nice. I just add this inside method wich return stack panel, to make code much readable:

private StackPanel CustomizeTreeViewItem(object itemObj) { // Add Icon // Create Stack Panel StackPanel stkPanel = new StackPanel(); stkPanel.Orientation = Orientation.Horizontal; // Create Image Image img = new Image(); img.Source = new BitmapImage(new Uri("pack://application:,,/Resources/control.png")); img.Width = 16; img.Height = 16; // Create TextBlock TextBlock lbl = new TextBlock(); lbl.Text = itemObj.ToString(); // Add to stack stkPanel.Children.Add(img); stkPanel.Children.Add(lbl); return stkPanel; }

and in treeView Initialization

// Assign stack to header item.Header = CustomizeTreeViewItem(itemObj);

Collectives™ on Stack Overflow

Adding Icon to TreeViewItem

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related