I'm trying to build two ListView
objects within a StackPanel
and have all of the ItemTemplate
Tiles "touch" each other (meaning no margin or padding within the ListView
s). It seems that Windows 8 Metro has some sort of built-in padding/margin. My question: How do I remove these or set them to 0
?
Here is my code:
<StackPanel x:Name="teesSP"
HorizontalAlignment="Left"
Orientation="Horizontal"
VerticalAlignment="Top" >
<ListView x:Name="timesLV1"
SelectionMode="Multiple"
SelectionChanged="timesLV_Click"
ItemTemplate="{StaticResource TimeTileTemplate}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="0"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<ListView x:Name="timesLV2"
SelectionMode="Multiple"
SelectionChanged="timesLV_Click"
ItemTemplate="{StaticResource TimeTileTemplate}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="0"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
</StackPanel>
My ItemTemplate
is:
<DataTemplate x:Key="TimeTileTemplate">
<Grid HorizontalAlignment="Center" Background="White" >
<Border BorderBrush="Black" BorderThickness="2" >
<StackPanel Margin="0,0,0,0" Orientation="Horizontal"
Width="130" Height="60" VerticalAlignment="Center" >
<TextBlock Margin="2,0,0,0" TextWrapping="Wrap"
Style="{StaticResource ItemSubtitleStyle}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Text="{Binding startTime}" Width="70" />
<TextBlock TextWrapping="Wrap"
Style="{StaticResource ItemTitleStyle}"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Text="{Binding startHole}" Width="40" />
</StackPanel>
</Border>
</Grid>
</DataTemplate>
...and it renders the following:
You should supply a negative Margin
:
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Margin" Value="0,0,0,-8" />
</Style>
</ListView.ItemContainerStyle>
After 1 hour searching. Here is a way better solution than the negative margin:
Following, the code allowing you to have the margin you want! (here: 0)
<Style x:Key="ListViewItemStyle1" TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter ContentMargin="0" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
...
<ListView ItemContainerStyle="{StaticResource ListViewItemStyle1}">
//your listView items
</ListView>
I have already found rather clear solution for this problem!
<Style x:Key="NoSpacesListViewItemStyle" TargetType="ListViewItem">
<Setter Property="Margin" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter ContentMargin="0" SelectionCheckMarkVisualEnabled="False" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ListView IsSwipeEnabled="False"
ItemContainerStyle="{StaticResource NoSpacesListViewItemStyle}"
ItemTemplate="{StaticResource SomeTemplate}"
ItemsSource="{Binding SomeData}"
SelectionMode="None"/>
Also I can admit that Selection borders will not work in this case. So this method is not appropriate for ListViews with selection.
There is full default ListViewItemStyle with same changes:
<Style x:Key="NoSpacesListViewItemStyle" TargetType="ListViewItem">
<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" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}"
CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}"
CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}"
ContentMargin="0"
ContentTransitions="{TemplateBinding ContentTransitions}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}"
Padding="{TemplateBinding Padding}"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}"
PointerOverBackgroundMargin="1"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}"
SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}"
SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}"
SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}"
SelectionCheckMarkVisualEnabled="False" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With