项目作者: SyncfusionExamples

项目描述 :
How to customize header icon in Xamarin.Forms Expander (SfExpander)?
高级语言: C#
项目地址: git://github.com/SyncfusionExamples/expander-header-icon-customization-xamarin.git


How to customize header icon in Xamarin.Forms Expander (SfExpander)?

You can customize the Xamarin.Forms SfExpander header icon in the SfExpander.Header elements using the converter.

You can also refer the following article.

https://www.syncfusion.com/kb/11378/how-to-customize-header-icon-in-xamarin-forms-expander-sfexpander

XAML

Binding the IsExpanded property to show different icons to expand and collapse. Set HeaderIconPosition to None to hide the default header icon.

  1. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  2. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  3. xmlns:local="clr-namespace:ExpanderXamarin"
  4. xmlns:syncfusion="clr-namespace:Syncfusion.XForms.Expander;assembly=Syncfusion.Expander.XForms"
  5. x:Class="ExpanderXamarin.MainPage">
  6. <ContentPage.Resources>
  7. <ResourceDictionary>
  8. <local:ExpanderIconConverter x:Key="ExpanderIconConverter"></local:ExpanderIconConverter>
  9. </ResourceDictionary>
  10. </ContentPage.Resources>
  11. <ContentPage.Content>
  12. <ScrollView BackgroundColor="#EDF2F5">
  13. <StackLayout>
  14. <syncfusion:SfExpander x:Name="expander1" HeaderIconPosition="None">
  15. <syncfusion:SfExpander.Header>
  16. <Grid HeightRequest="50">
  17. <Label Text="Veg Pizza" TextColor="#495F6E" VerticalTextAlignment="Center" Margin="10,0,0,0"></Label>
  18. <Image Margin="10" HorizontalOptions="End" Source="{Binding IsExpanded,Source={x:Reference expander1},Converter={StaticResource ExpanderIconConverter}}"></Image>
  19. </Grid>
  20. </syncfusion:SfExpander.Header>
  21. <syncfusion:SfExpander.Content>
  22. <Grid Padding="10,10,10,10" BackgroundColor="#FFFFFF">
  23. <Label BackgroundColor="#FFFFFF" HeightRequest="50" 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"></Label>
  24. </Grid>
  25. </syncfusion:SfExpander.Content>
  26. </syncfusion:SfExpander>
  27. </StackLayout>
  28. </ScrollView>
  29. </ContentPage.Content>
  30. </ContentPage>

C#

Return image based on the IsExpanded property value.

  1. namespace ExpanderXamarin
  2. {
  3. public class ExpanderIconConverter : IValueConverter
  4. {
  5. public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  6. {
  7. if ((bool)value)
  8. return ImageSource.FromResource("ExpanderXamarin.Images.ArrowDown.png");
  9. else
  10. return ImageSource.FromResource("ExpanderXamarin.Images.ArrowUp.png");
  11. }
  12. public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
  13. {
  14. throw new NotImplementedException();
  15. }
  16. }
  17. }

Output

HeaderIconCustomization