WPF繪製表格

WPF的Grid布局使用起來很方便，但如果我想繪製一個帶有邊線的表格則顯得有點兒力不從心（至少目前的WPF 3.5是這樣）。雖然Grid有ShowGridLines這個bool類型的屬性，但此屬性設為true時顯示的虛線而且不能改變顏色。比如下面的代碼：

 

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

 

顯示的效果是這樣：

那麼，如何讓Grid“作table狀”呢？有兩個辦法：

1. 使用<Path/>標籤繪製直線，然後把它們放進Grid裡並設定其Grid.RowSpan/ColumnSpan以及對齊
2. 使用Border控制項

本文說的是使用第2個辦法，有機會再說第1個辦法。使用Border的BorderThickness屬性可以控制Border各邊的顯隱粗細（粗細為0就是不顯示）。使用BorderBrush屬性則可靈活控制每個儲存格的邊線顏色。請看下面的代碼：

 

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

 

效果

看看，是不是你想要的效果呢？（連合併儲存格的效果都有了，嘿姆嘿姆……）

 

最後提醒一點，如果是大批量的繪製表格那麼這種手動寫代碼的方式就划不來了。應該使用DataTemplate來顯示資料，在DataTemplate裡恰當地使用Border並為其BorderThickness和Column/Row/ColumnSpan/RowSpan設定恰當的Binding。

 

OVER