合并标题行中的Silverlight DataGrid中

我试图获得具有以下格式的表格：合并标题行中的Silverlight DataGrid中

Header 1 | Header 2 

Col1 | Col2 | Col3 Col4

而使用Silverlight。我搜索了，没有成功。

任何想法？

[编辑]

我发现这个博客帖子，但数据和列标题没有得到对齐。 Merging Silverlight DataGrid Headers

来源

2011-06-14 muek

的例子在[发布链接到]（http://weblogs.asp.net/dwahlin/archive/2009/06/11/customizing-silverlight-3-datagrid-headers.aspx）使用该列的“标题”样式，他分裂成顶部的一天，在其下面的“数量”和“小时数”下分开的“列”。这不会“分割”或“合并”colomns，DataGrid的行或单元格，它只是头部样式中的一个简单的ControlTemplate。 – AbdouMoumen 2011-06-14 16:29:03

我认为他可能会对数据单元本身做同样的处理，具有一个定义两列网格的模板，并且TextBlocks的值为“Qty”和“Hours”。 – AbdouMoumen 2011-06-14 16:30:20

@AbdouMoumen我不明白。 – muek 2011-06-23 00:09:06

我在编辑的问题中提到的block entry有一些运气。事实上，标题和数据单元格不对齐。您需要手动调整这些大小以匹配。在数据字段预计具有通用指定宽度的情况下，这将工作正常。作为参考，我在这里复制此解决方案：

<Style x:Key="DataGridBaseHeaderStyle" TargetType="dataprimitives:DataGridColumnHeader"> 
    <Setter Property="FontWeight" Value="Bold" /> 
</Style> 

<Style x:Key="TimeSheetTotalsHeaderStyle" TargetType="dataprimitives:DataGridColumnHeader" 
     BasedOn="{StaticResource TimeSheetDayHeaderStyle}"> 
    <Setter Property="Foreground" Value="#FFFF0000"/> 
</Style> 

<Style x:Key="TimeSheetDayHeaderStyle" TargetType="dataprimitives: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="50"/> 
          <ColumnDefinition Width="1" /> 
          <ColumnDefinition Width="50"/> 
         </Grid.ColumnDefinitions> 
         <!-- Row 0 --> 
         <!-- This was edited in order to work in Silvelight 4 --> 
         <ContentPresenter Content="Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}" 
              VerticalAlignment="Center" HorizontalAlignment="Center" 
              Grid.ColumnSpan="3" /> 

         <!-- Row 1 --> 
         <Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Height="1" 
            Visibility="Visible" Grid.Row="1" Grid.ColumnSpan="3" /> 
         <!-- Row 2 --> 
         <ContentPresenter Content="Qty" Grid.Row="2" VerticalAlignment="Center" 
              HorizontalAlignment="Center" /> 
         <Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1" 
            Visibility="Visible" Grid.Row="2" Grid.Column="1" /> 
         <ContentPresenter Content="Hours" Grid.Row="2" Grid.Column="2" 
              VerticalAlignment="Center" HorizontalAlignment="Center" /> 
        </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>

原有的风格，以便与Silverlight 4中（更多详情here）上班轻微地被编辑。

您还需要定义一个固定宽度的头的宽度相匹配的文本框风格：

<Style x:Key="TimeSheetTextBoxStyle" TargetType="TextBox"> 
    <Setter Property="Width" Value="50"></Setter> 
    <Setter Property="Background" Value="Transparent"></Setter> 
    <Setter Property="BorderThickness" Value="0"></Setter> 
</Style>

在DataGrid的样式使用：

<data:DataGridTemplateColumn Header="Tue" HeaderStyle="{StaticResource TimeSheetDayHeaderStyle}"> 
    <data:DataGridTemplateColumn.CellTemplate> 
     <DataTemplate> 
      <StackPanel Orientation="Horizontal"> 
       <TextBox Text="{Binding TuesdayQuantity}" Style="{StaticResource TimeSheetTextBoxStyle}"/> 
       <Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1" /> 
       <TextBox Text="{Binding TuesdayHours}" Margin="2,0,0,0" Style="{StaticResource TimeSheetTextBoxStyle}"/> 
      </StackPanel> 
     </DataTemplate> 
    </data:DataGridTemplateColumn.CellTemplate> 
</data:DataGridTemplateColumn>

来源

2011-12-02 10:09:35 kgiannakakis

合并标题行中的Silverlight DataGrid中

回答

相关问题