DataGrid 横のデータを縦に展開して表示 WPF

VB Tips And Sample(HOME)VBプログラマの為のWPF入門

DataGrid RowDetailsTemplateで、横のデータを縦に展開して表示 WPF

前回の続きで、データグリッドのサンプル。
クリックすると、隠れているデータが下に表示されると言うもの。
何かで使えそうな面白い機能だ。
サンプルはMSのサイトに掲載されているものを参考。
MSのサイトはLINQを使用しており、非常にコードが少ない。LINKばかりになるのだろうか?
今回は、VBのソースは前回とほぼ同じなので割愛。
下記の図のように、県をクリックすると、通常データグリッドの県の横に表示されるデータが、縦に展開して表示されると言うもの。

 RowDetailsTemplateにデータを展開

今回は、XAMLで少し手の込んだことをする必要がある。

<Window x:Class="Window2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window2" Height="300" Width="300">
    <Grid>

        <Grid.Resources>
            <DataTemplate x:Key="YUBIN">
                <Border BorderThickness="0" Background="BlanchedAlmond" Padding="10">
                    <!--StackPanelはコントロールの縦配置-->
                    <StackPanel Orientation="Vertical">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontSize="16" Foreground="Brown" Text="{Binding 郵便番号}"></TextBlock>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontSize="16" Foreground="Brown" Text="{Binding 市区町村}"></TextBlock>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontSize="16" Foreground="Brown" Text="{Binding 町域}"></TextBlock>
                        </StackPanel>
                    </StackPanel>
                </Border>
            </DataTemplate>
        </Grid.Resources>
        
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <Button Content="Button" Grid.Row="0" Height="41"  Name="Button1"  Width="154" />
        <!--AutoGenerateColumns="False" を書かないと、データは全て表示されてしまう-->
        <DataGrid Grid.Row="1" Name="DataGrid1" AutoGenerateColumns="False" RowDetailsTemplate="{StaticResource YUBIN}">            
            <DataGrid.Columns>
                <DataGridTextColumn Header="県" Binding="{Binding 県}" ></DataGridTextColumn>
            </DataGrid.Columns>            
        </DataGrid>
    </Grid>
</Window>

因みに、AutoGenerateColumns="False"を書かない場合は、

な風に表示されてしまう。
次なる問題は、このままだと県が重複して表示されるので、ただ横のデータを縦に表示しただけで、うーん? と言う所。
果たして県の重複表示は1回のみ表示にできるのだろうか。グループ化というやつですね?


VB Tips And Sample(HOME)VBプログラマの為のWPF入門