How do I access child ui elements of a ListBoxItem

How do I access child ui elements of a ListBoxItem

• msdn3mar

  I can get the reference to the ListBoxItems, but I cannot seem to get a reference to the UI elements generated within the ListBoxItems.  I want to raise a custom event on the elements within the ListBoxItem to trigger an animation.  EventTriggers (particularly Loaded) does not seem to fire on UI elements within the ListBoxItems generated via a DataTemplate.
  

• Segato

  Thanks for the answer...in the mean time I've decided to bind to an object that wraps the model object, but contains UI specific code.  It would be nice if eventually, everything UI specific could be created via XAML...allowing the designers to go wild.
  

• bmcat

  That is a very interesting scenario you came up with. Unfortunately today we don't have an easy way to get to the generated ListBoxItem's children in this scenario. Although we are trying to discourage people to do this, the only workaround I can think of is to walk the visual tree of the ListBoxItem by calling VisualOperations.GetChildren(...) recursively until you find the ContentPresenter with the Content set to the data item you want. Once you have the ContentPresenter, you can use the following code to get to a Grid inside the DataTemplate:
  
  DataTemplate myDataTemplate = (DataTemplate)this.Resources["myDataTemplate"];
  Grid myGrid = (Grid)myDataTemplate.FindName("myGrid", myContentPresenter);
  
  We will track this scenario though, and discuss possible ways that may make it easier. Thank you for making us aware of this.
  
  
  
  

• LouLny

  Hi Bea,
  
  thanks for your note about the ItemContainerGenerator, I've explored it but unfortunately I haven't found a solution for my problem. :(
  To answer your question: I'm not trying to find an Element in my DataModel, I'm looking for the UIElement which displays the Data...
  I also used the WinFX-Demo from Kevin Moore, which has a visual tree demo of a ListBox implemented.
  
  Here's the whole scenario:
  My DataObject:
  

  class DataItem
  {
  private String text;
  public String Text { get { return this.text; } set { this.text = value; } }
  private int number;
  public int Number { get { return this.number; } set { this.number = value; } }
  }
  
  

  I have a DataContainer which is inherited from ObservableCollection and which generates demo data. This Container is the ItemSource of my ListView:
  

  <ListView Name="list">
  <ListView.ItemsSource>
  <DataContainer/>
  </ListView.ItemsSource>
  <ListView.View>
  <GridView>
  <GridViewColumn Header="Number" CellTemplate="{StaticResource txtNumber}" />
  <GridViewColumn Header="Text" CellTemplate="{StaticResource txtText}" />
  </GridView>
  </ListView.View>
  </ListView>
  
  

  And there are also two DataTemplates:
  

  <DataTemplate x:Key="txtNumber">
  <chTextBlock Text="{Binding Path=Number}" />
  </DataTemplate>
  <DataTemplate x:Key="txtText">
  <chTextBlock Text="{Binding Path=Text}" />
  </DataTemplate>
  

  
  The chTextBlocks inside the templates have editing functionality and are inherited from TextBlock.
  And here's the big question again: How do I get a reference from the TextBlock in one template to the TextBlock in the other template to move the focus resp. switch the edit mode on SelectedItem and the ItemContainerGenerator serves me always references to my DataItem object, but not to the TextBlock(s). In this case, I have to walk the visual tree up, beginning at the focused element, and walk the vis tree down to the next element I want to edit, haven't I
  
  Sorry about, that I'm consuming so much time from you, I think you'd have better things to do... :)
  
  Greetings,
  cheesenhomer
  
  
  

• N.S. Farr

  Another scenario, for which I need to recover the inner controls in the datatemplate ...

  My DataTemplate is composed by a custom control I made. Each time the ListBoxItem is selected I need to start the animation of my custom control.

  Even worse, I cannot recover the data template easily since the user can override the DataTemplate defintion. So I cannot get it in the resources.

  I really hope in a drastic simplification of this basic tasks.

  Thanks!
  Raffaele

  
  
  

• anagram

  Hi Cheesenhomer,

  I made a sample with what I was trying to explain. My thoughts were pretty accurate for ListBox, but ListView is a little different.

  In a ListBox scenario, if you want to switch the DataTemplate of a particular data item, you could do the following:

  ListBoxItem lbi = (ListBoxItem)(lb.ItemContainerGenerator.ContainerFromItem(redmond));
  lbi.ContentTemplate = (DataTemplate)(this.Resources["nameTemplate2"]);
  

  First I used the ItemContainerGenerator to get the the ListBoxItem that wraps that data item. Once I have that, I can simply change the ContentTemplate property to display the data differently. No need to walk the visual tree.

  ListView is different though. This is what I did:

  ListViewItem lvi = (ListViewItem)(lv.ItemContainerGenerator.ContainerFromItem(redmond));
  Border bd = (Border)(VisualTreeHelper.GetChild(lvi, 0));
  GridViewRowPresenter rp = (GridViewRowPresenter)(VisualTreeHelper.GetChild(bd, 0));
  ContentPresenter cell1 = (ContentPresenter)(VisualTreeHelper.GetChild(rp, 0));
  cell1.ContentTemplate = (DataTemplate)(this.Resources["nameTemplate2"]);
  

  The difference here is that the ListViewItem wraps a whole line in the ListView, and I want to switch the DataTemplate of a particular cell only. The visual tree of ListViewItem is the following: ListViewItem - Border - GridViewRowPresenter - Cell1 + Cell2 .... I am able to get to the ListViewItem easily, by using the ItemContainerGenerator. The problem is that changing the DataTemplate here does not do what I want, so I had to walk the visual tree a little to get to the cell (ContentPresenter).

  This is not a big advantage over your solution, since I also need to walk the visual tree for the ListView scenario, but I thought I would explain it for future reference.

  A full sample with this can be found here: http://www.beacosta.com/Forum/ListViewVisualTree.zip

  And about your comment on me having better things to do... What is the advantage of me spending all my time working on what I believe is an awesome platform, in no one knows how to use it :) :)

  Bea

  
  
  

• Klaus Pr&amp;#252;ckl

  Hello,
  I think I have the same problem like inuwan (need to Access UI Elements inside a DataTemplate of a Listbox) and just want to know, if there is an easier way than walking through the Visual-Tree yet
  
  Greetings, Cheesenhomer
  
  

• John Arlen

  Hi Cheesenhomer :)

  No, we currently don't provide any other APIs for walking the visual tree, and are not planning to add any. Why do you need to access the UIElements inside the DataTemplate Such helpers would allow people to easily walk the visual tree in the ControlTemplate of our out of the box controls, which we don't want to encourage. The visual tree of our controls changes depending on the theme, and relying on that tree could cause your app to crash unexpectedly when the user switches theme.

  But given that, you may have a legitimate scenario that can not be solved without walking the visual tree. And if this is the case, we would love to hear about it.

  Let us know!

  Thanks,

  Bea

  
  
  

• Milind Vengurlekar

  Hi guys,

  This is really good feedback. We would like to fully understand the scenarios that can not be done without walking the visual tree. If you have a scenario that required you to do so, please explain it in this thread. This will help us plan better for the next version of Avalon.

  Thanks!

  Bea

  
  
  

• Tom Morrison

  Hi Cheesenhomer,

  Thanks for helping us understand your scenario. Our decision on where we go with the VisualTreeHelper depends a lot on what customers have to say about it, and on customer scenarios, so I appreciate you taking the time to let us know.

  But I have a question: In your scenario, couldn't you find the element above/below/... the current one from your data model If you had a way for your model to know that when obj1 is current (focused) and you go down, you get obj2, you could then easily find the container (ListBoxItem / ListViewItem) for obj2 - do you know about the ItemContainerGenerator Once you have a handle to that, you can modify the way your visual tree looks by switching template. Or, if it's only a small change, like displaying a border around the text, maybe you could even find a way to do this with Triggers/DataTriggers.

  Replying to your question, there are certain elements that differ in the visual tree of a Control from theme to theme but not all. For example, a button in the classic theme is square, while in XP theme the corners are a little rounded. Things like these are specified in the default ControlTemplate for Button. But there are certain fundamental elements that don't change, specifically the ones that have to do with behavior. Yes, a ListBox has a VirtualizingStackPanel and ListBoxItems with ContentPresenters for all themes, so you don't have to worry about that :)

  But if you're really curious about what the visual trees look like for our controls, I recommend you install Sparkle. You can easily look at the visual tree of controls with this tool.

  Thanks!

  Bea

  
  
  

• Luis Garavello

  Hi Bea,
  
  thanks for your answer. So, my task is to write DataGrid which is used to display and editing data. Sure, displaying data ist no problem when I use ListView or a ListBox. Editing is also easy when I'm using Textboxes instead of Textblocks. But my grid should also have an "Excel-like" keyboard-navigation. When the user is editing the cell content and press the tab-key, the focus should jump to the cell right aside, if he hits return the cell below should get focused. It should also be possible to navigate through the grid with the arrow keys.
  Now, my problem is when I'm using DataTemplates, a Textbox inside the template knows nothing about its neighour-boxes. Also the ListView knows nothing about its child UIElements which are displaying the dataobjects... The only way to get the neighbour elements is to walk through the visual tree.
  BUT:
  Did I understand it right, that the UIElements-order in the visual tree does change, when I'm changing the display theme Or will the Order be the same all the time, e.g. for a ListBox there is the following: VirutalizingStackPanel -> ListBoxItem -> Border -> ContentPresenter -> (UIElement which displays the Data)
  Please correct me if I'm wrong.
  
  Greetings
  Cheesenhomer
  
  

• Cyoung342

  Do you mean you want to get to the ListBoxItems (and their content) generated by a data bound ListBox If that is the case, please see my blog post in http://www.beacosta.com/Archive/2005_09_01_bcosta_archive.html with title "How can I get a ListBoxItem from a data bound ListBox "
  
  If this is not the scenario you are asking about, can you please explain a little bit more what you are trying to do
  
  Thank you.

  
  
  
• How do I access child ui elements of a ListBoxItem