0

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

Nikola
  • 27
  • 6
  • 1
    it would help if you included more of your code so anyone looking at this can easily reproduce what you are showing and help you find a solution. – allan Nov 08 '22 at 09:49
  • What exactly do you hope to achieve with this: HorizontalOptions="FillAndExpand". – H.A.H. Nov 08 '22 at 10:02
  • @H.A.H. it is to make sure the buttons expand in size so the text inside of them fits fully – Nikola Nov 08 '22 at 10:34
  • 2
    Those options you have there, are used to determine how this button will fit in a parent container. More specifically - start/center/end/fill define alignment, and expand defines if it will occupy extra space if available. – H.A.H. Nov 08 '22 at 10:45
  • 2
    Remove the padding. – H.A.H. Nov 08 '22 at 10:48
  • @H.A.H. i see, i will try playing around with those values then – Nikola Nov 08 '22 at 10:49
  • 1
    @H.A.H. removing the padding does help a bit, but how do i go about making the overall button smaller in that case. Reason i put padding is because it makes the button size smaller – Nikola Nov 08 '22 at 10:53
  • 1
    You want 10 pixels? HeightRequest 10 and done. You want 10% of screen? Grid > RowDefinitions 1,9 (with asterisk) , VerticalOptions Fill, Vertical Options - fill > done. – H.A.H. Nov 08 '22 at 10:56
  • 2
    As H.A.H. suggests, don't do `..AndExpand`. Also, do you need the buttons to be able to scroll to show more? If not, consider using `StackLayout` instead of `CollectionView`, with `Spacing="0"`. See [BindableLayout](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/layouts/bindablelayout?view=net-maui-7.0). – ToolmakerSteve Nov 08 '22 at 21:59

1 Answers1

3

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.

Alexandar May - MSFT
  • 6,536
  • 1
  • 8
  • 15