Custom Tree View in WPF with Disappearing Icons and Virtualization Issues.

Question

Custom Tree View in WPF with Disappearing Icons and Virtualization Issues.

CH Rashid Ebad 0

I am working a WPF desktop application where I have implemented Tree View using ListBox control. My ListBox has two StackPanels - one for content and the other for auto-display icons. It has horizontal and vertical scroll as well. Please note there is a ScrollOffsetConverter class, which calculate and assign Right Margin to Stack Panel containing to Icon. During expanding or collapsing of List Items sometimes icons either disappears or shift to the right and horizontal scrollbar disappear. However, scrolling up or down vertically bring icons back.

If I set VirtualizingPanel.IsVirtualizing="False" to the List Box, then icon stops disappearing again on scroll / expanding collapsing. However, this solution not suitable in our case. Because we large data collection which we want to bind. I have seen VirtualizingPanel.IsVirtualizing="False" only work well with very small number of items.

Icon shifted to right and horizontal scroll disappeared.
Sample Project Source code is below:
https://github.com/rashidebad/TestProject.Wpf.V3/tree/main
TreeView_Icon_Issue

  <StackPanel
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
        <ListBox
            DataContext="{Binding SimpleTreeViewModel, Mode=OneTime}"
            Style="{DynamicResource TreeStyle}"
            Width="250"
            Height="500" VirtualizingPanel.IsVirtualizing="False">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <StackPanel Orientation="Horizontal">
                            <ContentControl
                            Style="{DynamicResource TreeItemIdentStyle}"/>
                            <Label
                            Style="{DynamicResource LabelStyle}"
                            Background="Transparent"
                            Content="{Binding Caption, Mode=OneWay}"/>
                        </StackPanel>
                        <StackPanel
                        Style="{DynamicResource AutoShowStyle}">
                            <Border 
                            BorderBrush="Gray"
                            Background="LightGray"
                            BorderThickness="1">
                                <Thumb
                                Style="{StaticResource ListDraggableThumbStyle}"/>
                            </Border>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </StackPanel>

Hui Liu-MSFT 48,651 Reputation points Microsoft External Staff

2023-08-14T09:53:34.7+00:00

Hi,@Rashid Ebad .Welcome Microsoft Q&A.

These types of layout and rendering issues can sometimes be caused by the asynchronous nature of WPF's rendering engine, especially when dealing with complex interactions like scroll offset calculations and dynamic visibility changes.

Here are a few suggestions you could try to troubleshoot the issue:

Update UI Synchronously: WPF rendering and layout calculations happen asynchronously. When using complex interactions, like dynamically updating margins based on scroll offsets, it's possible for visual glitches to occur. You might want to consider updating the UI synchronously using Dispatcher.Invoke within your converter to ensure that calculations and updates happen in a predictable order.

Ensure Accurate Calculation: Double-check your calculations in the ScrollOffsetConverter. Make sure the calculations are correct and that the values you're using to set margins are as expected.

LayoutTransform: Instead of adjusting margins, consider using the LayoutTransform property on your icon StackPanel. This can provide more predictable results when applying transformations to UI elements.

Simplify the Layout: Temporarily simplify your layout to see if the issue persists. Remove any additional styles, templates, or complex components to see if that resolves the problem.

CH Rashid Ebad 0

Hi @Hui Liu-MSFT

Thanks for your response, I tried Dispatcher.Invoke inside ScrollOffsetConverter.cs but still same issue.
https://github.com/rashidebad/TestProject.Wpf.V3/blob/main/TestProject.Wpf.Demo/ScrollOffsetConverter.cs

public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)               {            
 Application.Current.Dispatcher.Invoke(() =>         
    {             
if (values != null && values.Length >= 2 && values[0] is double value0 && values[1] is double value1)                        			{                
 return new Thickness { Right = value0 - value1 };
   }             
 });            
  return new Thickness { Right = 0 };          
 }
    ```

Hui Liu-MSFT 48,651 Reputation points Microsoft External Staff

2023-08-24T05:40:33.58+00:00

Hi,@Rashid Ebad .I'm testing the project and trying to find the cause of the problem, I'll come back with any update. You could also share the solution if you find one.

Your answer

Hui Liu-MSFT 48,651 Reputation points Microsoft External Staff

2023-08-14T09:53:34.7+00:00

Hi,@Rashid Ebad .Welcome Microsoft Q&A.

These types of layout and rendering issues can sometimes be caused by the asynchronous nature of WPF's rendering engine, especially when dealing with complex interactions like scroll offset calculations and dynamic visibility changes.

Here are a few suggestions you could try to troubleshoot the issue:

Update UI Synchronously: WPF rendering and layout calculations happen asynchronously. When using complex interactions, like dynamically updating margins based on scroll offsets, it's possible for visual glitches to occur. You might want to consider updating the UI synchronously using Dispatcher.Invoke within your converter to ensure that calculations and updates happen in a predictable order.

Ensure Accurate Calculation: Double-check your calculations in the ScrollOffsetConverter. Make sure the calculations are correct and that the values you're using to set margins are as expected.

LayoutTransform: Instead of adjusting margins, consider using the LayoutTransform property on your icon StackPanel. This can provide more predictable results when applying transformations to UI elements.

Simplify the Layout: Temporarily simplify your layout to see if the issue persists. Remove any additional styles, templates, or complex components to see if that resolves the problem.
CH Rashid Ebad 0 Reputation points

2023-08-22T11:50:41.21+00:00

Hi @Hui Liu-MSFT

Thanks for your response, I tried Dispatcher.Invoke inside ScrollOffsetConverter.cs but still same issue.
https://github.com/rashidebad/TestProject.Wpf.V3/blob/main/TestProject.Wpf.Demo/ScrollOffsetConverter.cs

public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) { Application.Current.Dispatcher.Invoke(() => { if (values != null && values.Length >= 2 && values[0] is double value0 && values[1] is double value1) { return new Thickness { Right = value0 - value1 }; } }); return new Thickness { Right = 0 }; } ```
Hui Liu-MSFT 48,651 Reputation points Microsoft External Staff

2023-08-24T05:40:33.58+00:00

Hi,@Rashid Ebad .I'm testing the project and trying to find the cause of the problem, I'll come back with any update. You could also share the solution if you find one.

Share via

Custom Tree View in WPF with Disappearing Icons and Virtualization Issues.

Your answer