WPF實現(xiàn)Table布局控件的示例代碼
更新時間：2024年10月21日 11:47:48 作者：WPF開發(fā)者
這篇文章主要為大家詳細介紹了如何使用WPF實現(xiàn)Table布局控件,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下
WPF 實現(xiàn) Table 布局控件
- 框架支持
.NET4 至 .NET8； Visual Studio 2022;
有開發(fā)者提出希望 WPF 使用 HTML 的 table 標簽進行顯示表格？
html示例如下：
<table>
<th>Header 1</th>
<tr>
<td>Cell 1</td>
</tr>
</table>
因為需要快速實現(xiàn)表格功能時，我選擇基于 Grid 控件，因為 Grid 提供了對跨行和跨列布局的支持。
一、新建 Td.cs 控件繼承自 Label 代碼如下：
主要內容：
屬性 RowSpan 和 ColumnSpan：
RowSpan 和 ColumnSpan 分別定義了行跨度和列跨度的依賴屬性，設置了默認值為 1。
屬性可以在 C# 或者 XAML 中進行設置和獲取。
Td 控件適用于在 WPF 中實現(xiàn)復雜的表格布局，通過行和列的跨度屬性，可以靈活地控制表格中單元格的布局。
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事件處理控件的行列。 - 算出表格的行數：統(tǒng)計內部
Tr控件的數量，加上一行（表頭）。 - 算出列數：找到所有
Tr中的Td單元格，并根據GetColumnSpan方法確定最大列數。 - 每個表頭
Th，設置其在表格中的位置，并調整邊框。 - 循環(huán)每行
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 控件進行實現(xiàn)。對于更高級的需求，可以考慮將其修改為基于 Panel，自定義列的顯示方式以及實現(xiàn)跨行和跨列的布局。
文中 XAML 中使用 WPFDevelopers庫，如果直接拷貝使用，需要確保將相關的資源和控件進行正確的替換和配置。
到此這篇關于WPF實現(xiàn)Table布局控件的示例代碼的文章就介紹到這了,更多相關WPF Table布局控件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家
相關文章
詳解C# List＜T＞的Contains,Exists,Any,Where性能對比
這篇文章主要介紹了詳解C# List＜T＞的Contains,Exists,Any,Where性能對比，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
終于了解了下.net 和 j2ee的區(qū)別...2007-04-04
本文總結了一些常用的JSON操作輔助類，包括轉換、判斷、Ajax異步等操作，希望能幫到大家。2016-05-05
這篇文章主要介紹了C#中把字符串String轉換為整型Int的小例子,本文使用TryParse方法實現(xiàn)轉換,需要的朋友可以參考下2014-08-08
我們在創(chuàng)建條形碼時,如果以圖片的方式將創(chuàng)建好的條碼保存到指定文件夾路徑,可以在程序中直接加載圖片使用；已生成的條碼圖片,需要通過讀取圖片中的條碼信息,如條碼類型、條碼繪制區(qū)域在圖片中的四個頂點坐標位置等,可參考本文中的方法2023-10-10
這篇文章主要介紹了C#基于socket模擬http請求的方法,實例分析了socket模擬http請求的實現(xiàn)技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了C#運行CGI程序的方法,實例講述了具體的配置步驟與實現(xiàn)代碼,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了C#抓取當前屏幕并保存為圖片的方法,實例分析了C#操作圖片的相關技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
本文詳細講解了C#實現(xiàn)多線程工作流的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-02-02
本文詳細講解了C#客戶端HttpClient請求認證及數據傳輸，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01