CODEWITHSUNDEEP
xamlmaui
Nikola
Nikola

Reputation: 47

MAUI: How to reduce spacing between buttons

How can i reduce the spacing between the buttons? I tried tweaking the ItemSpacing property but sadly it does nothing.

<CollectionView x:Name="TagsView"
                    Grid.Row="0">
        <CollectionView.ItemsLayout>
            <LinearItemsLayout Orientation="Horizontal" ItemSpacing="0"/>
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Button Text="{Binding Name}"
                        Padding="7"
                        FontSize="12"
                        CornerRadius="12" 
                        HorizontalOptions="FillAndExpand"
                        VerticalOptions="CenterAndExpand"
                        BackgroundColor="AliceBlue"
                        TextColor="Black"
                        Clicked="TagButton_Clicked"/>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

enter image description here

Upvotes: 0

Views: 2337

Answers (1)

Alexandar May - MSFT
Alexandar May - MSFT

Reputation: 10058

This is a known issue and it's been tracked in [Windows] CollectionView ItemSpacing is not working. When setting the property ItemSpacing to 0, the space between the items should have been reduced to 0, however it doesn't work as expected. I would suggest that you can follow up it here:https://github.com/dotnet/maui/issues/4112.

AS an alternative workaround, you can use HorizontalGrid and set HorizontalItemSpacing="0" to remove the space between the buttons, however the WidthRequest of the button would be fixed. Here's the code snippet for your reference:

<CollectionView x:Name="TagsView"
                    Grid.Row="0">
            <CollectionView.ItemsLayout>
                  <GridItemsLayout Orientation="Horizontal"  
                                   HorizontalItemSpacing="0" />
            </CollectionView.ItemsLayout>

        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Button Text="{Binding Name}"
                        FontSize="12"
                        CornerRadius="12" 
                        WidthRequest="100"
                        HorizontalOptions="FillAndExpand"
                        VerticalOptions="CenterAndExpand"
                        BackgroundColor="AliceBlue"
                        TextColor="Black"
                        Clicked="TagButton_Clicked"/>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

Update:

The issue is now resolved, you can set ItemSpacing="0" whatever you want.

Upvotes: 4

Related Questions