Silverlight DataGrid 多重表头实现

简介: ...
<controls:ChildWindow x:Class="FXHS.ShowSSXQList"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
           xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" 
           Title="实时险情列表" FontSize="15">
    <!--定义资源样式-->
    <controls:ChildWindow.Resources>
        <Style x:Key="DataGridHeaderStyle" TargetType="sdk:DataGridColumnHeader">
            <Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
        </Style>
        <Style x:Key="DataGridCellStyle" TargetType="sdk:DataGridCell">
            <Setter Property="HorizontalContentAlignment" Value="Center" ></Setter>
        </Style>
        <Style x:Key="DataGridBaseHeaderStyle" TargetType="sdk:DataGridColumnHeader">
            <Setter Property="FontWeight" Value="Normal" />
        </Style>

        <Style x:Key="TimeSheetDayHeaderStyle" TargetType="sdk:DataGridColumnHeader" BasedOn="{StaticResource DataGridBaseHeaderStyle}">
            <Setter Property="Foreground" Value="#FF000000"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="SeparatorBrush" Value="#FFC9CACA"/>
            <Setter Property="Padding" Value="8"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Grid x:Name="Root">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimation Duration="0"
                                                    Storyboard.TargetName="BackgroundRectangle"
                                                    Storyboard.TargetProperty="(Fill).Color" To="#FF448DCA"/>
                                            <ColorAnimation Duration="0"
                                                    Storyboard.TargetName="BackgroundGradient"
                                                    Storyboard.TargetProperty="(Fill).(GradientStops)[3].Color" To="#7FFFFFFF"/>
                                            <ColorAnimation Duration="0"
                                                    Storyboard.TargetName="BackgroundGradient"
                                                    Storyboard.TargetProperty="(Fill).(GradientStops)[2].Color" To="#CCFFFFFF"/>
                                            <ColorAnimation Duration="0"
                                                    Storyboard.TargetName="BackgroundGradient"
                                                    Storyboard.TargetProperty="(Fill).(GradientStops)[1].Color" To="#F2FFFFFF"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimation Duration="0"
                                                    Storyboard.TargetName="BackgroundRectangle"
                                                    Storyboard.TargetProperty="(Fill).Color" To="#FF448DCA"/>
                                            <ColorAnimation Duration="0"
                                                    Storyboard.TargetName="BackgroundGradient"
                                                    Storyboard.TargetProperty="(Fill).(GradientStops)[0].Color" To="#D8FFFFFF"/>
                                            <ColorAnimation Duration="0"
                                                    Storyboard.TargetName="BackgroundGradient"
                                                    Storyboard.TargetProperty="(Fill).(GradientStops)[1].Color" To="#C6FFFFFF"/>
                                            <ColorAnimation Duration="0"
                                                    Storyboard.TargetName="BackgroundGradient"
                                                    Storyboard.TargetProperty="(Fill).(GradientStops)[2].Color" To="#8CFFFFFF"/>
                                            <ColorAnimation Duration="0"
                                                    Storyboard.TargetName="BackgroundGradient"
                                                    Storyboard.TargetProperty="(Fill).(GradientStops)[3].Color" To="#3FFFFFFF"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SortStates">
                                    <VisualState x:Name="Unsorted"/>
                                    <VisualState x:Name="SortAscending" />
                                    <VisualState x:Name="SortDescending" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle x:Name="BackgroundRectangle" Fill="#FF1F3B53" Stretch="Fill" Grid.ColumnSpan="2"/>
                            <Rectangle x:Name="BackgroundGradient" Stretch="Fill" Grid.ColumnSpan="2">
                                <Rectangle.Fill>
                                    <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                        <GradientStop Color="#FCFFFFFF" Offset="0.015"/>
                                        <GradientStop Color="#F7FFFFFF" Offset="0.375"/>
                                        <GradientStop Color="#E5FFFFFF" Offset="0.6"/>
                                        <GradientStop Color="#D1FFFFFF" Offset="1"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="20" />
                                    <RowDefinition Height="1" />
                                    <RowDefinition Height="20" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="100"/>
                                    <ColumnDefinition Width="1" />
                                    <ColumnDefinition Width="299"/>
                                    <ColumnDefinition Width="1" />
                                    <ColumnDefinition Width="199"/>
                                </Grid.ColumnDefinitions>
                                <!-- 第0行 -->
                                <ContentPresenter Content="险情类型" Grid.Row="0" VerticalAlignment="Center"
                                          HorizontalAlignment="Center" />
                                <Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1" 
                                   Visibility="Visible" Grid.Row="0" Grid.Column="1" />
                                <ContentPresenter Content="险情标题" Grid.Row="0" Grid.Column="2"
                                          VerticalAlignment="Center" HorizontalAlignment="Center" />
                                <Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1" 
                                   Visibility="Visible" Grid.Row="0" Grid.Column="3" />
                                <ContentPresenter Content="上传时间" Grid.Row="0" Grid.Column="4"
                                          VerticalAlignment="Center" HorizontalAlignment="Center" />
                                <!-- 第一行 -->
                                <Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Height="1"
                                   Visibility="Visible" Grid.Row="1" Grid.ColumnSpan="5" />
                                <!-- 第二行 -->
                                <ContentPresenter Content="险情描述"
                                          VerticalAlignment="Center" HorizontalAlignment="Center"
                                          Grid.ColumnSpan="5" Grid.Row="2" />
                            </Grid>
                            <Rectangle x:Name="VerticalSeparator" Fill="#FFC9CACA"
                               VerticalAlignment="Stretch" Width="1" Visibility="Visible"
                               Grid.Row="1" Grid.Column="1"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="TimeSheetTotalsHeaderStyle" TargetType="sdk:DataGridColumnHeader" BasedOn="{StaticResource TimeSheetDayHeaderStyle}">
            <Setter Property="Foreground" Value="#FFFF0000"/>
        </Style>
    </controls:ChildWindow.Resources>
    <Grid x:Name="LayoutRoot" Margin="0" Height="400">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid x:Name="gTop" Height="31" VerticalAlignment="Top"/>
        <Grid x:Name="gMiddle" Margin="0,31,0,25">
            <sdk:DataGrid Margin="0" AutoGenerateColumns="False" x:Name="dg" LoadingRow="dg_LoadingRow">
                <sdk:DataGrid.Columns>
                    <sdk:DataGridTemplateColumn Header="序号" HeaderStyle="{StaticResource DataGridHeaderStyle}" Width="60">
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <TextBlock FontSize="13" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>
                    <sdk:DataGridTemplateColumn Header="图片" HeaderStyle="{StaticResource DataGridHeaderStyle}" Width="200">
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Image x:Name="Image1" Source="{Binding 图片}"></Image>
                                </Grid>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>
                    <sdk:DataGridTemplateColumn Header="险情描述" HeaderStyle="{StaticResource TimeSheetDayHeaderStyle}">
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="0.2*"></RowDefinition>
                                        <RowDefinition Height="1"></RowDefinition>
                                        <RowDefinition Height="*"></RowDefinition>
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition  Width="100"></ColumnDefinition>
                                        <ColumnDefinition Width="1"></ColumnDefinition>
                                        <ColumnDefinition Width="290"></ColumnDefinition>
                                        <ColumnDefinition  Width="1"></ColumnDefinition>
                                        <ColumnDefinition Width="199"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="{Binding 灾情类型}" FontSize="14" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="0"/>
                                    <Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1" Grid.Row="0" Grid.Column="1"/>
                                    <TextBlock Text="{Binding 图片标题}" HorizontalAlignment="Center" FontSize="14" Margin="2,0,0,0" Grid.Row="0" Grid.Column="2"/>
                                    <Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1" Grid.Row="0" Grid.Column="3"/>
                                    <TextBlock Text="{Binding 上传时间}" FontSize="14" HorizontalAlignment="Center" Margin="2,0,0,0" Grid.Row="0" Grid.Column="4"/>
                                    <!--内容行之间的横线-->
                                    <Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Height="1"
                                   Visibility="Visible" Grid.Row="1" Grid.ColumnSpan="5" />
                                    <TextBlock Text="{Binding 备注}" FontSize="14" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="5" TextWrapping="Wrap"></TextBlock>
                                </Grid>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>

                </sdk:DataGrid.Columns>
            </sdk:DataGrid>
        </Grid>
        <Grid x:Name="gBottom" VerticalAlignment="Bottom">
            <sdk:DataPager x:Name="DataPager1" PageIndexChanged="DataPager1_PageIndexChanged" Height="24" PageSize="4" DisplayMode="FirstLastPreviousNext" VerticalAlignment="Bottom" Margin="0"/>
        </Grid>
    </Grid>
</controls:ChildWindow>


如下界面



相关文章

热门文章

最新文章