【问题标题】:How to remove gap between ListViewItems in Win7Win7中如何消除ListViewItems之间的差距
【发布时间】:2011-11-16 21:37:29
【问题描述】:

我在 WinXP 下开发了一个 WPF 应用程序,我的 ListView 具有我预期的布局。在Win7下启动同一个软件后,看到ListViewItems的每一行之间有一个小间隙。 我为每个元素使用了 Margin 和 Padding,但我找不到在 WinXP 和 Win7 下布局相同而不编写单独代码的解决方案。
我认为它与当前的 Windows 主题有关,但我无法理解。有人有提示吗?

WindowsXP截图

Windows 7 截图

这是我使用的一些(简化的)XAML

<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>

【问题讨论】:

  • 我无法直接回答您的问题,但可以推荐 WPF 间谍实用程序 Snoop。您可以分析应用程序的每个元素并在应用程序运行时立即更改其属性。也许您可以找到一种方法来更改属性,让列表项看起来像您想要的那样,然后在您的 xaml 文件中进行这些更改。

标签: wpf listview windows-7 windows-xp


【解决方案1】:

您还必须更改边框顶部和底部边距:

enter code here
        <Setter Property="Margin" Value="-6,0,-6,0"></Setter>
to:
        <Setter Property="Margin" Value="-6,-3,-6,-3"></Setter>

【讨论】:

    【解决方案2】:

    使用 Expression Blend 提取的 ControlTemplate。修改 ListViewItem Style 中的 BorderThickness 为 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>
    

    【讨论】:

    • 成功了!
    【解决方案3】:

    将焦点放在列表视图上时的额外空间。

    使用后消失

    <Setter Property="Focusable" Value="false"/>
    

    关于itemcontainerstyle

    【讨论】: