How to give the chips all the same width

[kris hoobergs]

Hi,

Is it possible to give all my chips the same width? if yes, how can this be achieved, and is this maybe also possible by using a percentage of the container?

Thanks
Kris

[Yuvaraj Palanisamy]

Hi Kris, 

 

This is a general update to let you know that our support team has taken out your query and they are starting to work on it. We will share the details on or before 7^th February 2022.We appreciate your patience until then.  

 

Regards, 

Yuvaraj. 

[Devakumar Dhanapoosanam]

Hi Kris, 

 

We have achieved your requirement by applying the Style for SfChip and WidhtRequest property based on the percentage of the container size using SizeChanged event as per in the below code example. 

 

<ContentPage.Resources> 

    <ResourceDictionary> 

        <Style x:Key="chipStyle" TargetType="buttons:SfChip"> 

            <Setter Property="WidthRequest" Value="100"/> 

        </Style> 

    </ResourceDictionary> 

</ContentPage.Resources> 

 

<ContentPage.Content> 

    <StackLayout x:Name="layout" Orientation="Horizontal" VerticalOptions="Center" 

                 SizeChanged="layout_SizeChanged"> 

        <buttons:SfChip Style="{DynamicResource chipStyle}" Text="Extra Small"/> 

        <buttons:SfChip Style="{DynamicResource chipStyle}" Text="Small"/> 

        <buttons:SfChip Style="{DynamicResource chipStyle}" Text="Medium"/> 

        <buttons:SfChip Style="{DynamicResource chipStyle}" Text="Large"/> 

        <buttons:SfChip Style="{DynamicResource chipStyle}" Text="Extra Large"/> 

    </StackLayout> 

</ContentPage.Content> 

 

double percentage = 20;
…. 

private void layout_SizeChanged(object sender, EventArgs e) 

{ 

    double containerWidth = layout.Width; 

    double chipWidth = (containerWidth / 100) * percentage; 

 

    var buttonStyle = new Style(typeof(SfChip)); 

    buttonStyle.Setters.Add(new Setter() { Property = SfChip.WidthRequestProperty,  

                                                            Value = chipWidth }); 

    Resources["chipStyle"] = buttonStyle; 

} 

 

Sample: https://www.syncfusion.com/downloads/support/forum/172551/ze/172551-34873548.zip  

 

Output:  

 

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Devakumar D 

[kris hoobergs]

Hi,

Thank you for this example.  I have one extra addition, could this be wrapped across multiple lines?

Regards
Kris

[Devakumar Dhanapoosanam]

Hi Kris, 

 

We have achieved your requirement to wrap chips in multiple lines by using the FlexLayout as per the below code example. 

 

<StackLayout x:Name="layout" SizeChanged="layout_SizeChanged"> 

    <FlexLayout HorizontalOptions="Start" 

                VerticalOptions="Center"  

                Direction="Row"  

                Wrap="Wrap" 

                JustifyContent="Start" 

                AlignContent="Start"  

                AlignItems="Start"> 

        <buttons:SfChip Style="{DynamicResource chipStyle}" Text="Extra Small"/> 

        <buttons:SfChip Style="{DynamicResource chipStyle}" Text="Small"/> 

        <buttons:SfChip Style="{DynamicResource chipStyle}" Text="Medium"/> 

        <buttons:SfChip Style="{DynamicResource chipStyle}" Text="Large"/> 

        <buttons:SfChip Style="{DynamicResource chipStyle}" Text="Extra Large"/> 

    </FlexLayout> 

</StackLayout> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/172551/ze/172551504146031.zip  

 

Output: 

 

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Devakumar D