1

Does anybody know a way to remove all the padding from GridViewItem? I'm using very small items (not too small though, I exaggerated in the picture below) and there's some padding when selecting the items which makes it good really bad and I'd like to take it out. This is what I mean:

enter image description here

The code for the image is this:

<GridView Margin="120,80,0,0"
                  SelectionMode="Multiple">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel
                        Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.ItemContainerStyle>
                <Style TargetType="GridViewItem">
                    <Setter Property="HorizontalAlignment" Value="Center" />
                    <Setter Property="VerticalAlignment" Value="Center" />
                </Style>
            </GridView.ItemContainerStyle>
            <Rectangle Height="10" Width="10" Fill="Red" />
            <Rectangle Height="10" Width="10" Fill="Orange" />
            <Rectangle Height="10" Width="10" Fill="Blue" />
            <Rectangle Height="10" Width="10" Fill="Green" />
            <Rectangle Height="10" Width="10" Fill="Yellow" />
        </GridView>

Thanks in advance!

Filip Skakun
  • 31,624
  • 6
  • 74
  • 100
Carlo
  • 25,602
  • 32
  • 128
  • 176

1 Answers1

3

If you extract the template for a GridViewItem - you'll see that it has some hardcoded values - 4pt Margins, 40x40 paths etc. To go around that - you would need to modify the template, but you can hard-code the item dimensions to make them smaller - just make sure you are OK with invisible selection checkmarks:

    <GridView
        Margin="120,80,0,0"
        SelectionMode="Multiple">
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel
                    Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
        <GridView.ItemContainerStyle>
            <Style
                TargetType="GridViewItem">
                <Setter
                    Property="HorizontalAlignment"
                    Value="Center" />
                <Setter
                    Property="VerticalAlignment"
                    Value="Center" />
                <Setter
                    Property="Width"
                    Value="20" />
                <Setter
                    Property="Height"
                    Value="20" />
                <Setter
                    Property="Padding"
                    Value="0" />
                <Setter
                    Property="Margin"
                    Value="0" />
            </Style>
        </GridView.ItemContainerStyle>
        <Rectangle
            Height="10"
            Width="10"
            Fill="Red" />
        <Rectangle
            Height="10"
            Width="10"
            Fill="Orange" />
        <Rectangle
            Height="10"
            Width="10"
            Fill="Blue" />
        <Rectangle
            Height="10"
            Width="10"
            Fill="Green" />
        <Rectangle
            Height="10"
            Width="10"
            Fill="Yellow" />
    </GridView>
Filip Skakun
  • 31,624
  • 6
  • 74
  • 100
  • I don't want to hard code the size, cause then the bigger items will get cropped. I'll give it a shot extracting the template with Blend, will let you know how it goes. Thanks! – Carlo May 08 '12 at 17:18