Hatena::Groupmediaforcelabs

どうも、小松です。

2009-10-06

DataGridの列ヘッダの文字列を複数行にする

| 00:34

どうも、小松です。


Silverlightの開発をすることになりました。

今後、つまずいた点・苦労した点などを記録していきたいと思います。


早速、悪戦苦闘しました。

DataGridの列ヘッダの文字列を複数行にする方法です。


多くのサイトに書いてあるのは、以下のような方法です。

<data:DataGrid Name="myDataGrid" AutoGenerateColumns="False">
    <data:DataGrid.Resources>
        <Style x:Name="myStyle" TargetType="dataPrimitives:DataGridColumnHeader">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="dataPrimitives:DataGridColumnHeader">
                        <StackPanel>
                            <TextBlock Text="last"/>
                            <TextBlock Text="name"/>
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </data:DataGrid.Resources>
    <data:DataGrid.Columns>
        <data:DataGridTextColumn HeaderStyle="{StaticResource myStyle}"  Binding="{Binding lastName}"/>
        <data:DataGridTextColumn Header="first name"  Binding="{Binding firstName}"/>
    </data:DataGrid.Columns>
</data:DataGrid>

f:id:coma2:20091006102932p:image


ヘッダの文字列を2行にできたのは、よかったのですが、

ヘッダの文字列が崩れてしまいます。


もちろん、スタイルを指定すれば、他のヘッダと同じスタイルにすることができますが、

できれば、もっとラクをしたいです。

それに複数行にしたいヘッダが多数あった場合、それぞれのスタイルを書くのは、大変です。


そこで思い出したのが、flexmxmlで使用した改行コード「&#13;」です。

試してみたところ、うまくいきました!!

MailPage.xaml

<UserControl x:Class="TestDataGrid.MainPage"
    xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    xmlns:dataPrimitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <Grid x:Name="LayoutRoot">
        <data:DataGrid Name="myDataGrid" AutoGenerateColumns="False">
            <data:DataGrid.Columns>
                <data:DataGridTextColumn Header="last&#13;name" Binding="{Binding lastName}"/>
                <data:DataGridTextColumn Header="first name" Binding="{Binding firstName}"/>
            </data:DataGrid.Columns>
        </data:DataGrid>
    </Grid>
</UserControl>

MailPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel; // for ObservableCollection

namespace TestDataGrid
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            // サンプルデータを追加
            addSampleData();
        }

        private void addSampleData()
        {
            ObservableCollection<Person> oc = new ObservableCollection<Person>();

            oc.Add(new Person { lastName = "メディア", firstName = "一郎" });
            oc.Add(new Person { lastName = "メディア", firstName = "二郎" });
            oc.Add(new Person { lastName = "メディア", firstName = "三郎" });

            myDataGrid.ItemsSource = oc;
        }

        public class Person
        {
            public string lastName { get; set; }
            public string firstName { get; set; }
        }
    }
}

実行結果は、以下の通りです。

f:id:coma2:20091006103528p:image