In the .NET MAUI Expander, you can customize the ripple effects applied when tapping the header by modifying the theme key resources for the Expander. XAML To disable the ripple effect, set the ripple background to transparent within your XAML file. <ContentPage xmlns:syncfusion="clr- namespace:Syncfusion.Maui.Expander;assembly=Syncfusion.Maui.Expander" xmlns:syncTheme="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core" x:Class="ExpanderMAUI.MainPage"> <ContentPage.Resources> <syncTheme:SyncfusionThemeDictionary> <syncTheme:SyncfusionThemeDictionary.MergedDictionaries> <ResourceDictionary> <x:String x:Key="SfExpanderTheme">CustomTheme</x:String> <Color x:Key="SfExpanderHeaderRippleBackground">Transparent</Color> </ResourceDictionary> </syncTheme:SyncfusionThemeDictionary.MergedDictionaries> </syncTheme:SyncfusionThemeDictionary> </ContentPage.Resources> </ContentPage > Download the complete sample from GitHub. Conclusion I hope you enjoyed learning how to disable the ripple effect in the header of .NET MAUI Expander. You can refer to our .NET MAUI Expander feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Explore our .NET MAUI Expander example to understand how to create and manipulate data. Check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The .NET MAUI SfExpander is a versatile component that can be used within a FlyoutPage to create collapsible sections. XAML Load the SfExpander in the Flyout of the FlyoutPage. <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ExpanderMaui.Views.ExpanderFlyoutMaster" xmlns:syncfusion="clr-namespace:Syncfusion.Maui.Expander;assembly=Syncfusion.Maui.Expander" Title="Menu"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="150"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid BackgroundColor="#f54291" HeightRequest="150" Padding="20" Grid.Row="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="70"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Image Source="userimage.png" HeightRequest="70" WidthRequest="70" Margin="10,10,10,10"/> <Label Text="John" Grid.Column="1" FontSize="Large" VerticalOptions="Center" HorizontalOptions="Start" Padding="20"/> </Grid> <ScrollView BackgroundColor="#EDF2F5" VerticalScrollBarVisibility="Always" Grid.Row="1"> <StackLayout> <syncfusion:SfExpander HeaderIconPosition="End"> <syncfusion:SfExpander.Header> <Grid HeightRequest="50"> <Grid.ColumnDefinitions> <ColumnDefinition Width="50"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Image Source="home.png" HeightRequest="25" WidthRequest="25" HorizontalOptions="Center" VerticalOptions="Center"/> <Label Text="Home" Grid.Column="1" TextColor="#495F6E" VerticalTextAlignment="Center" /> </Grid> </syncfusion:SfExpander.Header> <syncfusion:SfExpander.Content> <StackLayout Padding="10,10,10,10" BackgroundColor="#FFFFFF"> <Label HeightRequest="50" Text="Tasks" TextColor="#303030" VerticalTextAlignment="Center"/> <Label HeightRequest="50" Text="Settings" TextColor="#303030" VerticalTextAlignment="Center"/> </StackLayout> </syncfusion:SfExpander.Content> </syncfusion:SfExpander> </StackLayout> </ScrollView> </Grid> </ContentPage> OUTPUT: View sample in GitHub CONCLUSION: I hope you enjoyed learning about how to work with SfExpander in flyout page. You can refer to our .NET MAUI Expander feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our .NET MAUI Expander example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can customize the expander header icon with font icons in .NET MAUI Expander. Please follow the steps below to use the font icons in the Expander Header element. Step 1: Place the .ttf file in the project and set the Build action to MauiFont. Step 2: Create a ResourceDictionary to define the custom font as a StaticResource. <ContentPage.Resources> <ResourceDictionary> <OnPlatform x:TypeArguments="x:String" x:Key="ExpanderIcon"> <On Platform="Android" Value="ExpanderIcons.ttf#ExpanderIcons" /> <On Platform="WinUI" Value="ExpanderIcons.ttf#ExpanderIcons" /> <On Platform="iOS" Value="ExpanderIcons" /> <On Platform="MacCatalyst" Value="ExpanderIcons"/> </OnPlatform> </ResourceDictionary> <local:ExpanderIconConverter x:Key="ExpanderIconConverter"/> </ContentPage.Resources> Step 3: Bind the FontFamily for Label using resource key. Use converter to display icons based on IsExpanded. Set HeaderIconPosition as None to hide the default Header icon. <ContentPage.Content> <ScrollView BackgroundColor="#EDF2F5"> <StackLayout> <syncfusion:SfExpander x:Name="expander1" HeaderIconPosition="None"> <syncfusion:SfExpander.Header> <Grid HeightRequest="50"> <Grid.ColumnDefinitions> <ColumnDefinition Width="70"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Label HorizontalOptions="Center" VerticalOptions="Center" FontFamily="{StaticResource ExpanderIcon}" Text="{Binding Path=IsExpanded,Source={x:Reference expander1}, Converter={StaticResource ExpanderIconConverter}}"/> <Label Text="Veg Pizza" Grid.Column="1" TextColor="#495F6E" VerticalTextAlignment="Center" /> </Grid> </syncfusion:SfExpander.Header> <syncfusion:SfExpander.Content> <Grid Padding="10" BackgroundColor="#FFFFFF"> <Label BackgroundColor="#FFFFFF" HeightRequest="60" 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> <syncfusion:SfExpander x:Name="expander2" HeaderIconPosition="None"> <syncfusion:SfExpander.Header> <Grid HeightRequest="50"> <Grid.ColumnDefinitions> <ColumnDefinition Width="70"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Label HorizontalOptions="Center" VerticalOptions="Center" FontFamily="{StaticResource ExpanderIcon}" Text="{Binding Path=IsExpanded,Source={x:Reference expander2}, Converter={StaticResource ExpanderIconConverter}, ConverterParameter={x:Static Device.RuntimePlatform}}"/> <Label Text="Non-veg Pizza" Grid.Column="1" TextColor="#495F6E" VerticalTextAlignment="Center" /> </Grid> </syncfusion:SfExpander.Header> <syncfusion:SfExpander.Content> <Grid Padding="10" BackgroundColor="#FFFFFF"> <Label Text="Non-veg pizza is prepared by including the meat and animal tissue products." HeightRequest="50" TextColor="#303030" VerticalTextAlignment="Center"/> </Grid> </syncfusion:SfExpander.Content> </syncfusion:SfExpander> </StackLayout> </ScrollView> </ContentPage.Content> Step 4: Converter to display icon. public class ExpanderIconConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { if ((bool)value) { return "\ue700"; } else { return "\ue701"; } } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } Output Download the complete sample on GitHub Conclusion I hope you enjoyed learning how to use a custom font icon for a header in .NET MAUI (SfExpander). You can refer to our .NET MAUI Expander feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Explore our .NET MAUI Expander example to understand how to create and manipulate data. Check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls. Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can customize the .NET MAUI Expander header icon in the SfExpander.Header elements using the converter. XAML Binding the IsExpanded property to show different icons to expand and collapse. Set HeaderIconPosition to None to hide the default header icon. <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:syncfusion="clr-namespace:Syncfusion.Maui.Expander;assembly=Syncfusion.Maui.Expander" xmlns:local="clr-namespace:ExpanderMAUI" x:Class="ExpanderMAUI.MainPage"> <ContentPage.Resources> <ResourceDictionary> <local:ExpanderIconConverter x:Key="ExpanderIconConverter"/> </ResourceDictionary> </ContentPage.Resources> <ScrollView BackgroundColor="#EDF2F5" Padding="0,30,0,0"> <StackLayout> <syncfusion:SfExpander x:Name="expander1" HeaderIconPosition="None"> <syncfusion:SfExpander.Header> <Grid HeightRequest="50"> <Label TextColor="#495F6E" Text="Veg Pizza" Padding="5,0,0,0" /> <Image Margin="10" HorizontalOptions="End" Source="{Binding IsExpanded,Source={x:Reference expander1},Converter={StaticResource ExpanderIconConverter}}" HeightRequest="20" WidthRequest="20"/> </Grid> </syncfusion:SfExpander.Header> <syncfusion:SfExpander.Content> <Grid Padding="10,10,10,10"> <Label TextColor="#303030" Text="Veg pizza is prepared with the items that meet vegetarian standards by not including any meat or animal tissue products." HeightRequest="50" VerticalTextAlignment="Center" /> </Grid> </syncfusion:SfExpander.Content> </syncfusion:SfExpander> <syncfusion:SfExpander x:Name="expander2" HeaderIconPosition="None"> <syncfusion:SfExpander.Header> <Grid HeightRequest="50"> <Label TextColor="#495F6E" Text="Non-veg Pizza" Padding="5,0,0,0" /> <Image Margin="10" HorizontalOptions="End" Source="{Binding IsExpanded,Source={x:Reference expander2},Converter={StaticResource ExpanderIconConverter}}" HeightRequest="20" WidthRequest="20"/> </Grid> </syncfusion:SfExpander.Header> <syncfusion:SfExpander.Content> <Grid Padding="10,10,10,10"> <Label TextColor="#303030" Text="Non-veg pizza is prepared by including the meat and animal tissue products." HeightRequest="50" VerticalTextAlignment="Center" /> </Grid> </syncfusion:SfExpander.Content> </syncfusion:SfExpander> </StackLayout> </ScrollView> </ContentPage> C# Create a converter to return an image based on the IsExpanded property. public class ExpanderIconConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { if ((bool)value) return "arrowdown.png"; else return "arrowup.png"; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } Output: Download the complete sample on GitHub Conclusion I hope you have enjoyed learning how to customize the header icon in .NET MAUI Expander. You can refer to our .NET MAUI Expander feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can center align the text of the Expander Header in .NET MAUI Expander using the custom header view as shown in the code snippet below. XAML: Set HorizontalTextAlignment and VerticalTextAlignment of the header label to Center. <ScrollView BackgroundColor="#EDF2F5" Padding="0,30,0,0"> <StackLayout> <syncfusion:SfExpander> <syncfusion:SfExpander.Header> <Grid HeightRequest="50"> <Label Text="Veg Pizza" TextColor="#495F6E" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> </Grid> </syncfusion:SfExpander.Header> <syncfusion:SfExpander.Content> <Grid Padding="10,10,10,10" BackgroundColor="#FFFFFF"> <Label BackgroundColor="#FFFFFF" HeightRequest="60" 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> <syncfusion:SfExpander> <syncfusion:SfExpander.Header> <Grid HeightRequest="50"> <Label Text="Non-veg Pizza" TextColor="#495F6E" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> </Grid> </syncfusion:SfExpander.Header> <syncfusion:SfExpander.Content> <Grid Padding="10,10,10,10" BackgroundColor="#FFFFFF"> <Label Text="Non-veg pizza is prepared by including the meat and animal tissue products." HeightRequest="50" TextColor="#303030" VerticalTextAlignment="Center"/> </Grid> </syncfusion:SfExpander.Content> </syncfusion:SfExpander> </StackLayout> </ScrollView> Output: Download the complete sample on GitHub Conclusion: I hope you enjoyed learning how to center-align the Expander header text in .NET MAUI Expander. You can refer to our .NET MAUI Expander feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can populate data from WebAPI and populate the fetched data in the Xamarin.Forms SfTreeView. STEP 1: Install the ModernHttpClient and Newtonsoft.Json NuGet packages in the shared code project. STEP 2: Retrieve data from the Web service Define the HTTPClient to retrieve information from the web server for a specified url using the GetAsync method. Use the HTTPContent.ReadAsStringAsync method to read the retrieved data into string format. Using, JsonConvert.DeserializeObject method, convert the JSON string to ObservableCollection. internal class WebApiServices { public static string webApiUrl = "https://ej2services.syncfusion.com/production/web-services/api/Orders"; // Your Web Api here System.Net.Http.HttpClient client; public WebApiServices() { client = new System.Net.Http.HttpClient(); } /// <summary> /// Retrieves data from the web service. /// </summary> /// <returns>Returns the ObservableCollection.</returns> public async System.Threading.Tasks.Task<ObservableCollection<RootTree>> RefreshDataAsync() { var uri = new Uri(webApiUrl); try { //Sends request to retrieve data from the web service for the specified Uri var response = await client.GetAsync(uri); if (response.IsSuccessStatusCode) { var content = await response.Content.ReadAsStringAsync(); //Returns the response as JSON string return JsonConvert.DeserializeObject<ObservableCollection<RootTree>>(content); //Converts JSON string to ObservableCollection } } catch (Exception ex) { System.Diagnostics.Debug.WriteLine(@"ERROR {0}", ex.Message); } return null; } } STEP 3: Create Xamarin.Forms application with SfTreeView Define SfTreeView bound to the ViewModel collection. You can populate child items using the LoadOnDemandCommand in SfTreeView. You can refer to the LoadOnDemand document from here. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:syncfusion="clr-namespace:Syncfusion.XForms.TreeView;assembly=Syncfusion.SfTreeView.XForms" xmlns:SfButtons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms" xmlns:local="clr-namespace:TreeViewXamarin" x:Class="TreeViewXamarin.MainPage"> <ContentPage.BindingContext> <local:CountriesViewModel x:Name="viewModel"/> </ContentPage.BindingContext> <StackLayout> <syncfusion:SfTreeView x:Name="treeView" ItemTemplateContextType="Node" ItemsSource="{Binding CountriesInfo}" CheckBoxMode="Recursive" CheckedItems="{Binding CheckedItems}" LoadOnDemandCommand="{Binding TreeViewOnDemandCommand}"> <syncfusion:SfTreeView.ItemTemplate> <DataTemplate> <Grid Padding="5"> <SfButtons:SfCheckBox x:Name="CheckBox" Text="{Binding Content.Name}" IsChecked="{Binding IsChecked, Mode=TwoWay}" VerticalOptions="CenterAndExpand"/> </Grid> </DataTemplate> </syncfusion:SfTreeView.ItemTemplate> </syncfusion:SfTreeView> </StackLayout> </ContentPage> STEP 4: Populate data to collection In the ViewModel class, initialize the WebService and populate the data by invoking the GetDataAsync method in the LoadOnDemand execute method. public class EmployeeManagerViewModel : INotifyPropertyChanged { WebApiServices webApiServices; public ICommand TreeViewOnDemandCommand { get; set; } public EmployeeManagerViewModel() { webApiServices = new WebApiServices(); TreeViewOnDemandCommand = new Command(ExecuteOnDemandLoading, CanExecuteOnDemandLoading); GetParentNodes(); } /// <summary> /// CanExecute method is called before expanding and initialization of node. Returns whether the node has child nodes or not. /// Based on return value, expander visibility of the node is handled. /// </summary> /// <param name="sender">TreeViewNode is passed as default parameter </param> /// <returns>Returns true, if the specified node has child items to load on demand and expander icon is displayed for that node, else returns false and icon is not displayed.</returns> private bool CanExecuteOnDemandLoading(object sender) { return ((sender as TreeViewNode).Content as Employee).HasChildNodes; } /// <summary> /// Execute method is called when any item is requested for load-on-demand items. /// </summary> /// <param name="obj">TreeViewNode is passed as default parameter </param> private void ExecuteOnDemandLoading(object obj) { var node = obj as TreeViewNode; // Skip the repeated population of child items when every time the node expands. if (node.ChildNodes.Count > 0) { node.IsExpanded = true; return; } //Animation starts for expander to show progressing of load on demand node.ShowExpanderAnimation = true; Device.BeginInvokeOnMainThread(async () => { //Fetching child items to add var items = await GetDataAsync(); await Task.Delay(500); // Populating child items for the node in on-demand node.PopulateChildNodes(items); if (items.Count() > 0) //Expand the node after child items are added. node.IsExpanded = true; //Stop the animation after load on demand is executed, if animation not stopped, it remains still after execution of load on demand. node.ShowExpanderAnimation = false; }); } /// <summary> /// Gets data from the web service and return the collection of fetched data. /// </summary> private async Task<ObservableCollection<Countries>> GetDataAsync() { var rootItems = await webApiServices.RefreshDataAsync(); return this.ProcessChildData(rootItems); } /// <summary> /// Processe the fetched data with child items. /// </summary> /// <param name="rootData">Data fetched from the web service.</param> /// <returns>Returns the processed data for child nodes.</returns> private ObservableCollection<Countries> ProcessChildData(ObservableCollection<RootTree> rootData) { var details = new ObservableCollection<Countries>(); var random = new Random(); var employees = rootData.Where(x => x.EmployeeID == random.Next(1, 10)).GroupBy(x => x.ShipCity).Select(y => y.First()).ToList<RootTree>(); foreach (var item in employees) { var child = new Countries() { Name = item.ShipCity }; //Added CheckedItems to check multiple items through binding. if (item.Verified == "true") { CheckedItems.Add(child); } details.Add(child); } return details; } } View sample in GitHub
UWP TreeGrid (SfTreeGrid) does not provide the direct support to change the position of Node CheckBox in TreeGridExpanderCell. You can change the position of Node CheckBox by overriding the TreeGridExpanderCell Template in UWP TreeGrid (SfTreeGrid). <Page.Resources> <syncfusion1:BoolToVisiblityConverter x:Key="VisiblityConverter" /> <ControlTemplate x:Key="ValidationToolTipTemplate"> <Grid x:Name="PART_ToolTipPresenter" Margin="5,0" Opacity="0" RenderTransformOrigin="0,0"> <Grid.RenderTransform> <TranslateTransform x:Name="Transform" X="-25" /> </Grid.RenderTransform> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="OpenStates"> <VisualStateGroup.Transitions> <VisualTransition GeneratedDuration="0" /> <VisualTransition GeneratedDuration="0:0:0.2" To="Opened"> <Storyboard> <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="Transform" Storyboard.TargetProperty="X" To="0"> <DoubleAnimation.EasingFunction> <BackEase Amplitude=".3" EasingMode="EaseOut" /> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="PART_ToolTipPresenter" Storyboard.TargetProperty="Opacity" To="1" /> </Storyboard> </VisualTransition> </VisualStateGroup.Transitions> <VisualState x:Name="Closed"> <Storyboard> <DoubleAnimation Duration="0" Storyboard.TargetName="PART_ToolTipPresenter" Storyboard.TargetProperty="Opacity" To="0" /> </Storyboard> </VisualState> <VisualState x:Name="Opened"> <Storyboard> <DoubleAnimation Duration="0" Storyboard.TargetName="Transform" Storyboard.TargetProperty="X" To="0" /> <DoubleAnimation Duration="0" Storyboard.TargetName="PART_ToolTipPresenter" Storyboard.TargetProperty="Opacity" To="1" /> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border Margin="4,4,-4,-4" Background="#052A2E31" CornerRadius="5" /> <Border Margin="3,3,-3,-3" Background="#152A2E31" CornerRadius="4" /> <Border Margin="2,2,-2,-2" Background="#252A2E31" CornerRadius="3" /> <Border Margin="1,1,-1,-1" Background="#352A2E31" CornerRadius="2" /> <Border Background="#FFDC000C" CornerRadius="2" /> <Border CornerRadius="2"> <TextBlock MaxWidth="250" Margin="8,4,8,4" Foreground="White" Text="{TemplateBinding Tag}" TextWrapping="Wrap" UseLayoutRounding="false" /> </Border> </Grid> </ControlTemplate> <Style TargetType="syncfusion:TreeGridExpanderCell"> <Setter Property="Background" Value="Transparent" /> <Setter Property="BorderThickness" Value="0,0,1,1" /> <Setter Property="BorderBrush" Value="Gray" /> <Setter Property="Padding" Value="0" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="syncfusion:TreeGridExpanderCell"> <Grid x:Name="Root"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="IndicationStates"> <VisualState x:Name="NoError" /> <VisualState x:Name="HasError"> <VisualState.Setters> <Setter Target="PART_InValidCellBorder.Visibility" Value="Visible" /> </VisualState.Setters> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="CurrentStates"> <VisualState x:Name="Regular" /> <VisualState x:Name="Current"> <VisualState.Setters> <Setter Target="PART_CurrentCellBorder.Visibility" Value="Visible" /> </VisualState.Setters> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="FooterStates"> <VisualState x:Name="NormalCell" /> <VisualState x:Name="FrozenColumnCell"/> <VisualState x:Name="FooterColumnCell"> <Storyboard BeginTime="0"> <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="1" Storyboard.TargetName="PART_FooterCellBorder" Storyboard.TargetProperty="BorderThickness"> <DiscreteObjectKeyFrame KeyTime="0" Value="1,0,1,1" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="BeforeFooterColumnCell"> <Storyboard BeginTime="0"> <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="1" Storyboard.TargetName="PART_FooterCellBorder" Storyboard.TargetProperty="BorderThickness"> <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,1" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="1" Storyboard.TargetName="PART_GridCellBorder" Storyboard.TargetProperty="BorderThickness"> <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,1" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border x:Name="PART_FooterCellBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/> <Border x:Name="PART_GridCellBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <Grid Margin="{TemplateBinding IndentMargin}"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="18" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <syncfusion:TreeGridExpander x:Name="PART_ExpanderCell" Grid.Column="1" Width="16" Height="16" Margin="2,1,0,1" HorizontalAlignment="Center" VerticalAlignment="Center" IsExpanded="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsExpanded, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=HasChildNodes, Converter={StaticResource VisiblityConverter}, Mode=TwoWay}" /> <CheckBox Name="PART_SelectCheckBox" Grid.Column="0" Width="16" Height="16" MinWidth="22" Margin="2,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" IsEnabled="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsCheckBoxEnabled, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" IsTabStop="False" IsThreeState="True" Visibility="{Binding Path=ColumnBase.Renderer.TreeGrid.ShowCheckBox, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource VisiblityConverter}, Mode=TwoWay}" /> <Grid Grid.Column="2" Margin="2,0,0,0"> <ContentPresenter /> <Border x:Name="PART_CurrentCellBorder" Margin="1,0,0,0" Background="Transparent" BorderBrush="{TemplateBinding CurrentCellBorderBrush}" BorderThickness="{TemplateBinding CurrentCellBorderThickness}" IsHitTestVisible="False" Visibility="Collapsed" /> <Border x:Name="PART_InValidCellBorder" Width="10" Height="10" HorizontalAlignment="Right" VerticalAlignment="Top" Visibility="Collapsed"> <ToolTipService.ToolTip> <ToolTip Background="#FFDB000C" Placement="Right" Tag="{TemplateBinding ErrorMessage}" Template="{StaticResource ValidationToolTipTemplate}" /> </ToolTipService.ToolTip> <Path Data="M0.5,0.5 L12.652698,0.5 12.652698,12.068006 z" Fill="Red" Stretch="Fill" /> </Border> </Grid> </Grid> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Page.Resources> The following screenshot shows the position of Node checkbox changed in UWP TreeGrid (SfTreeGrid),Take a moment to peruse the UWP TreeGrid - Node CheckBox documentation, where you can find about Node CheckBox with code examples. Please refer this link to know about the essential features of UWP TreeGrid. You can download the example from GitHub
You can load the SfListView with SfExpander in Xamarin.Forms. C# Extend the SfListView to load the ListView based on the items height. Trigger the PropertyChanged event for VisualContainer and set HeightRequest for ListView using the TotalExtent value. public class ExtendedListView : SfListView { VisualContainer container; public ExtendedListView() { container = this.GetVisualContainer(); container.PropertyChanged += Container_PropertyChanged; } private void Container_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e) { Device.BeginInvokeOnMainThread(async () => { var extent = (double)container.GetType().GetRuntimeProperties().FirstOrDefault(container => container.Name == "TotalExtent").GetValue(container); await Task.Delay(250); if (e.PropertyName == "Height") this.HeightRequest = extent; }); } } XAML Load the ExtendedListView inside the Expander.Content. <ScrollView> <StackLayout> <expander:SfExpander DynamicSizeMode="Content" HeaderIconPosition="End" IconColor="WhiteSmoke" HeaderBackgroundColor="#03506f" > <expander:SfExpander.Header> <Grid HeightRequest="50"> <Label Text="InBox" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/> </Grid> </expander:SfExpander.Header> <expander:SfExpander.Content> <extListView:ExtendedListView x:Name="listView" ItemsSource="{Binding InboxInfo}" ItemSpacing="1" AutoFitMode="DynamicHeight"> <extListView:ExtendedListView.ItemTemplate> <DataTemplate> <Grid Padding="10,0,0,0" HeightRequest="70" BackgroundColor="White"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="100"/> </Grid.ColumnDefinitions> <Grid HorizontalOptions="StartAndExpand"> <Label LineBreakMode="NoWrap" TextColor="#474747" FontSize="18" Text="{Binding Title}" VerticalOptions="Center"/> <Label LineBreakMode="NoWrap" TextColor="#474747" Grid.Row="1" Text="{Binding Subject}" FontSize="16" VerticalOptions="Center"/> </Grid> <Label TextColor="#474747" HorizontalOptions="EndAndExpand" Padding="5,10,5,10" Grid.Column="1" LineBreakMode="NoWrap" Text="{Binding Date}" FontSize="12"/> </Grid> </DataTemplate> </extListView:ExtendedListView.ItemTemplate> </extListView:ExtendedListView> </expander:SfExpander.Content> </expander:SfExpander> </StackLayout> </ScrollView> View sample in GitHub
You can customise the SfExpander corner using PancakeView in Xamarin.Forms. You can use the custom expander icon to customize the header. Refer to the document to use custom images in Expander from here. To use PancakeView in SfExpander, refer to the steps below, STEP 1: Install the Xamarin.Forms.PancakeView nuget package in the shared code project. STEP 2: Add the PancakeView control to the SfExpander.Header or SfExpander.Content and set the CornerRadius to apply the Expander corner. You can customise the corner radius based on the expanded state by binding the IsExpanded property and the converter. <syncfusion:SfExpander x:Name="expander1" HeaderIconPosition="None"> <syncfusion:SfExpander.Header> <pancake:PancakeView CornerRadius="{Binding IsExpanded, Source={x:Reference expander1}, Converter={StaticResource CornerRadiusConverter}}" BackgroundColor="#bbbfca" HeightRequest="50"> <Grid> <Label Text="Veg Pizza" TextColor="#495F6E" VerticalTextAlignment="Center" Margin="10,0,0,0"/> <Image Margin="10" HorizontalOptions="End" HeightRequest="20" WidthRequest="20" Source="{Binding IsExpanded,Source={x:Reference expander1},Converter={StaticResource ExpanderIconConverter}}"/> </Grid> </pancake:PancakeView> </syncfusion:SfExpander.Header> <syncfusion:SfExpander.Content> <pancake:PancakeView CornerRadius="0,0,20,20" BackgroundColor="#dddddd" > <Grid Padding="10,10,10,10" > <Label 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"/> </Grid> </pancake:PancakeView> </syncfusion:SfExpander.Content> </syncfusion:SfExpander> STEP 3: Using the converter, return the CornerRadius based on the expanded state. public class CornerRadiusConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { return (bool)value ? new CornerRadius(20, 20, 0, 0) : new CornerRadius(20, 20, 20, 20); } } View sample in GitHub
When the SfExpander is loaded in the ListView.ItemTemplate, the ListView.ItemTapped event is not triggered in Android and iOS. Since, the touch flow was handled using the Tunneling-Bubbling concept in the framework. You can refer to the framework report from here. Also, You can use EventToCommandBehavior to bind the Command for Expand/Collapse events in SfExpander using to handle the tap action in Xamarin.Forms. XAML Using EventToCommandBehavior, bind the Command to the Expanding event. Also, bind the ItemData to the CommandParameter. <sflistview:SfListView x:Name="listView" AutoFitMode="DynamicHeight" ItemsSource="{Binding ContactsInfo}"> <sflistview:SfListView.ItemTemplate> <DataTemplate> <Frame x:Name="frame" CornerRadius="2" Padding="{OnPlatform Android=1, iOS=1, UWP=0}" Margin="{OnPlatform Android=1, iOS=1, UWP=0}" OutlineColor="White" HasShadow="{OnPlatform Android=true, iOS=false, UWP=true}"> <Grid Padding="{OnPlatform Android=2, iOS=2, UWP=0}" Margin="{OnPlatform Android=1, iOS=1, UWP=0}" BackgroundColor="White" > <expander:SfExpander x:Name="expander" HeaderIconPosition="None"> <expander:SfExpander.Behaviors> <local:EventToCommandBehavior Command="{Binding Path=BindingContext.ExpandingCommand, Source={x:Reference listView}}" EventName="Expanding" CommandParameter="{Binding .}"/> </expander:SfExpander.Behaviors> <expander:SfExpander.Header> ... </expander:SfExpander.Header> <expander:SfExpander.Content> ... </expander:SfExpander.Content> </expander:SfExpander> </Grid> </Frame> </DataTemplate> </sflistview:SfListView.ItemTemplate> </sflistview:SfListView> C# Define the Command that is bound to the SfExpander.Expanding event. public class ViewModel : INotifyPropertyChanged { private Command<Object> expandingCommand; public Command<object> ExpandingCommand { get { return expandingCommand; } set { expandingCommand = value; } } public ViewModel() { ExpandingCommand = new Command<object>(ExpandingCommandMethod); } private void ExpandingCommandMethod(object obj) { App.Current.MainPage.DisplayAlert("Alert!", "" + (obj as Contact).ContactName + " expanded", "Ok"); } } View sample in GitHub
You can bring the entire ListViewItem to the view when expanding the SfExpander in Xamarin.Forms SfListView. You can refer to the documentation without the expander from here. C# The ExtendedExpander is used to bring the entire item to the View. You can get the index of the item from the DataSource.DisplayItems. In the Expanded event, you can bring the item to view using the ScrollToRowIndex method. namespace ExpanderXamarin { public class ExtendedExpander: SfExpander { public SfListView ListView { get; set; } public ExtendedExpander() { this.Expanded += ExtendedExpander_Expanded; } private void ExtendedExpander_Expanded(object sender, ExpandedAndCollapsedEventArgs e) { var item = (sender as SfExpander).BindingContext as Contact; var itemIndex = ListView.DataSource.DisplayItems.IndexOf(item); Device.BeginInvokeOnMainThread(async () => { await Task.Delay(200); ListView.LayoutManager.ScrollToRowIndex(itemIndex, Syncfusion.ListView.XForms.ScrollToPosition.MakeVisible, false); }); } } } XAML The ExtendedExpander is loaded in the SfListView.ItemTemplate. Also, set the ListView reference to the Expander to perform scrolling. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ExpanderXamarin" x:Class="ExpanderXamarin.ExpandableListView" xmlns:sflistview="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"> <ContentPage.BindingContext> <local:ViewModel /> </ContentPage.BindingContext> <ContentPage.Content> <Grid x:Name="mainGrid" BackgroundColor="#F0F0F0" Padding="4"> <sflistview:SfListView x:Name="listView" AutoFitMode="DynamicHeight" ItemsSource="{Binding ContactsInfo}"> <sflistview:SfListView.ItemTemplate> <DataTemplate> <Frame x:Name="frame" CornerRadius="2" Padding="{OnPlatform Android=1, iOS=1, UWP=0}" Margin="{OnPlatform Android=1, iOS=1, UWP=0}" OutlineColor="White" HasShadow="{OnPlatform Android=true, iOS=false, UWP=true}"> <Grid Padding="{OnPlatform Android=2, iOS=2, UWP=0}" Margin="{OnPlatform Android=1, iOS=1, UWP=0}" BackgroundColor="White" > <local:ExtendedExpander x:Name="expander" ListView="{x:Reference listView}" HeaderIconPosition="None" IsExpanded="{Binding IsExpanded, Mode=TwoWay}"> <local:ExtendedExpander.Header> ... </local:ExtendedExpander.Header> <local:ExtendedExpander.Content> ... </local:ExtendedExpander.Content> </local:ExtendedExpander> </Grid> </Frame> </DataTemplate> </sflistview:SfListView.ItemTemplate> </sflistview:SfListView> </Grid> </ContentPage.Content> </ContentPage> View sample in GitHub
You can load the SfExpander in the ItemTemplate of SfListView and remove the expander at run time by updating the ListView collection in Xamarin.Forms. C# The Commands defined in the ViewModel are used to customize the Expander and delete the same using the Remove method. public class ViewModel { public Command<object> ReadCommand { get; set; } public Command<object> DeleteCommand { get; set; } public ViewModel() { ReadCommand = new Command<object>(OnReadClicked); DeleteCommand = new Command<object>(OnDeleteClicked); GenerateSource(); } private void OnDeleteClicked(object obj) { var expanderItem = obj as InboxInfo; this.InboxInfo.Remove(expanderItem); } private void OnReadClicked(object obj) { var expanderItem = obj as InboxInfo; expanderItem.FontStyle = FontAttributes.None; expanderItem.IsExpanded = false; } } XAML Loaded the SfExpander to the SfListView.ItemTemplate. ViewModel commands bound to the Button.Command and set BindingContext as the CommandParameter. <sflistView:SfListView x:Name="listView" ItemsSource="{Binding InboxInfo}" AutoFitMode="DynamicHeight" ItemSpacing="1" BackgroundColor="LightGray"> <sflistView:SfListView.ItemTemplate> <DataTemplate> <expander:SfExpander HeaderIconPosition="Start" HeaderBackgroundColor="White" IsExpanded="{Binding IsExpanded}"> <expander:SfExpander.Header> <Grid Padding="10,0,0,0" HeightRequest="70"> ... <Grid HorizontalOptions="StartAndExpand"> <Label LineBreakMode="NoWrap" TextColor="#474747" FontSize="18" FontAttributes="{Binding FontStyle}" Text="{Binding Title}" VerticalOptions="Center"/> <Label LineBreakMode="NoWrap" TextColor="#474747" Grid.Row="1" Text="{Binding Subject}" FontSize="16" VerticalOptions="Center"/> </Grid> <Label TextColor="#474747" HorizontalOptions="EndAndExpand" Padding="5,10,5,10" Grid.Column="1" LineBreakMode="NoWrap" Text="{Binding Date}" FontSize="12"/> </Grid> </expander:SfExpander.Header> <expander:SfExpander.Content> <Grid HeightRequest="100" > ... <Label TextColor="#474747" Text="{Binding Description}" VerticalOptions="Center"/> <Grid Grid.Row="1"> <Button x:Name="save" Text="Mark as read" Command="{Binding Path=BindingContext.ReadCommand, Source={x:Reference listView}}" CommandParameter="{Binding .}" FontSize="15" BackgroundColor="#28abb9" CornerRadius="5" TextColor="White"/> <Button x:Name="delete" Text="Delete" Command="{Binding Path=BindingContext.DeleteCommand, Source={x:Reference listView}}" CommandParameter="{Binding .}" Grid.Column="1" FontSize="15" BackgroundColor="#ea2c62" CornerRadius="5" TextColor="White"/> </Grid> </Grid> </expander:SfExpander.Content> </expander:SfExpander> </DataTemplate> </sflistView:SfListView.ItemTemplate> </sflistView:SfListView> View sample in GitHub
In WinForms DataGrid, you can change the group Expander color by setting SfDataGrid Style CaptionSummary RowStyle ExpanderColor property. sfDataGrid1.Style.CaptionSummaryRowStyle.ExpanderColor = Color.Red; View sample in GitHub.ConclusionI hope you enjoyed learning about how to change the captionsummary expander indicator color in WinForms DataGrid.You can refer to our WinForms DataGrid feature tour page to know about its other groundbreaking feature representations documentation and how to quickly get started for configuration specifications. You can also explore our WinForms DataGrid example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can load the SfExpander in the MasterDetailPage in Xamarin.Forms. XAML Load SfExpander in the Master page of the MasterDetailPage. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:syncfusion="clr-namespace:Syncfusion.XForms.Expander;assembly=Syncfusion.Expander.XForms" xmlns:local="clr-namespace:ExpanderXamarin" x:Class="ExpanderXamarin.Views.ExpanderMasterDetailMaster" Title="Menu"> <StackLayout> <Grid BackgroundColor="#f54291" HeightRequest="100"> <Grid.ColumnDefinitions> <ColumnDefinition Width="70"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Image Source="UserImage.png" HeightRequest="60" WidthRequest="60" Margin="10,10,10,10"/> <Label Text="John" Grid.Column="1" VerticalOptions="Center" HorizontalOptions="Start"/> </Grid> <ScrollView BackgroundColor="#EDF2F5"> <StackLayout> <syncfusion:SfExpander HeaderIconPosition="End"> <syncfusion:SfExpander.Header> <Grid HeightRequest="50"> <Grid.ColumnDefinitions> <ColumnDefinition Width="50"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Image Source="home.png" HeightRequest="25" WidthRequest="25" HorizontalOptions="Center" VerticalOptions="Center"/> <Label Text="Home" Grid.Column="1" TextColor="#495F6E" VerticalTextAlignment="Center" /> </Grid> </syncfusion:SfExpander.Header> <syncfusion:SfExpander.Content> <StackLayout Padding="10,10,10,10" BackgroundColor="#FFFFFF"> <Label HeightRequest="50" Text="Tasks" TextColor="#303030" VerticalTextAlignment="Center" /> <Label HeightRequest="50" Text="Settings" TextColor="#303030" VerticalTextAlignment="Center" /> </StackLayout> </syncfusion:SfExpander.Content> </syncfusion:SfExpander> </StackLayout> </ScrollView> </StackLayout> </ContentPage> Output View sample in GitHub
You can customize the expander icon to be in header or content based on expand/collapse using the custom expander icon and converters in Xamarin.Forms SfExpander. You can refer to the following document to use custom font icons in SfExpander from the following link, https://www.syncfusion.com/kb/11469/how-to-use-a-custom-font-icon-for-expander-in-xamarin-forms-sfexpander XAML Define converters for Expander.Header and Expander.Content to change the expander icon visibility based on the IsExpanded property. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ExpanderXamarin" xmlns:syncfusion="clr-namespace:Syncfusion.XForms.Expander;assembly=Syncfusion.Expander.XForms" x:Class="ExpanderXamarin.MainPage" Padding="{OnPlatform iOS='0,40,0,0'}"> <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> <ContentPage.Content> <ScrollView BackgroundColor="#EDF2F5" Margin="{OnPlatform iOS='0,40,0,0'}"> <StackLayout> <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> </StackLayout> </ScrollView> </ContentPage.Content> </ContentPage> C# Returns true or false, based on the expanded state for both Header and Content. 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(); } } Output View sample in GitHub
You can customize the load indicator by using the custom expander icon and SfBusyIndicator in Xamarin.Forms SfTreeView. Also, you can customize the load indicator based on level. You can refer to the following document regarding custom expander icon, https://www.syncfusion.com/kb/10289/how-to-expand-and-collapse-treeview-node-using-image-instead-expander XAML: Expander View – BusyIndicator as load indicator and Image as expander icon Load custom expander icon and BusyIndicator in the same column and change the visibility based on the TreeViewNode properties using Converters. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:TreeViewXamarin" xmlns:treeview="clr-namespace:Syncfusion.XForms.TreeView;assembly=Syncfusion.SfTreeView.XForms" xmlns:sfbusyindicator="clr-namespace:Syncfusion.SfBusyIndicator.XForms;assembly=Syncfusion.SfBusyIndicator.XForms" x:Class="TreeViewXamarin.MainPage" Padding="0,20,0,0"> <ContentPage.BindingContext> <local:MusicInfoRepository x:Name="viewModel"/> </ContentPage.BindingContext> <ContentPage.Resources> <ResourceDictionary> <local:ExpanderIconVisibilityConverter x:Key="ExpanderIconVisibilityConverter"/> <local:ExpanderIconConverter x:Key="ExpanderIconConverter" /> <local:IndicatorColorConverter x:Key="IndicatorColorConverter" /> </ResourceDictionary> </ContentPage.Resources> <ContentPage.Behaviors> <local:Behavior/> </ContentPage.Behaviors> <ContentPage.Content> <treeview:SfTreeView x:Name="treeView" ExpanderWidth="0" ItemTemplateContextType="Node" LoadOnDemandCommand="{Binding TreeViewOnDemandCommand}" ItemsSource="{Binding Menu}"> <treeview:SfTreeView.ItemTemplate> <DataTemplate> <Grid x:Name="grid" Padding="5,5,5,5" BackgroundColor="White"> <Grid.ColumnDefinitions> <ColumnDefinition Width="50" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid Grid.Column="1" Padding="1,0,0,0" VerticalOptions="Center"> <Label LineBreakMode="NoWrap" TextColor="Black" Text="{Binding Content.ItemName}" FontSize="20" VerticalTextAlignment="Center"/> </Grid> <Grid > <Image Source="{Binding IsExpanded, Converter={StaticResource ExpanderIconConverter}}" IsVisible="{Binding HasChildNodes, Converter={StaticResource ExpanderIconVisibilityConverter}}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="35" WidthRequest="35"> <Image.GestureRecognizers> <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" /> </Image.GestureRecognizers> </Image> <Grid IsVisible="{Binding Content.IsInAnimation, Mode=TwoWay}"> <sfbusyindicator:SfBusyIndicator x:Name="grid1" 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> </ContentPage.Content> </ContentPage> C#: Handled the BusyIndicator visibility based on the IsInAnimation model property Update the IsInAnimation property in the LoadOnDemandCommand execution method. namespace TreeViewXamarin { public class MusicInfoRepository { public ICommand TreeViewOnDemandCommand{ get; set; } public MusicInfoRepository() { TreeViewOnDemandCommand = new Command(ExecuteOnDemandLoading, CanExecuteOnDemandLoading); } private bool CanExecuteOnDemandLoading(object sender) { var hasChildNodes = ((sender as TreeViewNode).Content as MusicInfo).HasChildNodes; if (hasChildNodes) return true; else return false; } private void ExecuteOnDemandLoading(object obj) { var node = obj as TreeViewNode; // Skip the repeated population of child items when every time the node expands. if (node.ChildNodes.Count > 0) { node.IsExpanded = true; return; } MusicInfo musicInfo = node.Content as MusicInfo; musicInfo.IsInAnimation = true; Device.BeginInvokeOnMainThread(async () => { await Task.Delay(500); var items = GetSubMenu(musicInfo.ID); // Populating child items for the node in on-demand node.PopulateChildNodes(items); if (items.Count() > 0) node.IsExpanded = true; musicInfo.IsInAnimation = false; }); } } } C# The expander icon visibility is handled based on the HasChildNodes. namespace TreeViewXamarin { public class ExpanderIconVisibilityConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { return (!(bool)value) ? false : true; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } } } C#: Load indicator color customization Converter to customize the load indicator color based on the TreeViewNode.Level property. namespace TreeViewXamarin { public class IndicatorColorConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { return (int)value == 0 ? Color.Red : Color.Green; } } } Output View sample in GitHub
You can add a separator afor Expander.Header and Expander.Content by using BoxView in Xamarin.Forms SfExpander. By using the custom HeaderIcon, you can add the separator line for the entire Header. You can refer to the following document to customize the HeaderIcon in SfExpander, https://www.syncfusion.com/kb/11378/how-to-customize-header-icon-in-xamarin-forms-expander-sfexpander XAML BoxView added in Header and Content with Height as 2. Converter bound to the IsVisible property to change the visibility of the separator line and the ConverterParameter defined by Header and Content. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ExpanderXamarin" xmlns:syncfusion="clr-namespace:Syncfusion.XForms.Expander;assembly=Syncfusion.Expander.XForms" x:Class="ExpanderXamarin.MainPage" Padding="0,15,0,0"> <ContentPage.Resources> <ResourceDictionary> <local:ExpanderIconConverter x:Key="ExpanderIconConverter"/> <local:SeperatorVisibilityConverter x:Key="SeperatorVisibilityConverter"/> </ResourceDictionary> </ContentPage.Resources> <ContentPage.Content> <ScrollView BackgroundColor="#EDF2F5"> <StackLayout> <syncfusion:SfExpander x:Name="expander1" HeaderIconPosition="None"> <syncfusion:SfExpander.Header> <Grid> <Grid.RowDefinitions> <RowDefinition Height="50"/> <RowDefinition Height="2"/> </Grid.RowDefinitions> <Grid> <Label Text="Veg Pizza" TextColor="#495F6E" VerticalTextAlignment="Center" Margin="10,0,0,0"/> <Image Margin="10" HorizontalOptions="End" HeightRequest="15" WidthRequest="15" Source="{Binding IsExpanded,Source={x:Reference expander1},Converter={StaticResource ExpanderIconConverter}}"/> </Grid> <BoxView Grid.Row="1" IsVisible="{Binding Path=IsExpanded, Source={x:Reference expander1}, Converter={StaticResource SeperatorVisibilityConverter}, ConverterParameter='Header'}" BackgroundColor="Green"/> </Grid> </syncfusion:SfExpander.Header> <syncfusion:SfExpander.Content> <Grid BackgroundColor="#FFFFFF"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="2"/> </Grid.RowDefinitions> <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" Margin="10,10,10,10" VerticalTextAlignment="Center"/> <BoxView Grid.Row="1" IsVisible="{Binding Path=IsExpanded, Source={x:Reference expander1}, Converter={StaticResource SeperatorVisibilityConverter}, ConverterParameter='Content'}" BackgroundColor="Green"/> </Grid> </syncfusion:SfExpander.Content> </syncfusion:SfExpander> </StackLayout> </ScrollView> </ContentPage.Content> </ContentPage> C# Converter used to show or hide the separator line based on the IsExpanded property. public class SeperatorVisibilityConverter : 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(); } } Output View sample in GitHub
You can access the named SfExpander defined inside DataTemplate of PopupLayout by using Behavior. XAML In PopupLayout’s PopupView, behaviour added to parent of Expander. <sfPopup:SfPopupLayout x:Name="popupLayout"> <sfPopup:SfPopupLayout.Behaviors> <local:PopupBehavior/> </sfPopup:SfPopupLayout.Behaviors> <sfPopup:SfPopupLayout.PopupView> <sfPopup:PopupView WidthRequest="400" HeightRequest="400" ShowFooter="False"> <sfPopup:PopupView.ContentTemplate> <DataTemplate> <ScrollView BackgroundColor="#EDF2F5" Grid.Row="1"> <StackLayout> <StackLayout.Behaviors> <local:Behavior/> </StackLayout.Behaviors> <Button Text="Expand/Collapse Second Expander" x:Name="expanderButton" BackgroundColor="LightGray"/> <syncfusion:SfExpander x:Name="firstExpander"> <syncfusion:SfExpander.Header> ... </syncfusion:SfExpander.Header> <syncfusion:SfExpander.Content> ... </syncfusion:SfExpander.Content> </syncfusion:SfExpander> <syncfusion:SfExpander x:Name="secondExpander"> <syncfusion:SfExpander.Header> ... </syncfusion:SfExpander.Header> <syncfusion:SfExpander.Content> ... </syncfusion:SfExpander.Content> </syncfusion:SfExpander> </StackLayout> </ScrollView> </DataTemplate> </sfPopup:PopupView.ContentTemplate> </sfPopup:PopupView> </sfPopup:SfPopupLayout.PopupView> <sfPopup:SfPopupLayout.Content> <Grid x:Name="popupGrid"> <Grid.RowDefinitions> <RowDefinition Height="50"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Button x:Name="ShowPopup" Text="Bring Popup" /> </Grid> </sfPopup:SfPopupLayout.Content> </sfPopup:SfPopupLayout> C# In ChildAdded event you will get the instance of Expander. public class Behavior : Behavior<StackLayout> { StackLayout stackLayout; SfExpander expander; protected override void OnAttachedTo(StackLayout bindable) { stackLayout = bindable; stackLayout.ChildAdded += StackLayout_ChildAdded; ; } private void StackLayout_ChildAdded(object sender, ElementEventArgs e) { if (e.Element is SfExpander) { //Method 1 : Get SfExpander reference using StackLayout.ChildAdded Event expander = e.Element as SfExpander; } } protected override void OnDetachingFrom(StackLayout bindable) { stackLayout.ChildAdded -= StackLayout_ChildAdded; expander = null; stackLayout = null; base.OnDetachingFrom(bindable); } } C# You can also get the Expander using FindByName method from Parent element. public class Behavior : Behavior<StackLayout> { StackLayout stackLayout; SfExpander expander; Button button; protected override void OnAttachedTo(StackLayout bindable) { stackLayout = bindable; stackLayout.ChildAdded += StackLayout_ChildAdded; ; } private void StackLayout_ChildAdded(object sender, ElementEventArgs e) { if (e.Element is Button) { button = e.Element as Button; button.Clicked += Button_Clicked; } } private void Button_Clicked(object sender, EventArgs e) { //Method 2 : Get SfExpander reference using FindByName expander = stackLayout.FindByName<SfExpander>("secondExpander"); App.Current.MainPage.DisplayAlert("Information", "Second Expander instance is obtained and Expanded/Collapsed", "Ok"); if (expander.IsExpanded) { expander.IsExpanded = false; } else { expander.IsExpanded = true; } } protected override void OnDetachingFrom(StackLayout bindable) { button.Clicked -= Button_Clicked; stackLayout.ChildAdded -= StackLayout_ChildAdded; expander = null; button = null; stackLayout = null; base.OnDetachingFrom(bindable); } } View sample in GitHub
You can customize the Xamarin.Forms SfExpander header icon in the SfExpander.Header elements using the converter. XAML Binding the IsExpanded property to show different icons to expand and collapse. Set HeaderIconPosition to None to hide the default header icon. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ExpanderXamarin" xmlns:syncfusion="clr-namespace:Syncfusion.XForms.Expander;assembly=Syncfusion.Expander.XForms" x:Class="ExpanderXamarin.MainPage"> <ContentPage.Resources> <ResourceDictionary> <local:ExpanderIconConverter x:Key="ExpanderIconConverter"/> </ResourceDictionary> </ContentPage.Resources> <ContentPage.Content> <ScrollView BackgroundColor="#EDF2F5"> <StackLayout> <syncfusion:SfExpander x:Name="expander1" HeaderIconPosition="None"> <syncfusion:SfExpander.Header> <Grid HeightRequest="50"> <Label Text="Veg Pizza" TextColor="#495F6E" VerticalTextAlignment="Center" Margin="10,0,0,0"/> <Image Margin="10" HorizontalOptions="End" Source="{Binding IsExpanded,Source={x:Reference expander1},Converter={StaticResource ExpanderIconConverter}}"/> </Grid> </syncfusion:SfExpander.Header> <syncfusion:SfExpander.Content> <Grid Padding="10,10,10,10" BackgroundColor="#FFFFFF"> <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"/> </Grid> </syncfusion:SfExpander.Content> </syncfusion:SfExpander> </StackLayout> </ScrollView> </ContentPage.Content> </ContentPage> C# Return image based on the IsExpanded property value. namespace ExpanderXamarin { public class ExpanderIconConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { if ((bool)value) return ImageSource.FromResource("ExpanderXamarin.Images.ArrowDown.png"); else return ImageSource.FromResource("ExpanderXamarin.Images.ArrowUp.png"); } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } } Output View sample in GitHub
You can add a separator for the whole row by customizing the SfTreeView expander and indentation in Xamarin.Forms. XAML Set ExpanderWidth and Indentation to zero to disable the default expander and indentation. <treeview:SfTreeView x:Name="treeView" ItemHeight="40" Indentation="0" ExpanderWidth="0" AutoExpandMode="None" ItemTemplateContextType="Node" ChildPropertyName="SubFiles" ExpandActionTarget="Node" ItemsSource="{Binding ImageNodeInfo}"> ... </treeview:SfTreeView> Use the converter to display custom expander based on IsExpanded and indentation based on the Level property of TreeViewNode. Use the BoxView with HeightRequest as 1 to display the separator line. <treeview:SfTreeView.ItemTemplate> <DataTemplate> <Grid x:Name="grid" Padding="5,5,5,5" RowSpacing="0" > <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="1"/> </Grid.RowDefinitions> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="{Binding Level, Converter={StaticResource IndentationConverter}}" /> <ColumnDefinition Width="35" /> <ColumnDefinition Width="35" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Grid.Column="1" Source="{Binding IsExpanded,Converter={StaticResource ExpanderIconConverter}}" IsVisible="{Binding HasChildNodes,Converter={StaticResource ExpanderIconVisibilityConverter}}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="15" WidthRequest="15"/> <Image Grid.Column="2" Source="{Binding Content.ImageIcon}" VerticalOptions="Center" HorizontalOptions="Start" HeightRequest="35" WidthRequest="35"/> <Grid Grid.Column="3" RowSpacing="1" Padding="1,0,0,0" VerticalOptions="Center"> <Label LineBreakMode="NoWrap" Text="{Binding Content.ItemName}" VerticalTextAlignment="Center"/> </Grid> </Grid> <BoxView HeightRequest="1" BackgroundColor="Gray" Grid.Row="1"/> </Grid> </DataTemplate> </treeview:SfTreeView.ItemTemplate> You can also refer to the following article to use the custom expander icon in Xamarin.Forms SfTreeView, CustomExpanderIcon C# Converter to return the indentation value based on the node level. public class IndentationConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { return (int)value * 40; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } Output View sample in GitHub
You can resize the SfExpanderContent based on the content size by using DynamicSizeMode as Content in Xamarin.Forms Expander.XAMLAdded Editor control to Expander content and set DynamicSizeMode to Content. To change the content size based on the text, set AutoSize as TextChanges for Editor control. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ExpanderXamarin" xmlns:syncfusion="clr-namespace:Syncfusion.XForms.Expander;assembly=Syncfusion.Expander.XForms" x:Class="ExpanderXamarin.MainPage"> <ContentPage.Content> <ScrollView BackgroundColor="#EDF2F5"> <StackLayout> <syncfusion:SfExpander DynamicSizeMode="Content" IsExpanded="True"> <syncfusion:SfExpander.Header> <Grid HeightRequest="50"> <Label Text="Veggie burger" VerticalTextAlignment="Center"/> </Grid> </syncfusion:SfExpander.Header> <syncfusion:SfExpander.Content> <Grid> <Editor AutoSize="TextChanges" Text="Veggie burger, garden burger, or tofu burger uses a meat analogue, a meat substitute such as tofu, textured vegetable protein, seitan (wheat gluten), Quorn, beans, grains or an assortment of vegetables, which are ground up and formed into patties."/> </Grid> </syncfusion:SfExpander.Content> </syncfusion:SfExpander> </StackLayout> </ScrollView> </ContentPage.Content> </ContentPage> Output View sample in GitHubConclusionI hope you enjoyed learning about how to autofit the Expander content in Xamarin.Forms (SfExpander).You can refer to our Xamarin.Forms Expander feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can center align the text of the Expander Header in Xamarin.Forms SfExpander by using the HorizontalTextAlignment and VerticalTextAlignment properties. XAML Set HorizontalTextAlignment and VerticalTextAlignment of the header label to Center. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:syncfusion="clr-namespace:Syncfusion.XForms.Expander;assembly=Syncfusion.Expander.XForms" x:Class="ExpanderXamarin.MainPage"> <ContentPage.Content> <ScrollView BackgroundColor="#EDF2F5"> <StackLayout> <syncfusion:SfExpander> <syncfusion:SfExpander.Header> <Grid HeightRequest="50"> <Label Text="Veg Pizza" TextColor="#495F6E" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> </Grid> </syncfusion:SfExpander.Header> <syncfusion:SfExpander.Content> <Grid Padding="10,10,10,10" BackgroundColor="#FFFFFF"> <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"/> </Grid> </syncfusion:SfExpander.Content> </syncfusion:SfExpander> <syncfusion:SfExpander> <syncfusion:SfExpander.Header> <Grid HeightRequest="50"> <Label Text="Non-veg Pizza" TextColor="#495F6E" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> </Grid> </syncfusion:SfExpander.Header> <syncfusion:SfExpander.Content> <Grid Padding="10,10,10,10" BackgroundColor="#FFFFFF"> <Label Text="Non-veg pizza is prepared by including the meat and animal tissue products." HeightRequest="50" TextColor="#303030" VerticalTextAlignment="Center"/> </Grid> </syncfusion:SfExpander.Content> </syncfusion:SfExpander> </StackLayout> </ScrollView> </ContentPage.Content> </ContentPage> Output View sample in GitHub
You can create the SfExpander using the C# in Xamarin.Forms. C# Creating the SfExpander in the constructor of the MainPage. public partial class MainPage : ContentPage { SfExpander expander, expander2; ScrollView scrollView; StackLayout stack; public MainPage() { InitializeComponent(); scrollView = new ScrollView(); stack = new StackLayout(); //Expander One expander = new SfExpander(); //Expander Header var headergrid = new Grid() { HeightRequest =60 }; var headerLabel = new Label() { TextColor = Color.White, BackgroundColor = Color.Teal, HorizontalTextAlignment =TextAlignment.Center , Text = "Veg Pizza", VerticalTextAlignment = TextAlignment.Center }; headergrid.Children.Add(headerLabel); expander.Header = headergrid; //Expander Content var contentgrid = new Grid() { HeightRequest =60 }; var contentLabel = new Label() { TextColor = Color.Black, BackgroundColor = Color.White, Text = "Veg pizza is prepared with the items that meet vegetarian standards by not including any meat or animal tissue products.", VerticalTextAlignment = TextAlignment.Center, HeightRequest = 50 }; contentgrid.Children.Add(contentLabel); expander.Content = contentgrid; //Expander Two expander2 = new SfExpander(); //Expander Header var headergrid2 = new Grid() { HeightRequest =60 }; var headerLabel2 = new Label() { TextColor = Color.White, BackgroundColor = Color.Teal, Text = "Non- Veg Pizza", HorizontalTextAlignment = TextAlignment.Center, VerticalTextAlignment = TextAlignment.Center }; headergrid2.Children.Add(headerLabel2); expander2.Header = headergrid2; //Expander Content var contentgrid2 = new Grid(); var contentLabel2 = new Label() { TextColor = Color.Black, BackgroundColor = Color.White, Text = "Non-veg pizza is prepared by including the meat and animal tissue products.", VerticalTextAlignment = TextAlignment.Center, HeightRequest = 50 }; contentgrid2.Children.Add(contentLabel2); expander2.Content = contentgrid2; stack.Children.Add(expander); stack.Children.Add(expander2); scrollView.Content = stack; this.Content = scrollView; } } View sample in GitHub
You can customize the expander header icon with font icons in Xamarin.Forms SfExpander. Please follow the steps below to use the font icons in the Expander Header element. Step 1: Place the ttf file in the shared code project and set the Build action as follows, Project Location Build action Android Assets AndroidAsset iOS Resources BundleResource UWP Assets Content In addition, add the name of the font file in the info.plist file of iOS project. <key>UIAppFonts</key> <array> <string>ExpanderIcons.ttf</string> </array> You can also refer to the link below to use custom fonts in Xamarin.Forms. https://xamarinhelp.com/custom-fonts-xamarin-forms/ Step 2: In ResourceDictionary, define the font to use the custom font as StaticResource. <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"/> </ContentPage.Resources> Step 3: Bind the FontFamily for Label using resource key. Use converter to display platform specific icons and bind the Device platform using RuntimePlatform to specify the platform in the ConverterParameter. Set HeaderIconPosition as None to hide the default Header icon. <ContentPage.Content> <ScrollView BackgroundColor="#EDF2F5" Margin="{OnPlatform iOS='0,40,0,0'}"> <StackLayout> <syncfusion:SfExpander x:Name="expander1"> <syncfusion:SfExpander.Header> <Grid HeightRequest="50"> <Grid.ColumnDefinitions> <ColumnDefinition Width="70"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="70"/> </Grid.ColumnDefinitions> <Label HorizontalOptions="Center" VerticalOptions="Center" FontFamily="{StaticResource ExpanderIcon}" Text="{Binding Path=IsExpanded,Source={x:Reference expander1}, Converter={StaticResource ExpanderIconConverter}, ConverterParameter={x:Static Device.RuntimePlatform}}"/> <Label Text="Invoice Date" Grid.Column="1" TextColor="#495F6E" VerticalTextAlignment="Center" /> <Label HorizontalOptions="Center" VerticalOptions="Center" Grid.Column="2" FontFamily="{StaticResource ExpanderIcon}" Text="{Binding Path=IsExpanded,Source={x:Reference expander1}, Converter={StaticResource ExpanderIconConverter}, ConverterParameter={x:Static Device.RuntimePlatform}}"/> </Grid> </syncfusion:SfExpander.Header> <syncfusion:SfExpander.Content> <Grid Padding="10,10,10,10" BackgroundColor="#FFFFFF"> <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"/> </Grid> </syncfusion:SfExpander.Content> </syncfusion:SfExpander> </StackLayout> </ScrollView> </ContentPage.Content> Step 4: Converter to display the platform based icons. namespace ExpanderXamarin { public class ExpanderIconConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { if ((bool)value) { if ((string)parameter == "Android") return "\ue704"; else if((string)parameter == "iOS") return "\ue700"; else return "\ue702"; } else { if ((string)parameter == "Android") return "\ue705"; else if ((string)parameter == "iOS") return "\ue701"; else return "\ue703"; } } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } } Output View sample in GitHub
Xamarin does not load the renderer assemblies, by default, in iOS and UWP projects. Hence, to solve this, you need to manually load it by calling the Init method of SfExpanderRenderer class in the respective projects as mentioned below. iOS Project Call the SfExpanderRenderer.Init() in the FinishedLaunching overridden method of the AppDelegate class after the Xamarin.Forms Framework initialization, and before the LoadApplication is called as demonstrated in the following code example: public override bool FinishedLaunching(UIApplication app, NSDictionary options) { … global::Xamarin.Forms.Forms.Init(); Syncfusion.XForms.iOS.Expander.SfExpanderRenderer.Init(); LoadApplication(new App()); … } ReleaseMode Issue in UWP Platform The known Framework issue in UWP platform is the custom controls will not render when deployed the application in Release Mode. The above problem can be resolved by initializing the ExpanderRenderer assemblies in App.xaml.cs in UWP project as in the following code snippet: // In App.xaml.cs protected override void OnLaunched(LaunchActivatedEventArgs e) { … rootFrame.NavigationFailed += OnNavigationFailed; // you'll need to add ‘using System.Reflection;’ List<Assembly> assembliesToInclude = new List<Assembly>(); //Now, add all the assemblies your app uses assembliesToInclude.Add(typeof(Syncfusion.XForms.iOS.Expander.SfExpanderRenderer).GetTypeInfo().Assembly); // replaces Xamarin.Forms.Forms.Init(e); Xamarin.Forms.Forms.Init(e, assembliesToInclude); … }
