locked
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 03, 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 05, 2014 4:45 PM
    Saturday, May 03, 2014 9:40 AM