It´s possible to the Icon go to the end of the other stacklayout ?

[Marcelo]

I mean:

Istead of having the Arrow in the same line just changing Arrow Up and Arrow Down, when the user clicks to Expand, the arrow moves to the end of the expanded stack. When the user click to Collapse, it goes back to the Top.

Is it possible with SfExpander?

[Lakshmi Natarajan]

Hi Marcelo, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “Move the ExpanderIcon to the botton” from our end. We would like to inform you that you can achieve your requirement in sample level by using custom font icons.  

 

You can refer the following document to use custom font icons in SfExpander from the following link, 

KB link: https://www.syncfusion.com/kb/11469/how-to-use-a-custom-font-icon-for-expander-in-xamarin-forms-sfexpander 

 

Please refer the following code snippets for your requirement, 

 

Xaml: 

Using converter to handle Visibility and Icon for the Expander. 

<ContentPage.Resources> 

        <ResourceDictionary> 

            <OnPlatform x:TypeArguments="x:String" x:Key="ExpanderIcon"> 

                <On Platform="Android" Value="ExpanderIcons.ttf#ExpanderIcons" /> 

                <On Platform="UWP" Value="/Assets/ExpanderIcons.ttf#ExpanderIcons" /> 

                <On Platform="iOS" Value="ExpanderIcons" /> 

            </OnPlatform> 

        </ResourceDictionary> 

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

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

    </ContentPage.Resources> 

 

<syncfusion:SfExpander x:Name="expander1" HeaderIconPosition="None"> 

                    <syncfusion:SfExpander.Header> 

                        <Grid HeightRequest="50"> 

                            <Grid.ColumnDefinitions> 

                                <ColumnDefinition Width="50"/> 

                                <ColumnDefinition Width="*"/> 

                            </Grid.ColumnDefinitions> 

                            <Label HorizontalOptions="Center" VerticalOptions="Center" 

                                FontFamily="{StaticResource ExpanderIcon}" 

                                   IsVisible="{Binding Path=IsExpanded, Source={x:Reference expander1}, Converter={StaticResource ExpanderVisibilityConverter}, ConverterParameter=Header}"  

                                Text="{Binding Path=IsExpanded,Source={x:Reference expander1}, Converter={StaticResource ExpanderIconConverter}, ConverterParameter={x:Static Device.RuntimePlatform}}"/> 

                            <Label Text="Veg Pizza" Grid.Column="1" TextColor="#495F6E"  VerticalTextAlignment="Center" /> 

                        </Grid> 

                    </syncfusion:SfExpander.Header> 

                    <syncfusion:SfExpander.Content> 

                        <Grid BackgroundColor="#FFFFFF"> 

                            <Grid.ColumnDefinitions> 

                                <ColumnDefinition Width="50"/> 

                                <ColumnDefinition Width="*"/> 

                            </Grid.ColumnDefinitions> 

                            <Label HorizontalOptions="Center" VerticalOptions="Center" 

                                   FontFamily="{StaticResource ExpanderIcon}"  

                                   IsVisible="{Binding Path=IsExpanded,Source={x:Reference expander1}, Converter={StaticResource ExpanderVisibilityConverter}, ConverterParameter=Content}"  

                                   Text="{Binding Path=IsExpanded,Source={x:Reference expander1}, Converter={StaticResource ExpanderIconConverter}, ConverterParameter={x:Static Device.RuntimePlatform}}"/> 

                            <Label BackgroundColor="#FFFFFF" HeightRequest="50" Grid.Column="1" Text="Veg pizza is prepared with the items that meet vegetarian standards by not including any meat or animal tissue products." TextColor="#303030" VerticalTextAlignment="Center"/> 

                        </Grid> 

                    </syncfusion:SfExpander.Content> 

                </syncfusion:SfExpander> 

 

Converter: Handle the visibility of the Header and Content based on the IsExpanded property. 

public class ExpanderVisibilityConverter : IValueConverter 

{ 

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

    { 

        if ((string)parameter == "Header") 

            return (bool)value ? false : true; 

        else 

            return (bool)value ? true : false; 

    } 

 

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

    { 

        throw new NotImplementedException(); 

    } 

} 

 

We have prepared sample based on your requirement and attached in the following link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/1543112010471416 

 

Screenshot 

 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan