ExpanderTemplate malfunction

Hello, I have spent some time trying to fix this but my conclusion is that this requires a fix.

I have a tree and can see which item is currently selected, and I want to change the colour if an item is currently selected/pressed on.

The ItemSelectorTemplate is working as intended, and switch colour correctly. This contain the item-text, and the ExpanderTemplate contains the expander-icon.

I use labels for the ItemSelectorTemplate, and triggers to detect and change colour. ExpanderTemplate does not allow labels to change the default icon, even if, this would not solve the issue. A trigger on a label does not fire correctly when used in the ExpanderTemplate, the trigger works correctly in ItemSelectorTemplate.

If I use FontImageSource, I can change the icon in ExpanderTemplate, but without a built in way to trigger a change. I managed to build my own, but this solution suffer from the same problem that occur when using a label with trigger (cannot change icon) ; the colour of the icon is not correctly changing.

Case:

Expander is now using labels for visual purpose, cannot change icon when using a label in ExpanderTemplate. When a Expander-icon is not selected it is green. The text (ItemSelectorTemplate) and colour is False and white, indicating it is not selected.

I now selecting the top expander-item (whole row).

Expected result:

The text change to True from false, the text colour turns red from white and the expander-icon background turns red from green.

Actual result:

The text and text colour from the ItemSelectorTemplate change correctly, but not the background of the Expander-icon. This should change to red colour since there is a clear indication that the item is selected. The ItemSelectorTemplate and ExpanderTemplate are using the same binding.

Image_4519_1698304444248


Case:

I expand the top expander and move down to the first child (which is a expander).

Expected result:

The text and textcolour on the expander-item on the top level changes back to False and white text colour. The expander icon shall be green since it is no longer selected (should had been red when it was selected). The new selected item's text and colour shall be True and red colour, and the icon shall be red.

Actual result:

The top-expander is now triggered and changes colour. The new selected item changes text and text colour correctly, but not the expander background. When expanding the new item, it turns red.

Image_7440_1698304160905


Summary: ​The text and text colour in ItemSelectorTemplate consistently change correctly. The ExpanderTemplate is not behaving and changes incorrectly. When the label has been triggered it cannot be reversed and stays red, when its supposed to return to green colour when not selected. This is with a label using style/datatriggers. I get the same result when I use a fontimagesouce and a custom-made trigger. The color stays red and does not convert when the item is not longer selected, and only turns red when using the expander and not selecting it.

Even though the entire item-row it selected, the ExpanderTemplate is only responding when actually using the expander. The ItemTemplateSelector is responding when targeting the row, as intended.

If you attempt to recreate this, set the expander-icon color to white and black instead. This will further demonstrate why this is a problem.


12 Replies 1 reply marked as answer

SY Suthi Yuvaraj Syncfusion Team October 27, 2023 01:42 PM UTC

Hi David Ellerblad Valtonen,

We have checked the reported scenario "ExpanderTemplate malfunction", we are able to reproduce the issue at our end. We are in need of two or more working days to validate the issue at our end. We will update you with further details on or before  November 1,2023. We will appreciate your patience until then.

Regards,

Suthi Yuvaraj



RM RiyasHameed MohamedAbdulKhader Syncfusion Team November 1, 2023 01:48 PM UTC

David Ellerblad Valtonen,

We have reviewed your reported query and, after conducting our analysis, we would like to inform you that you can achieve your requirement by using a converter to change the TextColor property of the Label within the Expander template when the Expander item is selected. You can accomplish this by using a property in the ViewModel to maintain the selected item and changing the TextColor using the converter based on the property value in the ViewModel.

We have prepared a sample that includes a Label within the Expander template, which changes its color when the Expander item is selected. We have attached this sample for your reference.





Attachment: WorkingSample_b64f671b.zip


DE David Ellerblad Valtonen November 2, 2023 08:56 AM UTC

We're using compiled bindings which seems to brake the functionality. 

I've updated the expander template with compiled binding as follows, this wont trigger the converter other than when pressing the actual expander 

<DataTemplate x:DataType="treeviewengine:TreeViewNode">
    <Grid BindingContext="{Binding Content}">
        <Label Text="+"
               FontSize="Medium"
               VerticalOptions="Center"
               HorizontalOptions="Center"
               TextColor="{Binding IsSelected, Converter={StaticResource converter}}" x:DataType="model:FileManager"/>
    </Grid>
</DataTemplate>



DE David Ellerblad Valtonen November 3, 2023 12:55 PM UTC

I have an issue with colors when changing UserAppTheme. AppThemeBinding consistently set the Background and TextColor correctly. When using a binding (e.g. IsSelected), the color does not change correctly. 

<treeView:SfTreeView.ExpanderTemplate>
    <DataTemplate >
        <Grid>
            <Label
                Text="+"
                FontSize="Small"
                VerticalTextAlignment="Center"
                BackgroundColor="{AppThemeBinding Light=Black, Dark=White}"
                TextColor="{Binding Content.IsSelected, Converter={StaticResource converter}}"
            />
        </Grid>
    </DataTemplate>
</treeView:SfTreeView.ExpanderTemplate>

Dark-mode TextColor:                      Light-mode TextColor:

Selected: Red                                     Selected: Orange

Not selected: Green                          Not selected: Blue

Image_2472_1699015586323  --change-theme-->  Image_4985_1699015616291

Background correctly changed color, but not TextColor. Result after each item has been selected;

Image_2017_1699015687159

The TextColor should change in same the way as background.




AK Ananthalakshmi Kannan Syncfusion Team November 3, 2023 01:56 PM UTC

Hi David Ellerblad Valtonen,


For the ExpanderTemplate elements, in source level we set TreeViewNode as BindingContext. Within the TreeViewNode class, we maintain a "Content" property, which holds the Business object. To properly apply the binding, it should be directed at Content.IsSelected.


Please refer to the code snippet below:

TextColor="{Binding Content.IsSelected, Converter={StaticResource converter}}" />



In sample level you have you have set BindingContext for the Grid. Setting the BindingContext for the Grid may not have the intended effect in this context and it's not the recommended approach.


Please apply the mentioned changes and let me know if it resolves the issue. 


Also we found your query regarding "TextColor not changing properly". We will validate this issue and provide you with further details on November 6,2023.





AK Ananthalakshmi Kannan Syncfusion Team November 6, 2023 03:08 PM UTC

Hi David Ellerblad Valtonen,


The issue you're facing is related to how the BackgroundColor and TextColor properties are being set in your XAML code.

In your Label element, you have BackgroundColor set using AppThemeBinding and TextColor is bound directly to Content.IsSelected with the help of a converter.

The BackgroundColor set using AppThemeBinding is correctly adjusting based on the app theme (light or dark). However, the TextColor is bound to Content.IsSelected. This means that the color will be determined by the result of the binding converter, and it won't be influenced by the app theme change.



DE David Ellerblad Valtonen November 9, 2023 08:42 AM UTC

Thank you for your help. I still experience one issue that is connected to the reported issues above. 

When setting the ItemHeight, either directly through ItemHeightProperty or using QueryNodeSize, to a height of 20 or less, a bug is generated and the app crash. 

In the WorkingSample this is hit:

#if DEBUG && !DISABLE_XAML_GENERATED_BREAK_ON_UNHANDLED_EXCEPTION
            UnhandledException += (sender, e) =>
            {
                if (global::System.Diagnostics.Debugger.IsAttached) global::System.Diagnostics.Debugger.Break();
            };
#endif

In a different project the following is generated:

System.Exception: Only one clip operation currently supported.
   at Microsoft.Maui.Graphics.Win2D.W2DCanvasState.ClipPath(PathF path, WindingMode windingMode)
   at Microsoft.Maui.Graphics.Win2D.W2DCanvas.ClipPath(PathF path, WindingMode windingMode)
   at Syncfusion.Maui.TreeView.ExpanderView.OnDraw(ICanvas canvas, RectF rect)
   at Syncfusion.Maui.Core.SfView.Microsoft.Maui.Graphics.IDrawable.Draw(ICanvas canvas, RectF dirtyRect)
   at Microsoft.Maui.Graphics.Win2D.W2DGraphicsView.OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
   at ABI.Windows.Foundation.TypedEventHandler`2.Do_Abi_Invoke[TSenderAbi,TResultAbi](Void* thisPtr, TSenderAbi sender, TResultAbi args)

 I also get a: 

 

System.Runtime.InteropServices.COMException (0x80004005): Unspecified error.


These exceptions are generated regardless of a custom expander, and only seem to trigger to a item height that is under a specific threshold. The errors only seem to trigger when clicking on a item, not when navigating/expanding or collapsing through the keyboard.




AK Ananthalakshmi Kannan Syncfusion Team November 10, 2023 01:07 PM UTC

Hi David Ellerblad Valtonen,


We have tested the reported issue and tried to set the item height through ItemHeight property and using QueryNodeSize event, but the sample is working fine at our end. Here we have attached the working sample for your reference , could you please review sample and share any specification required to reproduce issue? This information will assist us in precisely recreating the scenario and identifying the root cause of the problem.


Attachment: WorkingSample_ffa0cd35.zip


DE David Ellerblad Valtonen November 16, 2023 10:21 AM UTC

Hello, 

I believe I have managed to make it easier for you to recreate the issue. 


<treeView:SfTreeView x:Name="treeView"
                     ChildPropertyName="SubFiles"
                     ItemsSource="{Binding ImageNodeInfo}"
                     ItemTemplateContextType="Node"
                     FullRowSelect="True"
                     ItemHeight="20"
                     NodeExpanded="TreeView_OnNodeExpanded"
                     NodeCollapsed="TreeView_OnNodeCollapsed"
                     Grid.Column="1"
                     SelectionChanged="treeView_SelectionChanged">

    <treeView:SfTreeView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid x:Name="grid"
          RowSpacing="0"
          BackgroundColor="Transparent">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="1" />
                    </Grid.RowDefinitions>


                    <Grid RowSpacing="0"
              Grid.Row="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="40" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="100" />
                        </Grid.ColumnDefinitions>


                        <Grid Padding="5,5,5,5">
                            <Image Source="{Binding Content.ImageIcon}"
                       VerticalOptions="Center"
                       HorizontalOptions="Center"
                       HeightRequest="15"
                       WidthRequest="15" />
                        </Grid>
                        <Grid Grid.Column="1"
                  RowSpacing="1"
                  Padding="1,0,0,0"
                  VerticalOptions="Center">
                            <Label Text="{Binding Content.ItemName}"
                       VerticalTextAlignment="Center" />
                        </Grid>
                    </Grid>
                    <Grid Grid.Column="2"
              RowSpacing="1"
              Padding=".1,.1,.5,.1"
              VerticalOptions="Center">
                    </Grid>
                    <StackLayout Grid.Row="1"
                     HeightRequest="1" />
                </Grid>
            </ViewCell>
        </DataTemplate>
    </treeView:SfTreeView.ItemTemplate>
</treeView:SfTreeView>


I have removed the custom expander and is using the standard expander. My issue is now occurring frequently when the item height is set to my desired value; 20. 

The exception is also occurring in another project when a custom expander is used, but I cannot manage to recreate the exception with the custom exception here, using the project you shared with me. 




RM RiyasHameed MohamedAbdulKhader Syncfusion Team November 17, 2023 02:16 PM UTC

David Ellerblad Valtonen,

We have investigated your reported query and successfully reproduced the issue on our end. Currently, we are in the process of validating the problem at the source level. We anticipate providing you with an update on November 22, 2023. We appreciate your patience until then.




RM RiyasHameed MohamedAbdulKhader Syncfusion Team November 23, 2023 01:32 PM UTC

David Ellerblad Valtonen,

We have analyzed the reported query, and after our analysis, it seems that the corner clipping is applied when the TreeView item is given a minimum height. We have logged a bug report regarding the reported issue 'Application Crashes when tapping on the expander icon'. We plan to address and fix this issue in our upcoming weekly NuGet release scheduled for December 19, 2023. We will notify you once it is released with the fix, and we appreciate your patience until then.

You can also track the status of the report using the following link:

Feedback Link: https://www.syncfusion.com/feedback/48728/application-crashes-when-tapping-on-the-expander-icon
Please note that the inclusion of this solution in the weekly release may be subject to change due to various factors, including QA checks and work reprioritization.



Marked as answer

RM RiyasHameed MohamedAbdulKhader Syncfusion Team January 2, 2024 02:13 PM UTC

David Ellerblad Valtonen,

We have fixed the reported issue Application Crashes when tapping on the expander icon and included the issue fix in our latest NuGet release update version 24.1.41 which is available for download (https://www.nuget.org/).  

 

We thank you for your support and appreciate your patience in waiting for this update. Please get in touch with us if you require any further assistance.



Loader.
Up arrow icon