合併標題行中的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中

回答

相關問題