wpf toolkit DatagridでのColumnHeader複数行にする方法について

2009-09-02

質問

_{2009年9月2日水曜日 1:44}

はじめまして。WPF勉強中のkmo3と申します
初めてこちらを利用させて頂きます。よろしくお願いします。

Datagridのことでわからないことがあるので質問させてください。
wpfでDatagridを実装するのに、標準ではコントロールがないということで調べた結果、wpf toolkitを使うことにたどりつきました。
ＣｏｌｕｍｎＨｅａｄｅｒを２段(グループ化)で表示したいのですが、そのようなことが可能なのでしょうか？
wpf toolkitは最新2009の物を使用し、開発環境はVS2008を使用しております。

例えば、下記のような２段構成のヘッダを構築したいと思っています。

｜     111    ｜           ｜     555      ｜
＋＋ 444    ＋＋＋
｜ 222｜ 333｜           ｜ 666｜ 777｜


よろしくお願い致します。

すべての返信 (10)

_{2009年9月2日水曜日 13:38 ✅回答済み | 1 票}

WPF multi-column super header の路線で行くならこんなところでしょうか？

<Window x:Class="WpfDataGrid2.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="475" xmlns:tools="http://schemas.microsoft.com/wpf/2008/toolkit">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="auto"/>
      <RowDefinition Height="2*"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="{Binding ElementName=datagrid1, Path=RowHeaderWidth}" />
        <ColumnDefinition Width="{Binding ElementName=Column1, Path=ActualWidth}" />
        <ColumnDefinition Width="{Binding ElementName=Column2, Path=ActualWidth}" />
        <ColumnDefinition Width="{Binding ElementName=Column3, Path=ActualWidth}" />
        <ColumnDefinition Width="{Binding ElementName=Column4, Path=ActualWidth}" />
        <ColumnDefinition Width="{Binding ElementName=Column5, Path=ActualWidth}" />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Border BorderThickness="1,0,0,0" BorderBrush="#FFC9CACA" Background="#FF1F3B53" Grid.Column="1" Grid.ColumnSpan="2">
        <Label HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" Content="1111">
          <Label.Background>
            <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
              <GradientStop Color="#FCFFFFFF" Offset="0.015" />
              <GradientStop Color="#F7FFFFFF" Offset="0.375" />
              <GradientStop Color="#E5FFFFFF" Offset="0.6" />
              <GradientStop Color="#D1FFFFFF" Offset="1" />
            </LinearGradientBrush>
          </Label.Background>
        </Label>
      </Border>
      <Border BorderThickness="1,0,0,0" BorderBrush="#FFC9CACA" Background="#FF1F3B53" Grid.Column="3" Grid.ColumnSpan="1">
        <Label HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" Content="">
          <Label.Background>
            <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
              <GradientStop Color="#FCFFFFFF" Offset="0.015" />
              <GradientStop Color="#F7FFFFFF" Offset="0.375" />
              <GradientStop Color="#E5FFFFFF" Offset="0.6" />
              <GradientStop Color="#D1FFFFFF" Offset="1" />
            </LinearGradientBrush>
          </Label.Background>
        </Label>
      </Border>
      <Border BorderThickness="1,0,0,0" BorderBrush="#FFC9CACA" Background="#FF1F3B53" Grid.Column="4" Grid.ColumnSpan="2">
        <Label HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" Content="55555">
          <Label.Background>
            <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
              <GradientStop Color="#FCFFFFFF" Offset="0.015" />
              <GradientStop Color="#F7FFFFFF" Offset="0.375" />
              <GradientStop Color="#E5FFFFFF" Offset="0.6" />
              <GradientStop Color="#D1FFFFFF" Offset="1" />
            </LinearGradientBrush>
          </Label.Background>
        </Label>
      </Border>
    </Grid>
    <tools:DataGrid AutoGenerateColumns="False"
                                Name="datagrid1" Grid.Row="1" >
      <tools:DataGrid.Columns>
        <tools:DataGridTextColumn Header="2222" Width="50" x:Name="Column1" />
        <tools:DataGridTextColumn Header="3333" Width="50" x:Name="Column2"/>
        <tools:DataGridTextColumn Header="4444" Width="50" x:Name="Column3"/>
        <tools:DataGridTextColumn Header="6666" Width="50" x:Name="Column4"/>
        <tools:DataGridTextColumn Header="7777" Width="50" x:Name="Column5"/>
      </tools:DataGrid.Columns>
    </tools:DataGrid>
  </Grid>
</Window>

えムナウ@わんくま同盟 Microsoft MVP Visual Studio C# Since 2005/01-2009/12

_{2009年9月2日水曜日 2:58}

こちらが参考になると思います。

DataGrid ヘッダ行で改行
http://ameblo.jp/sql/theme-10011004792.html

★良い回答には回答済みマークを付けよう！わんくま同盟 MVP - Visual C# http://blogs.wankuma.com/trapemiya/

_{2009年9月2日水曜日 4:35}

trapemiya 様

情報ありがとうございます。
参照してみたのですが、私のやりたいこととは少し違っていました。

１つのColumnHeaderの中で改行するのではなく、Ｈｅａｄｅｒ自体を２段にしたいのですが無理なのでしょうか？
上記の例で言いますと、ColumnHeaderが222,333と２つ存在し、その上に2カラム分連結した型で111があるという感じです444は１段目と２段目が連結されているイメージです。
わかりにくい説明ですみません。
引き続き調べてみます。情報がなく出来ないことを調べているのかとか考えてしまいます。

よろしくお願い致します。

_{2009年9月2日水曜日 5:01 | 1 票}

失礼いたしました。では、以下はいかがでしょうか？

WPF multi-column super header
http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/1e414159-70f6-4be3-9be5-56e4f3278366

★良い回答には回答済みマークを付けよう！わんくま同盟 MVP - Visual C# http://blogs.wankuma.com/trapemiya/

_{2009年9月2日水曜日 12:58}

trapemiya 様

ありがとうございます。
教えて頂いたＵＲＬを参考に試してみます。

よろしくお願い致します。

_{2009年9月2日水曜日 13:12}

<Window x:Class="WpfDataGrid.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300" xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit">
  <Window.Resources>
    <DataTemplate x:Key="header1">
      <StackPanel Orientation="Vertical">
        <TextBlock>1111</TextBlock>
        <TextBlock>2222</TextBlock>
      </StackPanel>     
    </DataTemplate>
    <DataTemplate x:Key="header2">
      <StackPanel Orientation="Vertical">
        <TextBlock>1111</TextBlock>
        <TextBlock>3333</TextBlock>
      </StackPanel>
    </DataTemplate>
    <DataTemplate x:Key="header3">
      <StackPanel Orientation="Vertical">
        <TextBlock>4444</TextBlock>
      </StackPanel>
    </DataTemplate>
    <DataTemplate x:Key="header4">
      <StackPanel Orientation="Vertical">
        <TextBlock>5555</TextBlock>
        <TextBlock>6666</TextBlock>
      </StackPanel>
    </DataTemplate>
    <DataTemplate x:Key="header5">
      <StackPanel Orientation="Vertical">
        <TextBlock>5555</TextBlock>
        <TextBlock>7777</TextBlock>
      </StackPanel>
    </DataTemplate>
  </Window.Resources>
    <Grid>
    <my:DataGrid AutoGenerateColumns="False" Name="dataGrid1">
      <my:DataGrid.Columns>
        <my:DataGridTextColumn HeaderTemplate="{StaticResource header1}"/>
        <my:DataGridTextColumn HeaderTemplate="{StaticResource header2}"/>
        <my:DataGridTextColumn HeaderTemplate="{StaticResource header3}"/>
        <my:DataGridTextColumn HeaderTemplate="{StaticResource header4}"/>
        <my:DataGridTextColumn HeaderTemplate="{StaticResource header5}"/>
      </my:DataGrid.Columns>
    </my:DataGrid>
  </Grid>
</Window>

このくらいしかできないですかね。えムナウ@わんくま同盟 Microsoft MVP Visual Studio C# Since 2005/01-2009/12

_{2009年9月3日木曜日 12:52}

trapemiya 様
えムナウ様

情報ありがとうございました。
wpf toolkitでの表現は難しそうですね。
これからも、情報収集と勉強し、出来る方法を見つけたいと思います。
ありがとうございました。

_{2009年9月3日木曜日 12:53}

trapemiya 様
えムナウ様

_{2009年9月3日木曜日 16:20}

>wpf toolkitでの表現は難しそうですね。
そうですね。
でもWindowsFormsよりは表現のカスタマイズができるようになっています。
ヘッダーの2段表示なんかも1段目をグループ化なんて考えなければ簡単にできますしね。
えムナウ@わんくま同盟 Microsoft MVP Visual Studio C# Since 2005/01-2009/12

_{2009年9月20日日曜日 22:19}

こちらのやり方も参考になります。
DataGridTemplateColumn で複数の項目(この場合１１１/２２２/３３３)を表示してしまうことでヘッダも１１１の場所に２２２/３３３を埋め込んでしまえます。
http://weblogs.asp.net/dwahlin/archive/2009/06/11/customizing-silverlight-3-datagrid-headers.aspx
えムナウ@わんくま同盟 Microsoft MVP Visual Studio C# Since 2005/01-2009/12

次の方法で共有

wpf toolkit DatagridでのColumnHeader複数行にする方法について

質問

すべての返信 (10)

その他のリソース