Load on demand

[Emad Afaq]

How can I change the color of the loading icon when I expand a node and also is there any way I can use custom Icons based on different levels of the tree in "Load on demand"

[Lakshmi Natarajan]

Hi Emad, 

 

Thank you for contacting Syncfusion support. 

  

TreeView does not support customizing the LoadOnDemand busy indicator. You can achieve your requirement by hiding the default expander by setting ExpanderWidth as Zero. Then defining the expander UI in ItemTemplate itself and load custom busy indicator. We were currently validating the query and provide you further details on tomorrow (December 24, 2019). We appreciate your patience until then. 

  

Regards, 

Lakshmi Natarajan 

[Lakshmi Natarajan]

Hi Emad, 

 

We have checked the reported query from our end. We would like to let you know that we have prepared sample by customizing SfBusyIndicator in TreeView ItemTemplate. The application works fine in UWP and iOS platforms, but we faced issue in Android. We are currently validating the same and provide you the details on or before December 30, 2019. We appreciate your patience until then. 

 

Sample link: Sample 

 

Regards, 

Lakshmi Natarajan 

[Emad Afaq]

Hi 

Thank you very much, I will be waiting for your response. I am currently focusing on android with Xamarin Forms

The other question I asked about custom Icons is that i want each level to have some custom icon

For example

<static Icon> Level 1

             <static different icon> Level 2

                          <static different icon> Level 3

In each level all the icons are the same. They only differ on different levels.

So first question about activity indicator I understood and will be waiting for the your response. Second one is mentioned above in detail.

[Lakshmi Natarajan]

Hi Emad, 

  

We would like to let you know that TreeView allows to use custom icons for different level. You can use converter to achieve your requirement like below code snippet, 

  

<Image Source="{Binding Level, 

                Converter={StaticResource ExpanderIconConverter}}" 

       IsVisible="{Binding HasChildNodes, 

                   Converter={StaticResource ExpanderIconVisibilityConverter}, 

                   ConverterParameter={x:Reference grid}}" 

                                   VerticalOptions="Center" 

                                   HorizontalOptions="Center" 

                                   HeightRequest="35" 

                                   WidthRequest="35"/> 

  

public class ExpanderIconConverter : IValueConverter 

    { 

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 

        { 

            Assembly assembly = typeof(App).GetTypeInfo().Assembly;          

            if ((int)value == 0) 

                return ImageSource.FromResource("GettingStartedBound.Icons.collapse.png", assembly); 

            else if ((int)value == 1) 

                return ImageSource.FromResource("GettingStartedBound.Icons.plus.png", assembly); 

            else 

                return ImageSource.FromResource("GettingStartedBound.Icons.minus.png", assembly); 

        } 

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 

        { 

            throw new NotImplementedException(); 

        } 

    } 

  

We have attached the sample for your reference. 

  

Sample link: CustomIconSample 

  

Regards, 

Lakshmi Natarajan 

[Emad Afaq]

Hi, Thank you for your support.

When i changed only one value of the icon to a custom one Like below, in converter class,

            if ((int)value == 0)

                return ImageSource.FromResource("GettingStartedBound.Icons.iconepic.png", assembly);

            else if ((int)value == 1)

                return ImageSource.FromResource("GettingStartedBound.Icons.plus.png", assembly);

            else

                return ImageSource.FromResource("GettingStartedBound.Icons.minus.png", assembly);

It gave me the following :

Please advise 

It doesn't show any icon.

[Emad Afaq]

I have attached the sample code with few edits.

I think I am missing out on some basic stuff, please advise.

The icon "epic" is what i want to be displayed but it doesnt show but reverting is back to the icon you are using works fine. Is it something related to icon format etc? 

Thanks.


Xaml:

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="GettingStartedBound.GettingStatred"

             xmlns:local="clr-namespace:GettingStartedBound"

             xmlns:treeview="clr-namespace:Syncfusion.XForms.TreeView;assembly=Syncfusion.SfTreeView.XForms"

             xmlns:sfbusyindicator="clr-namespace:Syncfusion.SfBusyIndicator.XForms;assembly=Syncfusion.SfBusyIndicator.XForms">

    <ContentPage.BindingContext>

        <local:MusicInfoRepository x:Name="viewModel"/>

    </ContentPage.BindingContext>

    <ContentPage.Resources>

        <ResourceDictionary>

            

            <local:ExpanderIconConverter x:Key="ExpanderIconConverter" />

        </ResourceDictionary>

    </ContentPage.Resources>

    <ContentPage.Content>

        <treeview:SfTreeView x:Name="treeView"

                             Indentation="40"

                             ItemHeight="40"

                             ExpanderWidth="10"

                             ExpandActionTarget="Node"

                             AutoExpandMode="None"

                             ItemTemplateContextType="Node"

                             LoadOnDemandCommand="{Binding TreeViewOnDemandCommand}"

                             ItemsSource="{Binding Menu}">

            <treeview:SfTreeView.ItemTemplate>

                <DataTemplate>

                    <Grid x:Name="grid" Padding="5,5,5,5" RowSpacing="0" BackgroundColor="White">

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="50" />

                            <ColumnDefinition Width="*" />

                        </Grid.ColumnDefinitions>

                        <Grid Grid.Column="1" RowSpacing="1"

                                      Padding="1,0,0,0"

                                      VerticalOptions="Center">

                            <Label LineBreakMode="NoWrap" TextColor="Black" HeightRequest="50"

                                           Text="{Binding Content.ItemName}" FontSize="20"

                                           VerticalTextAlignment="Center">

                            </Label>

                        </Grid>

                        <Grid Grid.Column="0">

                            <Image Source="{Binding Level, Converter={StaticResource ExpanderIconConverter}}"

                                   

                                   VerticalOptions="Center"

                                   HorizontalOptions="Center"

                                   HeightRequest="35"

                                   WidthRequest="35">

                                

                            </Image>

                            

                        </Grid>

                    </Grid>

                </DataTemplate>                

            </treeview:SfTreeView.ItemTemplate>

        </treeview:SfTreeView>

    </ContentPage.Content>

</ContentPage>

This is the Converter:

using Syncfusion.TreeView.Engine;

using System;

using System.Collections.Generic;

using System.Globalization;

using System.Linq;

using System.Reflection;

using System.Text;

using System.Threading.Tasks;

using Xamarin.Forms;

namespace GettingStartedBound

{

    public class ExpanderIconConverter : IValueConverter

    {

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

        {

            Assembly assembly = typeof(App).GetTypeInfo().Assembly;

            if ((int)value == 0)

                return ImageSource.FromResource("GettingStartedBound.Icons.epic.png", assembly); // This is the change

            else if ((int)value == 1)

                return ImageSource.FromResource("GettingStartedBound.Icons.plus.png", assembly);

            else

                return ImageSource.FromResource("GettingStartedBound.Icons.minus.png", assembly);

        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

        {

            throw new NotImplementedException();

        }

    }

    public class ExpanderIconVisibilityConverter : IValueConverter

    {

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

        {

            var treeViewNode = (parameter as Grid).BindingContext as TreeViewNode;

            if ((bool)value && !treeViewNode.ShowExpanderAnimation)

                return true;

            if (treeViewNode.ShowExpanderAnimation)

                return false;

            else

                return false;

            //return ((bool)value) ? false : true;

        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

        {

            throw new NotImplementedException();

        }

    }

    public class IndicatorColorConverter : IValueConverter

    {

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

        {

            return (int)value == 0 ? Color.Red : Color.Green;

        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

        {

            throw new NotImplementedException();

        }

    }

    public class ImageRotationConverter : IValueConverter

    {

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

        {

            return 90;

        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

        {

            throw new NotImplementedException();

        }

    }

}

Icon is attached

Attachment: epic_2047bc2e.zip

[Emad Afaq]

Ignore all my codes which I mentioned earlier. I managed to do it with the following:

Enabling images as embedded resource  

Binding to use Content.ItemName instead of ItemName (In my app I was using Item in the binding, but when changed to Content,ItemName then the Icons and text showed otherwise it was only icons). 

So ItemTemplateContextType="Node" was only showing Icons where as ItemTemplateContextType="Item" was showing only Label

I will go through the documentation to understand their difference

Thank you very much for the support. 

[Lakshmi Natarajan]

Hi Emad, 

 

We have checked the reported issue “Handling visibility for BusyIndicator loaded inside TreeView ItemTemplate does not work properly in Android” and logged issue report for the same. We will fix the issue and include the issue fix in our next Weekly Nuget release update which is planned to roll out on January 21, 2020. We appreciate your patience until then. 

  

You can track the status of this report through the following feedback link, 

https://www.syncfusion.com/feedback/11018 

  

Note: The provided feedback link is private, you need to login to view this feedback. 

 

Regards, 

Lakshmi Natarajan 

[Lakshmi Natarajan]

Hi Emad, 

 

Sorry for the inconvenience caused. 

 

Currently, we are analyzing the reported issue and due to its complexity we are still working on it. We will fix and include the issue fix in our upcoming Volume 4 – SP1 release which is planned to roll out on the end of January 2020. We will appreciate your patience until then. 

 

Please let us know if you need patch before release. 

 

Regards, 

Lakshmi Natarajan 

[Lakshmi Natarajan]

Hi Emad, 

 

Sorry for the delay caused. 

 

We would like to inform you that the reported issue `Handling visibility for BusyIndicator loaded inside TreeView ItemTemplate does not work properly in Android` is a framework issue and we have logged the bug report for the same. Kindly refer the following report for further reference from below for further updates.  

  

Bug report: https://github.com/xamarin/Xamarin.Forms/issues/9354 

 

Meanwhile, we suggest you to set RowDefinition for the Grid as Auto and handle visibility for BusyIndicator like below code snippet, 

 

Xaml: 

 

<treeview:SfTreeView x:Name="treeView" 

                     ExpanderWidth="0" 

                     Indentation="40" 

                     ItemTemplateContextType="Node" 

                     QueryNodeSize="TreeView_QueryNodeSize" 

                     LoadOnDemandCommand="{Binding TreeViewOnDemandCommand}" 

                     ItemsSource="{Binding Menu}"> 

  <treeview:SfTreeView.ItemTemplate> 

     <DataTemplate> 

       <Grid x:Name="grid" Padding="5,5,5,5" RowSpacing="0" BackgroundColor="White"> 

          <Grid.ColumnDefinitions> 

            <ColumnDefinition Width="*" /> 

            <ColumnDefinition Width="50" /> 

          </Grid.ColumnDefinitions> 

          <Grid.RowDefinitions> 

            <RowDefinition Height="Auto"/> 

          </Grid.RowDefinitions> 

          <Grid RowSpacing="1" 

                Padding="1,0,0,0" 

                VerticalOptions="Center"> 

          <Label LineBreakMode="NoWrap" TextColor="Black" 

                 Text="{Binding Content.ItemName}" FontSize="20" 

                 VerticalTextAlignment="Center"> 

          </Label> 

        </Grid> 

        <Grid Grid.Column="1"> 

          <Grid.RowDefinitions> 

             <RowDefinition Height="Auto"/> 

          </Grid.RowDefinitions> 

          <Image Source="{Binding IsExpanded, Converter={StaticResource ExpanderIconConverter}}" 

                 IsVisible="{Binding HasChildNodes, Converter={StaticResource ExpanderIconVisibilityConverter}, ConverterParameter={x:Reference grid}}" 

                 VerticalOptions="Center" 

                 HorizontalOptions="Center" 

                 HeightRequest="35" 

                 WidthRequest="35"> 

             <Image.GestureRecognizers> 

                 <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" /> 

             </Image.GestureRecognizers> 

           </Image> 

           <Grid IsVisible="{Binding ShowExpanderAnimation, Mode=TwoWay}" RowSpacing="0"> 

              <sfbusyindicator:SfBusyIndicator x:Name="grid1" IsVisible="True" 

                                                TextColor="{Binding Level, Converter={StaticResource IndicatorColorConverter}}" 

                                                IsBusy="True" 

                                                Margin="2" BackgroundColor="White" 

                                                ViewBoxHeight="25"  ViewBoxWidth="25" 

                                                HeightRequest="32"  AnimationType="SingleCircle"/> 

            </Grid> 

          </Grid> 

        </Grid> 

       </DataTemplate>                

   </treeview:SfTreeView.ItemTemplate> 

</treeview:SfTreeView>  

 

 

We have modified the sample with workaround. Please find the sample in the following link, 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/150136/ze/GettingStartedBound1847884214 

 

Regards, 

Lakshmi Natarajan