設計WPF佈局網格背景（每個單元格，行，列）

Question

我想知道是否有任何方式來設計WPF佈局網格的單元格，行和列。我一直在試圖找到任何信息，我發現的一些提及的信息都沒有提供。

我想風格的網格看起來像一個在鏈接的截圖。

如果實際的控制不支持它，我可以以某種方式繼承它，然後呢？我對WPF相當陌生，所以任何幫助將非常感激。

另外一件事，我知道我可以對網格中的每一個控件進行樣式設計，但它看起來像是矯枉過正。我想有一個網格自己做。

screenshot http://img21.imageshack.us/img21/2842/capturehz8.png

Answer 1

下面是一個快速（非常粗略的示例），您可以使用它來獲取所需的格式（如果您認真對待WPF，會發現Blend在獲得佈局看起來不錯的方面提供了巨大的幫助）：

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"                         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
     <Page.Resources> 
      <Style x:Key="CustomerDefinition" TargetType="TextBlock"> 
       <Setter Property="Control.FontFamily" Value="Tahoma"/> 
       <Setter Property="Control.FontSize" Value="12"/> 
       <Setter Property="Control.Foreground" Value="Red"/> 
      </Style> 
      <Style TargetType="{x:Type Label}"> 
       <Setter Property="Width" Value="100"/> 
      </Style> 
      <Style x:Key="{x:Type TextBox}" TargetType="{x:Type TextBox}"> 
       <Setter Property="SnapsToDevicePixels" Value="True"/> 
       <Setter Property="OverridesDefaultStyle" Value="True"/> 
       <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/> 
       <Setter Property="FocusVisualStyle" Value="{x:Null}"/> 
       <Setter Property="MinWidth" Value="120"/> 
       <Setter Property="MinHeight" Value="20"/> 
       <Setter Property="AllowDrop" Value="true"/> 
       <Setter Property="Width" Value="200"/> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="{x:Type TextBoxBase}"> 
          <Border 
           Name="Border" 
           Background="#FFEBE9E9" 
           BorderBrush="#FF8B8787" 
           BorderThickness="1" 
           CornerRadius="2" 
           Padding="3"> 
           <ScrollViewer x:Name="PART_ContentHost" Margin="0"/> 
          </Border> 
          <ControlTemplate.Triggers> 
           <Trigger Property="IsEnabled" Value="False"> 
            <Setter TargetName="Border" Property="Background" 
                 Value="#EEEEEE"/> 
            <Setter TargetName="Border" Property="BorderBrush" 
                 Value="#EEEEEE"/> 
            <Setter Property="Foreground" Value="#888888"/> 
           </Trigger> 
          </ControlTemplate.Triggers> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
      <LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1"> 
       <GradientBrush.GradientStops> 
        <GradientStopCollection> 
         <GradientStop Offset="0.0" Color="#FFF0EDED"/> 
         <GradientStop Offset="1.0" Color="#FFE1E0E0"/> 
        </GradientStopCollection> 
       </GradientBrush.GradientStops> 
      </LinearGradientBrush> 
     </Page.Resources> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="26"/> 
       <RowDefinition Height="23"/> 
       <RowDefinition Height="24"/> 
       <RowDefinition Height="24"/> 
       <RowDefinition Height="24"/> 
      </Grid.RowDefinitions> 
      <TextBlock 
       Grid.ColumnSpan="2" 
       Grid.Row="0" 
       Style="{StaticResource CustomerDefinition}" 
       Text="Customer Definition"/> 
      <Border 
       Grid.Column="0" 
       Grid.Row="1" 
       Background="#FFEBE9E9" 
       BorderBrush="#FF8B8787" 
       BorderThickness="1"> 
       <StackPanel Background="{StaticResource NormalBrush}" Orientation="Horizontal"> 
        <Label Content="Customer Code"/> 
        <TextBox Text="SMITHA 098 (normally I'd bind here)"/> 
       </StackPanel> 
      </Border> 
      <Border 
       Grid.Column="1" 
       Grid.Row="1" 
       Background="#FFEBE9E9" 
       BorderBrush="#FF8B8787" 
       BorderThickness="1"> 
       <StackPanel Background="{StaticResource NormalBrush}" Orientation="Horizontal"> 
        <Label Content="Customer Type"/> 
        <TextBox Text="PRIVATE INDIVIDUAL"/> 
       </StackPanel> 
      </Border> 
     </Grid> </Page> 

Answer 2

的WPF Grid沒有明顯的細胞等。將它們視爲可以對齊子對象的無形網格線。

因此，要對網格的單元格進行樣式設計，必須對網格內對齊的項目進行樣式設置。

把Grid想象成WinForms DataGrid這種東西是令人困惑的。我猜它最接近的WinForms等價物是TableLayout控件。

查看一些第三方網格控件。在測試版中我使用了DevExpress，並發現它非常簡單。

Answer 3

我會建議使用邊框爲您的造型。

您可以通過爲每行和每列創建邊框並相應地設置rowspans和colspans來輕鬆地重新創建該佈局。

您將有5個colspan 2的邊框，這些邊框將處理每行的漸變背景以及每行頂部和底部的邊框。然後你將有2個邊界與rowspan 5這些將處理列邊界。想象一下，您正在覆蓋邊界以形成您之後的可視網格效果。

對於標題和外邊框，只需根據需要用邊框和樣式包裹整個網格即可。

我建議將您的樣式存儲爲資源，以便您可以將所有樣式信息保存在一個位置。

注意學習樣式是如何工作的，因爲它非常強大，但是有一條學習曲線，因爲它與CSS的工作方式有很大不同。如果可以的話，我會推薦閱讀WPF Unleashed。

Answer 4

@Dan推薦WPF Unleashed，我正在閱讀。就在今天上午，我遇到了一個部分來解決你的問題。

第6章，頁161：

常見問題：我怎麼可以給網格單元背景顏色，填充和邊框就像我可以用HTML表細胞？

沒有給Grid單元這樣的屬性的內在機制，但是由於多個單元可以出現在任何Grid單元中，所以可以很容易地模擬它們。爲了讓單元格具有背景顏色，您可以簡單地用合適的填充物填充矩形，默認情況下拉伸以填充單元格。爲了給單元格填充，可以使用自動調整大小並將Margin設置爲適當的子元素。對於邊框，您可以再次使用矩形，但爲其指定適當顏色的明確筆觸，或者您可以簡單地使用邊框元素。

只要確保在任何其他子項之前將這些矩形或邊界添加到網格（或者用ZIndex附加屬性明確標記它們），那麼它們的Z順序將它們放在主內容之後。

順便說一句，WPF釋放的岩石。它寫得非常好，而且全綵色的打印使得它更易於閱讀。

Answer 5

我在找DataGrid單元格邊距（或填充）的方法時發現此帖。我的問題得到解決，這要歸功於xaml代碼示例（接近尾聲） - 非常簡約。

http://forums.silverlight.net/forums/p/16842/55997.aspx