WPF ListView中的网格线

Question

我们如何在WPFListView控件中显示网格线？

- atul gupta

Answer 1

请尝试以下资源-它们都提供类似的简单解决方案，我过去曾成功使用过。

WPF ListView垂直线（水平线作为奖励）

如何为我的ListView设置网格线？

更新：链接现在指向网络页面的存档副本，因为这些页面已经下线了。

- Noldorin

---

对于第二个链接中的解决方案，最后一行缺少底部边框。一个小调整是将单元格的边框设置为“1,0,0,0”（仅左侧），并将最后一列的边框设置为“1,0,1,0”（或“1,0”）左右两侧 - 然后还要在ListView.ItemContainerStyle的边框刷和边框厚度中添加“0,0,0,1” - 即单元格负责垂直线，而行（ItemContainer）负责水平线。我会附上一个代码示例的答案。 - Maverick Meerkat

Answer 2

进一步解释我的对所选答案的评论 -（不得不在右边缘使用-8）

<ListView HorizontalContentAlignment="Stretch" BorderBrush="Gray" BorderThickness="1" ItemsSource="{Binding FileList}" SelectedItem="{Binding FileSelected, Mode=TwoWay}" >
    <ListView.Resources>
        <DataTemplate x:Key="VerTemplate">
            <Border BorderBrush="Gray" BorderThickness="1,0,0,0" Margin="-6,-2,-8,-2">
                <StackPanel Margin="6,2,6,2">
                    <TextBlock Text="{Binding SFVer}" HorizontalAlignment="Center" TextAlignment="Center"  />
                </StackPanel>
            </Border>
        </DataTemplate>
        <DataTemplate x:Key="FOTemplate">
            <Border BorderBrush="Gray" BorderThickness="1,0,0,0" Margin="-6,-2,-8,-2">
                <StackPanel Margin="6,2,6,2">
                    <TextBlock Text="{Binding SFFO}" HorizontalAlignment="Center" TextAlignment="Center"  />
                </StackPanel>
            </Border>
        </DataTemplate>             
        <!-- etc. -->
    </ListView.Resources>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="BorderBrush" Value="Gray"></Setter>
            <Setter Property="BorderThickness" Value="0,0,0,1"></Setter>
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.View>
        <GridView AllowsColumnReorder="False">
            <GridView.Columns>
                <GridViewColumn CellTemplate="{StaticResource VerTemplate}"/>
                <GridViewColumn CellTemplate="{StaticResource FOTemplate}"/>
                <!-- etc. -->
            </GridView.Columns>
        </GridView>
    </ListView.View>            
</ListView>

结果：

- Maverick Meerkat

Answer 3

今日免费次数已满, 请开通会员/明日再来

    protected override Size ArrangeOverride(Size arrangeSize)
    {
        var size = base.ArrangeOverride(arrangeSize);
        var children = Children.ToList();
        EnsureLines(children.Count);
        for (var i = 0; i < _lines.Count; i++)
        {
            var child = children[i];
            var x = child.TransformToAncestor(this).Transform(new Point(child.ActualWidth, 0)).X + child.Margin.Right;
            var rect = new Rect(x, -Margin.Top, 1, size.Height + Margin.Top + Margin.Bottom);
            var line = _lines[i];
            line.Measure(rect.Size);
            line.Arrange(rect);
        }
        return size;
    }

然后将其用于ListViewItem模板。

        <ListView.ItemContainerStyle>
            <Style TargetType="{x:Type ListViewItem}">
                <Setter Property="Margin" Value="2,0,0,0"/>
                <Setter Property="Padding" Value="0,2"/>
                <Setter Property="BorderBrush" Value="LightGray"/>
                <Setter Property="BorderThickness" Value="0,0,0,1"/>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListViewItem}">
                            <Border BorderBrush="{TemplateBinding BorderBrush}" 
                                    BorderThickness="{TemplateBinding BorderThickness}" 
                                    Background="{TemplateBinding Background}">
                                <GridLines:GridViewRowPresenterWithGridLines 
                                    Columns="{TemplateBinding GridView.ColumnCollection}"
                                    Margin="{TemplateBinding Padding}" />
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ListView.ItemContainerStyle>

See details in my blog entry

- Bulat

---

我很高兴你解决了这个问题，但我真正希望的是像 GridLines="Vertical" 这样的东西。 - Cheeso

你不会相信，但我也希望如此。而且，只是为了写出GridLines="Vertical"这句话，我花了半天时间去搜索和找解决方案。 - Bulat

对于像 GridLines="Vertical" 这样简单的东西，点赞。这又是微软 WPF 的一次失败。 - BSalita

Answer 4

晚回答了，但或许能帮到其他人：

首先创建一个单元格模板边框的样式，如下所示：

 <Style x:Key="BorderStyle" TargetType="{x:Type Border}">
     <Setter Property="BorderThickness" Value="0,0,1,0"></Setter>
     <Setter Property="BorderBrush" Value="Black"></Setter>
     <Setter Property="Margin" Value="0,0,-7,0"></Setter>
 </Style>
 <DataTemplate x:Key="_SomeColumnCellTemplate">
     <Border Style="{StaticResource BorderStyle}">
        <DockPanel Margin="5,0,0,0">
           <TextBlock Text="{Binding Name}" Margin="5,0,0,0"/>
        </DockPanel>
     </Border>
  </DataTemplate>

然后将您的itemcontainer样式设置如下：

  <Style x:Key="_ItemContainerStyle" TargetType="{x:Type ListViewItem}">
     <Setter Property="HorizontalContentAlignment" Value="Stretch" />
     <Setter Property="VerticalContentAlignment" Value="Stretch" />
  </Style>

最后，将您的ListView项容器样式资源引用如下（在此代码中，我跳过了绑定到ListView项源）：

<ListView ItemContainerStyle="{StaticResource _ListViewItemContainerStyle}">
   <ListView.View>
      <GridView>
         <GridViewColumn Header="SomeName" CellTemplate="{StaticResource _SomeColumnCellTemplate}"/>
      </GridView>
   </ListView.View>
</ListView>

- Ahmad