WPF開發 DataGrid的合併樣板

在開發WPF時使用DataGrid元件時,如果因為資料較多欄位,想把某些取得的資料合併顯示於同一欄內,建議採用DataTemple的作法。

以下使用xaml語法說明,先設定好樣板,用垂直方式排列在StackPanel物件內,把綁定的欄位寫入。

<Grid.Resources>

    <DataTemplate x:Key="ItemName" >
        <StackPanel Orientation="Vertical">
            <StackPanel Orientation="Horizontal">
                <TextBlock FontSize="10" Foreground="DarkMagenta" Text="{Binding 品名}" VerticalAlignment="Center" />
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock FontSize="7" Text="規格: " VerticalAlignment="Center" />
                <TextBlock FontSize="7" Foreground="DarkOliveGreen" Text="{Binding 規格}" VerticalAlignment="Center" />
            </StackPanel>
        </StackPanel>
    </DataTemplate>
</Grid.Resources>

綁定的取用方式

<DataGrid x:Name="Dg01" ItemsSource="{Binding}" Margin="0" 
          materialDesign:DataGridAssist.CellPadding="4 2 2 2"  materialDesign:DataGridAssist.ColumnHeaderPadding="4 2 2 2" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" 
          AutoGenerateColumns="False" 
          CanUserAddRows="False" FontSize="8" Width="550" BorderThickness="0" Padding="0">
    <DataGrid.Columns>

        <DataGridTemplateColumn x:Name="ProdItemName" Header="品名/規格" 
             CellTemplate="{StaticResource ItemName}" CanUserSort="True" SortMemberPath="品名" 
             Width="160"/>
        <DataGridTemplateColumn Header="時間" 
             CellTemplate="{StaticResource TimeSpan}" SortMemberPath="開始"
             Width="70"></DataGridTemplateColumn>
        <DataGridTemplateColumn x:Name="AmtCols" Header="數量" CellTemplate="{StaticResource Amount}" 
             SortMemberPath="數量" Width="60"/>

    </DataGrid.Columns>
</DataGrid>

可參考: 資料範本化概觀

iT邦幫忙 個人帳號:Kw6732