Collapse/Expand image icon in Expander's header

ron123 1 Reputation point
2021-01-07T03:38:28.497+00:00

I am designing a page where I need to add expanders programmatically with every button click. In the expander's header, I want to show an image icon that displays the expand/collapse state. The expander is getting created without any problem, but the image icon representing Expand/collapse state is not working accurately.

I expect the Expander header to initially show "Icon_Expand.png", as shown below:
54177-initial.png

When a user clicks on the expander, the image should be replaced with "Icon_Collapse.png", as shown below:
54147-expanded.png

The image icon changes for the first time to "Icon_Collapse.png" when I expand, but then it doesn't change back at all. I have posted the sample code below. Can somebody please guide what's wrong/missing?

 private Expander getNewExpander()  
        {  
            Entry EntryName = new Entry  
            {  
                Text = "",  
                MinimumWidthRequest = 50,  
                Placeholder = "Enter Name",  
                FontSize = 16,  
                VerticalOptions = LayoutOptions.Center  
            };  
  
            DataTrigger dTrigger = new DataTrigger(typeof(Image));  
            Binding b = new Binding();  
            b.Source = new RelativeBindingSource(RelativeBindingSourceMode.FindAncestor, typeof(Expander));  
            b.Path = "IsExpanded";  
            dTrigger.Binding = b;  
            dTrigger.Value = true;  
            Setter setterTrigger = new Setter();  
            setterTrigger.Property = Image.SourceProperty;  
            setterTrigger.Value = "Icon_Collapse.png";  
            dTrigger.Setters.Add(setterTrigger);  
  
            Image imgExpandCollapse = new Image  
            {  
                Source = "Icon_Expand.png",  
                HorizontalOptions = LayoutOptions.End,  
                VerticalOptions = LayoutOptions.CenterAndExpand,  
                HeightRequest = 30  
            };  
            imgExpandCollapse.Triggers.Add(dTrigger);  
  
            StackLayout stackHeader = new StackLayout  
            {  
                Orientation = StackOrientation.Horizontal,  
                Spacing = 5  
            };  
            stackHeader.Children.Add(EntryName);  
            stackHeader.Children.Add(imgExpandCollapse);  
  
            Expander expander = new Expander  
            {  
                Header = stackHeader  
            };  
            StackLayout stackExpanderContent = new StackLayout();  
            Entry entryDetails = new Entry  
            {  
                Text = "",  
                Placeholder = "Enter Position",  
                FontSize = 16,  
                VerticalOptions = LayoutOptions.Center  
            };  
            stackExpanderContent.Children.Add(entryDetails);  
            expander.Content = stackExpanderContent;  
  
            return expander;  
        }  
Developer technologies .NET Xamarin
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.