How to change the icon of a node when expanding in UWP TreeView

Question

I would like to use the Microsoft.UI.Xaml.Controls TreeView Class in my UWP app.
I have been following the examples located at: tree-view
I would like to create a TreeView of all the sub-folders under my Pictures folder, similar to the "A TreeView with ItemTemplateSelector" example in the XAML Controls Gallery.
As I navigate through the tree, opening and closing folders, I would like to update the folder icon to show that it is open, (expanded) or closed, (collapsed).
While I can do this for a wpf app, it's proving to be a challenge for my UWP app.
Can you help?

Answer 1

Hello, Welcome to Micorosoft Q&A,

I would like to update the folder icon to show that it is open, (expanded) or closed, (collapsed).

For your requirement, you could use image converter to selector open folder icon or folder icon base on the TreeViewItem's IsExpanded property

<local:ImageConverter x:Key="ImageConverter" />  
  
<DataTemplate x:Key="FolderTemplate" x:DataType="local:ExplorerItem">  
    <TreeViewItem  
        x:Name="FolderItem"  
        AutomationProperties.Name="{x:Bind Name}"  
        IsSelected="{x:Bind IsSelected, Mode=TwoWay}"  
        ItemsSource="{x:Bind Children}">  
        <StackPanel Orientation="Horizontal">  
            <Image Width="20" Source="{Binding ElementName=FolderItem, Path=IsExpanded, Converter={StaticResource ImageConverter}}" />  
            <TextBlock Margin="0,0,10,0" />  
            <TextBlock Text="{x:Bind Name}" />  
        </StackPanel>  
    </TreeViewItem>  
</DataTemplate>  

Converter

class ImageConverter : IValueConverter  
{  
    public object Convert(object value, Type targetType, object parameter, string language)  
    {  
        var image = string.Empty;  
        var flag = (bool)value;  
        if (flag)  
        {  
            return image = "ms-appx:///Assets/openfolder.jpg";  
  
        }  
        else  
        {  
            return image = "ms-appx:///Assets/folder.png";  
        }  
    }  
  
    public object ConvertBack(object value, Type targetType, object parameter, string language)  
    {  
        throw new NotImplementedException();  
    }  
}  

Complete xaml

<Page.Resources>  
    <local:ImageConverter x:Key="ImageConverter" />  
    <DataTemplate x:Key="FolderTemplate" x:DataType="local:ExplorerItem">  
        <TreeViewItem  
            x:Name="FolderItem"  
            AutomationProperties.Name="{x:Bind Name}"  
            IsSelected="{x:Bind IsSelected, Mode=TwoWay}"  
            ItemsSource="{x:Bind Children}">  
            <StackPanel Orientation="Horizontal">  
                <Image Width="20" Source="{Binding ElementName=FolderItem, Path=IsExpanded, Converter={StaticResource ImageConverter}}" />  
                <TextBlock Margin="0,0,10,0" />  
                <TextBlock Text="{x:Bind Name}" />  
            </StackPanel>  
        </TreeViewItem>  
    </DataTemplate>  
  
    <DataTemplate x:Key="FileTemplate" x:DataType="local:ExplorerItem">  
        <TreeViewItem  
            AllowDrop="False"  
            AutomationProperties.Name="{x:Bind Name}"  
            DragEnter="TreeViewItem_DragEnter"  
            DragOver="TreeViewItem_DragOver"  
            IsExpanded="False"  
            IsSelected="{x:Bind IsSelected, Mode=TwoWay}">  
            <TreeViewItem.ContextFlyout>  
                <MenuFlyout>  
                    <MenuFlyoutItem Text="Accept">  
                        <MenuFlyoutItem.Icon>  
                            <SymbolIcon Symbol="Accept" />  
                        </MenuFlyoutItem.Icon>  
                    </MenuFlyoutItem>  
                    <MenuFlyoutItem Text="Delete">  
                        <MenuFlyoutItem.Icon>  
                            <SymbolIcon Symbol="Delete" />  
                        </MenuFlyoutItem.Icon>  
                    </MenuFlyoutItem>  
                    <MenuFlyoutItem Text="Add">  
                        <MenuFlyoutItem.Icon>  
                            <SymbolIcon Symbol="Add" />  
                        </MenuFlyoutItem.Icon>  
                    </MenuFlyoutItem>  
                </MenuFlyout>  
            </TreeViewItem.ContextFlyout>  
            <StackPanel Orientation="Horizontal">  
                <Image Width="20" Source="../Assets/file.png" />  
                <TextBlock Margin="0,0,10,0" />  
                <TextBlock Text="{x:Bind Name}" />  
            </StackPanel>  
        </TreeViewItem>  
    </DataTemplate>  
  
    <local:ExplorerItemTemplateSelector  
        x:Key="ExpolrerItemTemplateSelector"  
        FileTemplate="{StaticResource FileTemplate}"  
        FolderTemplate="{StaticResource FolderTemplate}" />  
</Page.Resources>  
<Grid>  
    <TreeView  
        x:Name="TreeDataBound"  
        HorizontalAlignment="Center"  
        VerticalAlignment="Center"  
        CanDragItems="True"  
        ItemTemplateSelector="{StaticResource ExpolrerItemTemplateSelector}"  
        ItemsSource="{x:Bind DataSource, Mode=OneWay}"  
        SelectionMode="Single" />  
    <Button  
        VerticalAlignment="Bottom"  
        Click="Button_Click"  
        Content="Order" />  
</Grid>  

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.