Answered by:
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