Setting custom content for SfChips

[Jesse Knott]

Hello, I have code that I am porting from Xamarin to Maui, and in the past I was able to apply a StackLayout object as the content for the chip.Content. This was used to generate dynamic Chips with an Icon and a text label based on other logic in the code.

generally, the psudocode would be

SfChip chip = new SfChip();

StackLayout sl = new StackLayout()};

var optionIcon  = ... code to get image...

var displayName  = ... code to get name...

sl.Children.Add(optionIcon);

sl.Children.Add(displayName);

chip.Content = sl;

chip.Clicked += HandleItemTapped;

This functionality seems to have been removed, or renamed, but I cannot figure out what it was renamed too. There are no notes in the Porting to MAUI documentation for this feature.

Has this ability been removed?

Thanks!

[Sri Radhesh Nag Subash Sankar]

Hi Jesse,

Thank you for contacting us.

We have reviewed your query regarding the customization of content within SfChips. SfChips do not support setting content directly.   However, you can achieve your desired layout by adding a container layout (such as a StackLayout) with your images and labels as children, and then add this layout as a child to the SfChip.

Example code snippet:

C# :

 

public partial class MainPage : ContentPage

{

    public MainPage()

    {

        InitializeComponent();

 

        var image1 = new Image

        {

            Source = "dotnet_bot.png",

            WidthRequest = 40,

            HeightRequest = 40

        };

        var label = new Label

        {

            Text = "Label",

            HorizontalOptions = LayoutOptions.Center,

            VerticalOptions = LayoutOptions.Center

        };

        var image2 = new Image

        {

            Source = "dotnet_bot.png",

            WidthRequest = 40,

            HeightRequest = 40

        };

        // StackLayout to hold images and label

        var stackLayout = new StackLayout

        {

            Children = { image1, label, image2 }

        };

        // Create SfChip

        var chip = new SfChip

        {

            WidthRequest = 100,

            HeightRequest = 100,

        };

        chip.Children.Add(stackLayout);

        chip.Clicked += SfChip_Clicked;

        Content = new StackLayout

        {

            Padding = 20,

            Children = { chip }

        };

    }

}

We have prepared a simple sample demonstrating this. Please check the attached sample for your reference. 

If you have any further questions, please don’t hesitate to reach out!

Regards,

Sri Radhesh Nag S 

Attachment: MauiChips_7c4030c1.zip