DataGrid 横のデータを縦に展開して表示 WPFDataGrid RowDetailsTemplateで、横のデータを縦に展開して表示 WPF
前回の続きで、データグリッドのサンプル。 ![]() 今回は、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"を書かない場合は、 |