WPF绘制表格 .

 

WPF的Grid布局使用起来很方便，但如果我想绘制一个带有边线的表格则显得有点儿力不从心（至少目前的WPF 3.5是这样）。虽然Grid有ShowGridLines这个bool类型的属性，但此属性设为true时显示的虚线而且不能改变颜色。比如下面的代码：

 

1. <Window x:Class="WpfApplication1.Window1"  
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
4.         Title="Window1" Height="300" Width="300">  
5.     <Grid ShowGridLines="True">  
6.         <Grid.RowDefinitions>  
7.             <RowDefinition Height="25" />  
8.             <RowDefinition Height="25" />  
9.             <RowDefinition Height="25" />  
10.             <RowDefinition Height="25" />  
11.             <RowDefinition Height="25" />  
12.             <RowDefinition Height="25" />  
13.         </Grid.RowDefinitions>  
14.         <Grid.ColumnDefinitions>  
15.             <ColumnDefinition/>  
16.             <ColumnDefinition/>  
17.             <ColumnDefinition/>  
18.         </Grid.ColumnDefinitions>  
19.     </Grid>  
20. </Window>  

<Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300"> <Grid ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition Height="25" /> <RowDefinition Height="25" /> <RowDefinition Height="25" /> <RowDefinition Height="25" /> <RowDefinition Height="25" /> <RowDefinition Height="25" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> </Grid> </Window>

 

显示的效果是这样：

那么，如何让Grid“作table状”呢？有两个办法：

1. 使用<Path/>标签绘制直线，然后把它们放进Grid里并设置其Grid.RowSpan/ColumnSpan以及对齐方式
2. 使用Border控件

本文说的是使用第2个办法，有机会再说第1个办法。使用Border的BorderThickness属性可以控制Border各边的显隐粗细（粗细为0就是不显示）。使用BorderBrush属性则可灵活控制每个单元格的边线颜色。请看下面的代码：

 

 

view plain copy to clipboard print ?

1. <Window x:Class="WpfApplication1.Window1"  
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
4.         Title="Window1" Height="300" Width="300">  
5.     <Grid ShowGridLines="False">  
6.         <Grid.RowDefinitions>  
7.             <RowDefinition Height="25" />  
8.             <RowDefinition Height="25" />  
9.             <RowDefinition Height="25" />  
10.             <RowDefinition Height="25" />  
11.             <RowDefinition Height="25" />  
12.             <RowDefinition Height="25" />  
13.         </Grid.RowDefinitions>  
14.         <Grid.ColumnDefinitions>  
15.             <ColumnDefinition/>  
16.             <ColumnDefinition/>  
17.             <ColumnDefinition/>  
18.         </Grid.ColumnDefinitions>  
19.         <Border BorderBrush="Black" BorderThickness="1" Grid.Column="0" Grid.Row="0"/>  
20.         <Border BorderBrush="Blue" BorderThickness="0,1,1,1" Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2"/>  
21.         <Border BorderBrush="Red" BorderThickness="1,0,1,1" Grid.Column="0" Grid.Row="1"/>  
22.         <Border BorderBrush="Orange" BorderThickness="0,0,1,1" Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2"/>  
23.         <Border BorderBrush="Lime" BorderThickness="1,0,1,1" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" Grid.RowSpan="2"/>  
24.     </Grid>  
25. </Window>  

<Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300"> <Grid ShowGridLines="False"> <Grid.RowDefinitions> <RowDefinition Height="25" /> <RowDefinition Height="25" /> <RowDefinition Height="25" /> <RowDefinition Height="25" /> <RowDefinition Height="25" /> <RowDefinition Height="25" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Border BorderBrush="Black" BorderThickness="1" Grid.Column="0" Grid.Row="0"/> <Border BorderBrush="Blue" BorderThickness="0,1,1,1" Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2"/> <Border BorderBrush="Red" BorderThickness="1,0,1,1" Grid.Column="0" Grid.Row="1"/> <Border BorderBrush="Orange" BorderThickness="0,0,1,1" Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2"/> <Border BorderBrush="Lime" BorderThickness="1,0,1,1" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" Grid.RowSpan="2"/> </Grid> </Window>

 

效果如图：

看看，是不是你想要的效果呢？（连合并单元格的效果都有了，嘿姆嘿姆……）

 

最后提醒一点，如果是大批量的绘制表格那么这种手动写代码的方式就划不来了。应该使用DataTemplate来显示数据，在DataTemplate里恰当地使用Border并为其BorderThickness和Column/Row/ColumnSpan/RowSpan设置恰当的Binding。