如何在<window>?</window>中设置WPF网格样式

时间:2012-01-22 13:08:38

标签: wpf grid styling

我有一个WPF应用程序,其网格在窗口中加载。

如何执行以下操作 (1)添加标题渐变样式(2种颜色的垂直居民) (2)将行样式交替到此网格下方? (3)为网格中的每一行悬停(鼠标悬停在行突出显示)行样式?

<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>

请告诉我如何为网格完成上述要求的样式。

1 个答案:

答案 0 :(得分:0)

来自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>