如何設計一個<window>內的WPF格子？

Question

我有一個加載在窗口中的網格的WPF應用程序。

我該怎麼做了以下 （1）添加標題漸變樣式（2個色垂直graidents） （2）交替行的樣式低於該網格？ （3）將網格中的每一行懸停（鼠標懸停在行高亮上）rowstyle？

<Window 
    x:Class="DiagramDesigner.PadDetailsWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:DiagramDesigner" 
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
    xmlns:toolkit="http://schemas.microsoft.com/wpf/2008/toolkit" 
    xmlns:s="clr-namespace:DiagramDesigner" 
    xmlns:c="clr-namespace:DiagramDesigner.Controls" 
    Title="Pad Details" 
    WindowStyle="SingleBorderWindow" 
    Width="750" 
    Height="650" Loaded="Window_Loaded"> 

    <Window.Resources> 




    </Window.Resources> 
<ScrollViewer Name="DesignerScrollViewer" Background="Transparent" HorizontalScrollBarVisibility="Disabled" 
    VerticalScrollBarVisibility="Auto"> 
     <Grid x:Name="LayoutRoot" Margin="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="650" > 
      <StackPanel Orientation="Vertical" Margin="0,0,-27,0"> 
       <!--<StackPanel>--> 
        <toolkit:DataGrid x:Name="dgMain" ItemsSource="{Binding}" VerticalScrollBarVisibility="Visible" AutoGenerateColumns="False" Width="650" RowHeight="20"> 
         <toolkit:DataGrid.Columns> 
          <toolkit:DataGridTextColumn Header="Pad Name" Binding="{Binding Path=PadStream}" Width="80" /> 
          <toolkit:DataGridTextColumn Header="Parent" Binding="{Binding Path=Parent}" Width="50"/> 
          <toolkit:DataGridTextColumn Header="Type" Binding="{Binding Path=Type}" Width="50"/> 
          <toolkit:DataGridTextColumn Header="Code" Binding="{Binding Path=Code}" Width="50"/> 
          <toolkit:DataGridTextColumn Header="Volume" Binding="{Binding Path=Volume}" Width="80"/> 
          <toolkit:DataGridTextColumn Header="Mass Rate" Binding="{Binding Path=MassRate}" Width="80"/> 
          <toolkit:DataGridTextColumn Header="Min Flow Rate" Binding="{Binding Path=MinFlowRate}" Width="80"/> 
          <toolkit:DataGridTextColumn Header="Max Flow Rate" Binding="{Binding Path=MaxFlowRate}" Width="*" /> 
         </toolkit:DataGrid.Columns> 
        </toolkit:DataGrid> 
       <!--</StackPanel>--> 
       <StackPanel> 
        <Button x:Name="OKButton" Content="OK" Click="OnOkClick" Width="70" Height="23" HorizontalAlignment="Center" 
         Margin="0,3,0,0" Grid.Row="6" Grid.Column="3"/> 
       </StackPanel> 
      </StackPanel> 

    </Grid> 
</ScrollViewer> 
</Window> 

請讓我知道上述問題的樣式可以做到網格。

Answer 1

從here的行標題樣式：

<Style x:Key="DataGridColumnHeaderStyle" TargetType="{x:Type Custom:DataGridColumnHeader}" > 
<Setter Property="Background" Value="#88800080" /> 
    <Setter Property="Foreground" Value="White" /> 
    <Style.Triggers> 
    <Trigger Property="SortDirection" Value="{x:Null}"> 
     <Setter Property="Background" Value="{DynamicResource DataGridHeaderBackgroundBrush}" /> 
     <Setter Property="BorderBrush" Value="Transparent" /> 
    </Trigger> 
    <MultiTrigger> 
     <MultiTrigger.Conditions> 
      <Condition Property="IsMouseOver" Value="True" /> 
      <Condition Property="SortDirection" Value="{x:Null}" /> 
     </MultiTrigger.Conditions> 
     <Setter Property="Background" Value="{StaticResource DataGridHeaderMouseOverBackgroundBrush}" /> 
     <Setter Property="BorderBrush" Value="{StaticResource DataGridHeaderBorderBrush}" /> 
    </MultiTrigger> 

    <MultiTrigger> 
     <MultiTrigger.Conditions> 
      <Condition Property="IsMouseOver" Value="true" /> 
      <Condition Property="SortDirection" Value="{x:Null}" /> 
     </MultiTrigger.Conditions> 
     <Setter Property="Background" Value="{StaticResource DataGridHeaderMouseOverBackgroundBrush}" /> 
     <Setter Property="BorderBrush" Value="{StaticResource DataGridHeaderBorderBrush}" /> 
    </MultiTrigger> 
    <Trigger Property="SortDirection" Value="Ascending"> 
     <Setter Property="Background" Value="{StaticResource DataGridHeaderSortedBackgroundBrush}" /> 
    </Trigger> 
    <Trigger Property="SortDirection" Value="Descending"> 
     <Setter Property="Background" Value="{StaticResource DataGridHeaderSortedBackgroundBrush}" /> 
    </Trigger> 
</Style.Triggers> 

從here鼠標懸停性能：

<DataGrid.RowStyle> 
    <Style TargetType="DataGridRow"> 
     <Style.Triggers> 
       <Trigger Property="IsMouseOver" 
         Value="True"> 
        <Setter Property="Background" 
          Value="Green" /> 
       </Trigger> 
     </Style.Triggers> 
    </Style> 
</DataGrid.RowStyle>