locked
How to remove spacing between buttons in itemscontrol

    Question

  • How do I remove the spacing between buttons when I use ItemsControl?  I've tried margin and padding settings, but it doesn't seem to do the job.  Here is what I've got and a snapshot of what it looks like.  This is a UserControl that sits in a Grid.

    <Viewbox HorizontalAlignment="Left" VerticalAlignment="Top">
    <ItemsControl> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <WrapGrid MaximumRowsOrColumns="8"/> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Button Content="{Binding}"/> </DataTemplate> </ItemsControl.ItemTemplate> <x:String>A1</x:String> <x:String>A2</x:String> <x:String>A3</x:String> <x:String>A4</x:String> <x:String>A5</x:String> <x:String>A6</x:String> <x:String>A7</x:String> <x:String>A8</x:String> <x:String>B1</x:String> </ItemsControl>
    </ViewBox>



    • Edited by Jose1966 Wednesday, August 27, 2014 9:22 PM
    Wednesday, August 27, 2014 9:21 PM

Answers

  • Yeah, tried all that, just didn't work as expected.  Got close, but not good enough.  The problem was figuring out the right negative margin to use when the control is resized.

    I have a workaround, Instead of using a Button in the DataTemplate, I've created a UserControl which doesn't seem to have any of this margin/padding issue.  SO I can get the UserControls as close to each other as I want...now I have to go define how I want the control to behave, but not a bad tradeoff as I get more control.

    Wednesday, August 27, 2014 10:10 PM
  • Smart!

    Remember, the Blend tooling can expose any 'hidden' template bits and allow easy style/template override. If your not a blend fan, you can simply inspect the actual framework libraries in dotPeek and inspect the styles first-hand.

    I do this daily...

    Wednesday, August 27, 2014 10:28 PM

All replies

  • Try a negative margin, in addition to 0 border thickness.

     HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" 
        BorderThickness="0" 
        Margin="-3"

    Wednesday, August 27, 2014 9:33 PM
  • Yeah, tried all that, just didn't work as expected.  Got close, but not good enough.  The problem was figuring out the right negative margin to use when the control is resized.

    I have a workaround, Instead of using a Button in the DataTemplate, I've created a UserControl which doesn't seem to have any of this margin/padding issue.  SO I can get the UserControls as close to each other as I want...now I have to go define how I want the control to behave, but not a bad tradeoff as I get more control.

    Wednesday, August 27, 2014 10:10 PM
  • Smart!

    Remember, the Blend tooling can expose any 'hidden' template bits and allow easy style/template override. If your not a blend fan, you can simply inspect the actual framework libraries in dotPeek and inspect the styles first-hand.

    I do this daily...

    Wednesday, August 27, 2014 10:28 PM