Reputation: 71
I developed a WPF application under WinXP and my ListView had my expected layout. After starting the same software under Win7, I saw that the ListViewItems have a small gap between each row.
I played with Margin und Padding for each element, but I can’t find a solution where the layout is the same under WinXP and Win7 without writing individual code.
I assume that it has something to do with the current Windows theme, but I can’t catch it. Does some have a hint?
Screenshot WindowsXP
Screenshot Windows 7
Here is some (simplified) XAML that I use
<ListView x:Name="ListView">
<ListView.Resources>
<Style x:Key="CellBorderStyle" TargetType="{x:Type Border}">
<Setter Property="BorderThickness" Value="0,0,1,1"></Setter>
<Setter Property="BorderBrush" Value="LightGray"></Setter>
<Setter Property="Margin" Value="-6,0,-6,0"></Setter>
</Style>
<DataTemplate x:Key="NameTemplate">
<Border Name="NameBorder" Style="{StaticResource CellBorderStyle}">
<TextBlock>MyName</TextBlock>
</Border>
</DataTemplate>
<DataTemplate x:Key="AddressTemplate">
<Border Name="AddressBorder" Style="{StaticResource CellBorderStyle}" Background="LightSteelBlue">
<TextBlock>MyAddress</TextBlock>
</Border>
</DataTemplate>
<DataTemplate x:Key="StreetTemplate">
<Border Name="StreetBorder" Style="{StaticResource CellBorderStyle}" Background="LightGreen">
<TextBlock>MyStreet</TextBlock>
</Border>
</DataTemplate>
<DataTemplate x:Key="CityTemplate">
<Border Name="CityBorder" Style="{StaticResource CellBorderStyle}">
<TextBlock>MyCity</TextBlock>
</Border>
</DataTemplate>
</ListView.Resources>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn Header="Name" x:Name="colName"
CellTemplate="{StaticResource NameTemplate}"></GridViewColumn>
<GridViewColumn Header="Address" x:Name="colAddress"
CellTemplate="{StaticResource AddressTemplate}"></GridViewColumn>
<GridViewColumn Header="Street" x:Name="colStreet"
CellTemplate="{StaticResource StreetTemplate}"></GridViewColumn>
<GridViewColumn Header="City" x:Name="colCity"
CellTemplate="{StaticResource CityTemplate}"></GridViewColumn>
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
Upvotes: 2
Views: 4669
Reputation: 1524
You have to change the border top and bottom margins as well:
enter code here
<Setter Property="Margin" Value="-6,0,-6,0"></Setter>
to:
<Setter Property="Margin" Value="-6,-3,-6,-3"></Setter>
Upvotes: 1
Reputation: 71
Extracted ControlTemplate using Expression Blend. Modified BorderThickness in Style of ListViewItem to 0.
<UserControl.Resources>
<Style x:Key="ListViewItemFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle RadiusY="2" RadiusX="2" Stroke="#8E6EA6F5" StrokeThickness="1"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<LinearGradientBrush x:Key="ListItemHoverFill" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF1FBFF" Offset="0"/>
<GradientStop Color="#FFD5F1FE" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ListItemSelectedFill" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFD9F4FF" Offset="0"/>
<GradientStop Color="#FF9BDDFB" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ListItemSelectedInactiveFill" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFEEEDED" Offset="0"/>
<GradientStop Color="#FFDDDDDD" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ListItemSelectedHoverFill" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFEAF9FF" Offset="0"/>
<GradientStop Color="#FFC9EDFD" Offset="1"/>
</LinearGradientBrush>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ListViewItemFocusVisual}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Margin" Value="0,0,0,1"/>
<Setter Property="Padding" Value="5,2,5,2"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="2" SnapsToDevicePixels="true">
<Border x:Name="InnerBorder" BorderThickness="1" CornerRadius="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="11"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Rectangle x:Name="UpperHighlight" Fill="#75FFFFFF" Visibility="Collapsed"/>
<GridViewRowPresenter Grid.RowSpan="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="{StaticResource ListItemHoverFill}"/>
<Setter Property="BorderBrush" Value="#FFCCF0FF"/>
<Setter Property="Visibility" TargetName="UpperHighlight" Value="Visible"/>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" Value="{StaticResource ListItemSelectedFill}"/>
<Setter Property="BorderBrush" Value="#FF98DDFB"/>
<Setter Property="BorderBrush" TargetName="InnerBorder" Value="#80FFFFFF"/>
<Setter Property="Visibility" TargetName="UpperHighlight" Value="Visible"/>
<Setter Property="Fill" TargetName="UpperHighlight" Value="#40FFFFFF"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="Selector.IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="Background" Value="{StaticResource ListItemSelectedInactiveFill}"/>
<Setter Property="BorderBrush" Value="#FFCFCFCF"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="IsMouseOver" Value="true"/>
</MultiTrigger.Conditions>
<Setter Property="Background" Value="{StaticResource ListItemSelectedHoverFill}"/>
<Setter Property="BorderBrush" Value="#FF98DDFB"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
Upvotes: 1
Reputation: 9
The extra space if putting focus on the listview.
It goes away when you use
<Setter Property="Focusable" Value="false"/>
On the itemcontainerstyle
Upvotes: 0