CODEWITHSUNDEEP
c#wpfitemscontrol
TheStupidOne
TheStupidOne

Reputation: 37

How to Remove Spacing between ItemsControl Items

I have an ItemsControl with materialDesign Chips as a DataTemplate. My goal is to place the items one after the other without a lot of space in between.

There is a pic what is now looks like: https://i.sstatic.net/3JLmH.png

And this is my Goal: https://i.sstatic.net/N22BP.png

I tried already the ItemContainerStyle with Margin but this didnt helped me out

My Current Code

<ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
                <ItemsControl x:Name="myItemsControl" Height="40" Margin="0 10 0 0">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <UniformGrid Rows="1"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>

                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <materialDesign:Chip Tag="{Binding Name}" Uid="{Binding SourceName}" Content="{Binding Code}" Width="75" IsDeletable="True" DeleteClick="Chip_DeleteClick"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>

Upvotes: 0

Views: 656

Answers (1)

Mitya
Mitya

Reputation: 642

Change your ItemsPanelTemplate to StackPanel instead of UniformGrid

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <StackPanel Orientation="Horizontal"/>
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

Upvotes: 1

Related Questions