UWP Tip #8 - UWP Community Toolkit - Part 6, Using the VisualTree and LogicalTree UI Helpers

Welcome back to the UWP Community Toolkit series. Previous Tips in the UWP Community Toolkit series:

• Part 1, What's in the Box?
• Part 2, Consuming the Services
• Part 3, Leveraging Code Helpers (Color, Connection, Converters and ImageCache)
• Part 4, Leveraging the StorageFiles and Storage Code Helpers
• Part 5, Using the Streams Code Helper

Introduction

This tip will continue exploring the Code Helpers that we started looking at in Part 3. There are only a few types of helpers remaining, and today we will examine the collection of available VisualTree and LogicalTree UI extension methods.

VisualTree Extensions

The VisualTree extension methods extend and simplify the built-in UI element navigation methods of the framework. There are currently five methods available to use in the toolkit.

• FindDescendantByName(elementName) - Navigates down the visual tree until an element with the provided name is found.
• FindDescendant<T>() - Navigates down the visual tree and returns the first element for the given type.
• FindDescendants<T>() - Returns an IEnumerable of all descendant elements of the given type.
• FindAscendantByName(elementName) - Navigates up the visual tree until an element with the provided name is found.
• FindAscendant<T>() - Navigates up the visual tree and returns the first element for the given type.

Here is an example of the use of each method to retrieve UI elements from your visual tree.

public void ProcessVisualUiElements()
{
    var listControl = mainGrid.FindDescendantByName("resultList");

     listControl = mainGrid.FindDescendant<ListView>();

     listControl.MaxWidth = 500;

     foreach (var item in mainGrid.FindDescendants<ListViewItem>())
    {
        item.IsEnabled = false;
    }

     var gridControl = resultList.FindAscendantByName("mainGrid");

     gridControl = resultList.FindAscendant<Grid>();

     gridControl.Margin = new Thickness() { Bottom = 2, Left = 2, Right = 2, Top = 4 };
}

Most UWP developers will probably use the FindAscendant/FindDescendant methods using the type of element to find as we try to avoid naming our UI elements.

LogicalTree Extensions

The LogicalTree extensions are very similar but they operate over logical elements, ignoring certain containers and style elements only found in the visual tree. Not having to rely on knowing if the elements have been rendered yet before finding them can be an advantage of this method also.
The set of methods available mirror those for the visual tree with one additional method to find an element's content control.

• FindChildByName(elementName)
• FindChild<T>()
• FindChildren<T>()
• FindParentByName(elementName)
• FindParent<T>()
• GetContentControl()

The sample code also mirrors the previous sample.

public void ProcessLogicalUiElements()
{
    var listControl = mainGrid.FindChildByName("resultList");
    
    listControl = mainGrid.FindChild<ListView>();
    
    foreach (var item in resultList.FindChildren<ListViewItem>())
    {
        item.IsEnabled = true;
    }
    
    var gridControl = resultList.FindParentByName("mainGrid");
    
    gridControl = resultList.FindParent<Grid>();
    
    var searchContent = searchTextBox.GetContentControl();
}

Wrap-Up

That's all for today's helpers! They're very straightforward to use and can save quite a bit of manually traversing the visual and logical trees to find a target element. Check back as next time we will finish up the helpers provided by the UWP Community Toolkit.
Happy coding!

del.icio.us Tags: uwp community toolkit,uwp,xaml