Question

我正在尝试在ListViewItem中的列之间放置垂直线。我试过给出的解决方案。但它不起作用。任何人都可以帮我解决这个问题。我为ListViewItem创建了一个单独的样式。我需要在样式中添加一些属性吗？

代码就像这样

<ListView x:Key="ListView1" ItemContainerStyle="{DynamicResource ListViewItemStyle1}">
<ListView.View>
    <GridView>
        <GridViewColumn Header="{TemplateBinding GridView.ColumnCollection}">
            <GridViewColumn.CellTemplate>
                <DataTemplate>
                    <Border BorderBrush="#FF000000" BorderThickness="1,0,0,0" Margin="-6,-2,-6,-2">
                        <StackPanel Margin="6,2,6,2">
                            <TextBlock Text="{TemplateBinding Content}"/>
                        </StackPanel>
                     </Border>
                </DataTemplate>
            </GridViewColumn.CellTemplate>
        </GridViewColumn>
    </GridView>
</ListView.View>
</ListView>

从字面上看它应该有用，但它不起作用。我无法使用上面的代码添加垂直线。

Answer 1

这是一个带有ListView和两列的简短示例。诀窍是定义一个带边框的DataTemplate，拉伸边框以填充单元格（参见ItemContainerStyle，Style ListViewItem，H / V-ContentAligment = Stretch）并显示（在本例中）右边和底线（通过BorderThickness = “0,0,1,1”）。对于您的情况，请使用BorderThickness =“0,0,1,0”

    <ListView ItemsSource="{Binding}">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.Resources>
            <DataTemplate x:Key="NameTemplate">
                <Border BorderThickness="0,0,1,1" BorderBrush="LightGray" Margin="-6,0,-6,0">
                    <TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" VerticalAlignment="Center" TextTrimming="CharacterEllipsis"></TextBlock>
                </Border>
            </DataTemplate>
            <DataTemplate x:Key="ActualValueTemplate">
                <Border BorderThickness="0,0,1,1" BorderBrush="LightGray" Margin="-6,0,-6,0">
                    <TextBlock Name="ActualValueTextBlock" Margin="2,1,1,1" Text="{Binding TextMeasuredValue}" VerticalAlignment="Center"></TextBlock>
                </Border>
            </DataTemplate>
        </ListView.Resources>
        <ListView.View>
            <GridView>
                <GridView.Columns>
                    <GridViewColumn Header="Name" CellTemplate="{StaticResource NameTemplate}"></GridViewColumn>
                    <GridViewColumn Header="Actual Value" CellTemplate="{StaticResource ActualValueTemplate}"></GridViewColumn>
                </GridView.Columns>
            </GridView>
        </ListView.View>
    </ListView>

修改
我使用了您的源代码进行了一些小修改：

<ListView ItemContainerStyle="{DynamicResource ListViewItemStyle1}"> <ListView.View> <GridView> <GridViewColumn Header="My Header"> <GridViewColumn.CellTemplate> <DataTemplate> <Border BorderBrush="#FF000000" BorderThickness="1,0,1,0" Margin="-6,-2,-6,-2"> <StackPanel Margin="6,2,6,2"> <TextBlock Text="{TemplateBinding Content}"/> </StackPanel> </Border> </DataTemplate> </GridViewColumn.CellTemplate> </GridViewColumn> </GridView> </ListView.View> <ListViewItem>Hello</ListViewItem> <ListViewItem>Stack</ListViewItem> <ListViewItem>Overflow</ListViewItem> </ListView>

结果是这样的：

我在右侧添加了垂直线以获得更好的可见度，并且边框没有拉伸到单元格的边界 - 好吧，所以它看起来有些难看。但正如你所看到的，它正在发挥作用。

Answer 2

尝试为边框的背景着色以使其可见

示例：

<Border BorderBrush="#FF000000" Background="Red" BorderThickness="1,0,1,0" Margin="-6,-2,-6,-2">

如果您在内容后面看到一个红色矩形，请使用Margin和BorderThickness的值进行进一步调试。

Answer 3

检查这是否有帮助

http://blogs.microsoft.co.il/blogs/tomershamam/archive/2007/12/16/wpf-listview-vertical-lines-horizontal-as-bonus.aspx

http://www.designerwpf.com/2007/12/11/how-do-i-set-up-grid-lines-for-my-listview/

如何在WPF中为listviewitem添加垂直行

3 个答案: