WPF实现Table布局控件的示例代码

更新时间：2024年10月21日 11:47:48 作者：WPF开发者

这篇文章主要为大家详细介绍了如何使用WPF实现Table布局控件,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下

WPF 实现 Table 布局控件

框架支持.NET4 至 .NET8；
Visual Studio 2022;

有开发者提出希望 WPF 使用 HTML 的 table 标签进行显示表格？

html示例如下：

 <table>
   <th>Header 1</th>  
   <tr>
     <td>Cell 1</td>
   </tr>
 </table>

因为需要快速实现表格功能时，我选择基于 Grid 控件，因为 Grid 提供了对跨行和跨列布局的支持。

一、新建 Td.cs 控件继承自 Label 代码如下：

主要内容：

属性 RowSpan 和 ColumnSpan：

RowSpan 和 ColumnSpan 分别定义了行跨度和列跨度的依赖属性，设置了默认值为 1。

属性可以在 C# 或者 XAML 中进行设置和获取。

Td 控件适用于在 WPF 中实现复杂的表格布局，通过行和列的跨度属性，可以灵活地控制表格中单元格的布局。

using System.Windows;
using System.Windows.Controls;

namespace WPFTableGrid
{
    public class Td : Label
    {
        public static readonly DependencyProperty RowSpanProperty =
            DependencyProperty.Register("RowSpan", typeof(int), typeof(Td), new PropertyMetadata(1));

        public int RowSpan
        {
            get { return (int)GetValue(RowSpanProperty); }
            set { SetValue(RowSpanProperty, value); }
        }

        public static readonly DependencyProperty ColumnSpanProperty =
            DependencyProperty.Register("ColumnSpan", typeof(int), typeof(Td), new PropertyMetadata(1));

        public int ColumnSpan
        {
            get { return (int)GetValue(ColumnSpanProperty); }
            set { SetValue(ColumnSpanProperty, value); }
        }

        static Td()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(Td),
                new FrameworkPropertyMetadata(typeof(Td)));
        }
    }
}

设置 Td 控件的 Style

<Style TargetType="local:Td">
    <Setter Property="Background" Value="White" />
    <Setter Property="BorderBrush" Value="Black" />
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
</Style>

二、新建 Tr.cs 继承自 Grid，代表表格中的一行代码如下：

using System.Windows.Controls;

namespace WPFTableGrid
{
    public class Tr : Grid
    {
        
    }
}

三、新建 Th.cs 继承自 Label，表示表头的单元格代码如下：

BorderBrush 设置表格线颜色。

BorderThickness 设置 Table 表格边框。

using System.Windows.Controls;

namespace WPFTableGrid
{
    public class Th : Label
    {
    }
}

设置 Th 控件的 Style

  <Style TargetType="local:Th">
      <Setter Property="Background" Value="LightGray" />
      <Setter Property="FontWeight" Value="Bold" />
      <Setter Property="BorderBrush" Value="Black" />
      <Setter Property="Foreground" Value="Black" />
      <Setter Property="HorizontalContentAlignment" Value="Center" />
      <Setter Property="VerticalContentAlignment" Value="Center" />
      <Setter Property="SnapsToDevicePixels" Value="True" />
  </Style>

四、新建 Table.cs 继承自 Grid 控件,支持子控件行和列的定义。代码如下：

_zIndex 记录控件的 Z 顺序。
构造函数：注册 Loaded 事件处理控件的行列。
算出表格的行数：统计内部 Tr 控件的数量，加上一行（表头）。
算出列数：找到所有 Tr 中的 Td 单元格，并根据 GetColumnSpan 方法确定最大列数。
每个表头 Th ，设置其在表格中的位置，并调整边框。
循环每行 Tr 并处理其子控件 Td。
删除其原始父容器 Tr 的引用。
将其添加到 Table 的子集。
设置 Td 的行和列。
如果 Td 跨行或跨列，会更改其 Z 顺序。

using System.Windows;
using System.Windows.Controls;

namespace WPFTableGrid
{
    public class Table : Grid
    {
        private int _zIndex = 1;
        public Table()
        {
            Loaded += OnLoaded;
        }

        private void OnLoaded(object sender, RoutedEventArgs e)
        {
            UpdateControl();
        }

        private void UpdateControl()
        {
            RowDefinitions.Clear();
            ColumnDefinitions.Clear();

            if (InternalChildren.Count > 0)
            {
                var rows = InternalChildren.OfType<Tr>().Count() + 1;
                for (int i = 0; i < rows; i++)
                    RowDefinitions.Add(new RowDefinition());

                var columns = InternalChildren.OfType<Tr>().Max(child => child.Children.OfType<Td>().Sum(td => GetColumnSpan(td)));
                for (int i = 0; i < columns; i++)
                    ColumnDefinitions.Add(new ColumnDefinition());

                var index = 0;
                var list = InternalChildren.OfType<Tr>().ToList();

                var ths = InternalChildren.OfType<Th>().ToList();
                var hIndex = 0;
                for (int j = 0; j < ths.Count; j++)
                {
                    Th header = ths[j];
                    if (j == 0)
                        header.BorderThickness = new Thickness(1, 1, 1, 1);
                    else
                        header.BorderThickness = new Thickness(0, 1, 1, 1);
                    SetRow(header, index);
                    SetColumn(header, hIndex);
                    hIndex++;
                }
                for (int j = 0; j < list.Count; j++)
                {
                    index++;
                    Tr row = list[j];
                    var cIndex = 0;
                    var childElements = row.Children.OfType<Td>().ToList();
                    foreach (var cell in childElements)
                    {
                        if (cell.Parent is Panel oldParent)
                        {
                            oldParent.Children.Remove(cell);
                        }
                        Children.Add(cell);
                        if (cIndex == 0)
                            cell.BorderThickness = new Thickness(1, 0, 1, 1);
                        else
                            cell.BorderThickness = new Thickness(0, 0, 1, 1);
                        SetRow(cell, index);
                        SetColumn(cell, cIndex);
                        cell.SetValue(RowSpanProperty, cell.RowSpan);
                        cell.SetValue(ColumnSpanProperty, cell.ColumnSpan);
                        if (cell.RowSpan > 1 || cell.ColumnSpan > 1)
                        {
                            SetZIndex(cell, _zIndex);
                            _zIndex++;
                        }

                        cIndex++;
                    }
                }
            }
        }
    }
}

四、新建 TableExample.xaml 示例代码如下：

<wd:Window
    x:Class="WPFTableGrid.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:WPFTableGrid"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:wd="https://github.com/WPFDevelopersOrg/WPFDevelopers"
    Title="WPFDevelopers - Table"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Window.Resources>
        <Style TargetType="local:Th">
            <Setter Property="Background" Value="LightGray" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="BorderBrush" Value="Black" />
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
        </Style>
        <Style TargetType="local:Td">
            <Setter Property="Background" Value="White" />
            <Setter Property="BorderBrush" Value="Black" />
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
            
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Button
            Margin="0,10,0,0"
            HorizontalAlignment="Center"
            Click="BtnHeader_Click"
            Content="Header"
            Style="{StaticResource WD.DangerPrimaryButton}" />
        <local:Table Grid.Row="1" Margin="10">
            <local:Th Content="Header 1" />
            <local:Th Content="Header 2" />
            <local:Th Content="Header 3" />
            <local:Tr>
                <local:Td Content="Cell 1" />
                <local:Td>
                    <TextBlock Margin="5" Text="Cell 2" />
                </local:Td>
                <local:Td>
                    <TextBlock Margin="5" Text="Cell 3" />
                </local:Td>
            </local:Tr>
            <local:Tr>
                <local:Td RowSpan="3">
                    <TextBlock Margin="4" Text="Cell 4" />
                </local:Td>
                <local:Td>
                    <TextBlock Margin="5" Text="Cell 5" />
                </local:Td>
                <local:Td>
                    <TextBlock Margin="5" Text="Cell 6" />
                </local:Td>
            </local:Tr>
            <local:Tr>
                <local:Td>
                    <TextBlock Margin="5" Text="Cell 7" />
                </local:Td>
                <local:Td ColumnSpan="2">
                    <TextBlock Margin="5" Text="Cell 8" />
                </local:Td>
                <local:Td>
                    <TextBlock Margin="5" Text="Cell 9" />
                </local:Td>
            </local:Tr>
        </local:Table>
    </Grid>
</wd:Window>

效果图

该方案基于 Grid 控件进行实现。对于更高级的需求，可以考虑将其修改为基于 Panel，自定义列的显示方式以及实现跨行和跨列的布局。

文中 XAML 中使用 WPFDevelopers库，如果直接拷贝使用，需要确保将相关的资源和控件进行正确的替换和配置。

到此这篇关于WPF实现Table布局控件的示例代码的文章就介绍到这了,更多相关WPF Table布局控件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家

您可能感兴趣的文章:

WPF
Table

详解C# List＜T＞的Contains,Exists,Any,Where性能对比
这篇文章主要介绍了详解C# List＜T＞的Contains,Exists,Any,Where性能对比，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
终于了解了下.net 和 j2ee的区别
终于了解了下.net 和 j2ee的区别...
2007-04-04
C# JsonHelper 操作辅助类，拿来直接用
本文总结了一些常用的JSON操作辅助类，包括转换、判断、Ajax异步等操作，希望能帮到大家。
2016-05-05
C#中把字符串String转换为整型Int的小例子
这篇文章主要介绍了C#中把字符串String转换为整型Int的小例子,本文使用TryParse方法实现转换,需要的朋友可以参考下
2014-08-08
C#/VB.NET读取条码类型及条码在图片中的坐标位置实例
我们在创建条形码时,如果以图片的方式将创建好的条码保存到指定文件夹路径,可以在程序中直接加载图片使用；已生成的条码图片,需要通过读取图片中的条码信息,如条码类型、条码绘制区域在图片中的四个顶点坐标位置等,可参考本文中的方法
2023-10-10
C#基于socket模拟http请求的方法
这篇文章主要介绍了C#基于socket模拟http请求的方法,实例分析了socket模拟http请求的实现技巧,需要的朋友可以参考下
2015-06-06
C#运行CGI程序实例
这篇文章主要介绍了C#运行CGI程序的方法,实例讲述了具体的配置步骤与实现代码,具有一定的参考借鉴价值,需要的朋友可以参考下
2014-12-12
C#抓取当前屏幕并保存为图片的方法
这篇文章主要介绍了C#抓取当前屏幕并保存为图片的方法,实例分析了C#操作图片的相关技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04
C#多线程系列之工作流实现
本文详细讲解了C#实现多线程工作流的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-02-02
C#客户端HttpClient请求认证及数据传输
本文详细讲解了C#客户端HttpClient请求认证及数据传输，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-01-01

WPF实现Table布局控件的示例代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具