Remove From My Forums

What's the standard margin/gap between the GridView items?

Question

I have a simple GridView defined as following

            <GridView Background="#FF179C84">
                <Border Background="#FFB40F0F">
                    <Image Source="Assets/StoreLogo.Scale-100.png"/>
                </Border>
                <Border Background="#FFB40F0F">
                    <Image Source="Assets/StoreLogo.Scale-100.png"/>
                </Border>
                <Border Background="#FFB40F0F">
                    <Image Source="Assets/StoreLogo.Scale-100.png"/>
                </Border>
                <Border Background="#FFB40F0F">
                    <Image Source="Assets/StoreLogo.Scale-100.png"/>
                </Border>
                <Border Background="#FFB40F0F">
                    <Image Source="Assets/StoreLogo.Scale-100.png"/>
                </Border>
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ItemsWrapGrid MaximumRowsOrColumns="3"/>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
            </GridView>

I didn't defined any margin or padding for the gridView and items. The output GridView is like this:

Notice that for the top row items, the top margin is about 4 pixels, and for the left column items, the left margin is 4. And between the images the gap is 10 pixels.

Are those margin/gap sizes the standard margin/gap values for the GridView Items?

LChen_MSDN

Saturday, May 3, 2014 12:24 AM

Answers

The default value of the Padding property for a GridView is 0,0,0,10. The reason why you see some additional padding/margin around the GridView and the GridViewItems is that the default ControlTemplate for a GridViewItem specifies a ContentMargin of 4.

You can change this by modifying the template: Right-click the GridView in desing mode in Visual Studio, select "Edit additional templates"->"Edit Generated Item Container (ItemContainerStyle)->"Edit a copy". This will generate the default template in XAML and you can then change the Margin property of the GridViewItem and the ContentMargin property of the GridViewItemPresenter in its ControlTemplate:

<Page.Resources>
        <Style x:Key="GridViewItemStyle1" TargetType="GridViewItem">
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="TabNavigation" Value="Local"/>
            <Setter Property="IsHoldingEnabled" Value="True"/>
            <Setter Property="Margin" Value="0,0,0,0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GridViewItem">
                        <GridViewItemPresenter CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}" CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}" 
                                               ContentMargin="0" ContentTransitions="{TemplateBinding ContentTransitions}" CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}" DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" PointerOverBackgroundMargin="1" PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}" ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" SelectionCheckMarkVisualEnabled="True" SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" SelectedBorderThickness="{ThemeResource GridViewItemCompactSelectedBorderThemeThickness}" SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <GridView Background="#FF179C84" ItemContainerStyle="{StaticResource GridViewItemStyle1}" >
            <Border Background="#FFB40F0F">
                <Image Source="Assets/StoreLogo.Scale-100.png"/>
            </Border>
            <Border Background="#FFB40F0F">
                <Image Source="Assets/StoreLogo.Scale-100.png"/>
            </Border>
            <Border Background="#FFB40F0F">
                <Image Source="Assets/StoreLogo.Scale-100.png"/>
            </Border>
            <Border Background="#FFB40F0F">
                <Image Source="Assets/StoreLogo.Scale-100.png"/>
            </Border>
            <Border Background="#FFB40F0F">
                <Image Source="Assets/StoreLogo.Scale-100.png"/>
            </Border>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid MaximumRowsOrColumns="3"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
        </GridView>
    </StackPanel>

Marked as answer by LChen_MSDN Monday, May 5, 2014 4:45 PM

Saturday, May 3, 2014 9:40 AM

Answered by:

What's the standard margin/gap between the GridView items?

Question

Answers