UWP Xaml GridViewItem: Remove margin

Question

I want to create a grid of images without any margin between them. I tried to achieve this through a GridView. If there is an easier way, please let me know.

I found this answers on StackOverflow:

https://stackoverflow.com/a/10492464

https://stackoverflow.com/a/23817931/5739170

And ended up with this code:

<Page.Resources>
    <Style x:Key="MyGridViewItemStyle" TargetType="GridViewItem">
        <Setter Property="Padding" Value="0" />
        <Setter Property="Margin" Value="0" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GridViewItem">
                    <GridViewItemPresenter ContentMargin="0" Padding="0" Margin="0" BorderThickness="0"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

    </Style>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel>
        <GridView ItemsSource="{x:Bind FieldList}" Margin="0,50,0,0" Padding="0" BorderThickness="0" ItemContainerStyle="{StaticResource MyGridViewItemStyle}" IsItemClickEnabled="True" ItemClick="OnItemClick">
            <GridView.ItemTemplate>
                <DataTemplate x:DataType="data:Field">
                    <Image Width="20" Height="20" Margin="0" Source="{x:Bind ImagePath}"/>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
        <TextBlock x:Name="text">Hallo!</TextBlock>
    </StackPanel>
</Grid>

But there is still a margin left: Screenshot

I have also tried to use negative margins but when I use them clicks aren't recognized correctly anymore.

How can I remove the margins?

is the margin on the image itself? – d.moncada Jan 02 '16 at 23:17 — d.moncada, Jan 02 '16 at 23:17

score 7 · Accepted Answer · answered Jan 03 '16 at 20:51

7

Seems like the GridViewItem has a default MinWidth of 44px.

You can set it to 0 via your GridViewItemStyle:

<Setter Property="MinWidth" Value="0" />

EDIT: it also has a default MinHeight, you might want to set that to 0 as well.

answered Jan 03 '16 at 20:51

Tom Wuyts

855
1
11
27

I tried like 1000 different things until I saw this answer. Great! That MinWidth should be 0 by default! – xleon May 21 '16 at 15:19

score 0 · Answer 2 · answered Jan 04 '16 at 06:03

0

The code below should work:

<GridView.ItemContainerStyle> <Style TargetType="GridViewItem"> <Setter Property="Margin" Value="0"/> </Style> </GridView.ItemContainerStyle>

answered Jan 04 '16 at 06:03

JuniperPhoton

736
5
14

not sure why you got downvoted - this worked perfectly for me. thanks for taking the time to add your answer. – dav1dsm1th Feb 11 '16 at 01:27
1

This doesn't work for items below the MinHeight of 44. If you don't set the MinHeight to 0 there will still be top and bottom spacing. – theDawckta Aug 22 '16 at 23:35

score 0 · Answer 3 · answered Jan 04 '16 at 09:54

Your code is good. If you add a Grid in the DataTemplate (with a Background), you will see there is no margin between grids :

<DataTemplate x:DataType="data:Field">
    <Grid Background="Red">
        <Image Width="20" Height="20" Margin="0" Source="{x:Bind ImagePath}"/>
    </Grid>
</DataTemplate>

Your problem is the following : you set a fixed size for Image control wich all of them is in a container, but the container doesn't have a fixed, so images are centered in the container.

I see two solutions. First is to remove the fixed size for Image control and use Strecth property to fill correctly :

<DataTemplate x:DataType="data:Field">
    <Image VerticalAlignment="Stretch" 
           HorizontalAlignment="Stretch" 
           Stretch="UniformToFill" 
           Margin="0" 
           Source="{x:Bind ImagePath}"/>
</DataTemplate>

For the first solution, you must be sure of the filling behavior of the container. You can do something like :

<GridViewItemPresenter ContentMargin="0"
                       Padding="0"
                       Margin="0"
                       BorderThickness="0"
                       HorizontalAlignment="Stretch"
                       HorizontalContentAlignment="Stretch" />

The second solution is to set a fixed size on the container directly :

<Style x:Key="MyGridViewItemStyle"
       TargetType="GridViewItem">
    <Setter Property="Padding"
            Value="0" />
    <Setter Property="Margin"
            Value="0" />
    <Setter Property="BorderThickness"
            Value="0" />
    <Setter Property="Width"
            Value="20" />
    <Setter Property="Height"
            Value="20" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridViewItem">
                <GridViewItemPresenter ContentMargin="0"
                                       Padding="0"
                                       Margin="0"
                                       BorderThickness="0"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

</Style>

UWP Xaml GridViewItem: Remove margin

3 Answers3