Dynamic cell control in one column in WPF DataGrid

Question

I want to create WPF DataGrid with dynamic cell control in one column based on value in another column as below image.

XAML

<Window.Resources>
    <Style x:Key="DataGridCellStyle1" TargetType="{x:Type DataGridCell}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridCell}">
                    <Grid Height="21.96">
                        <ComboBox x:Name="cbCondition1">
                            <ComboBoxItem Content="1"/>
                            <ComboBoxItem Content="2"/>
                        </ComboBox>

                        <TextBox x:Name="tbCondition2" Text="text"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <DataTrigger Binding="{Binding TypeColumn}" Value="ComboBox">
                            <Setter Value="Visible" TargetName="cbCondition1" Property="Visibility"/>
                            <Setter Value="Hidden" TargetName="tbCondition2" Property="Visibility"/>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding TypeColumn}" Value="TextBox">
                            <Setter Value="Hidden" TargetName="cbCondition1" Property="Visibility"/>
                            <Setter Value="Visible" TargetName="tbCondition2" Property="Visibility"/>
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                <Setter Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
            </Trigger>
            <Trigger Property="IsKeyboardFocusWithin" Value="True">
                <Setter Property="BorderBrush" Value="{DynamicResource {x:Static DataGrid.FocusBorderBrushKey}}"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
 <DataGrid HorizontalAlignment="Left" Width="500" Grid.ColumnSpan="2" VerticalAlignment="Top" x:Name="GridWorkers" 
                  ItemsSource="{Binding Workers}" Grid.Row="1" SelectedItem="{Binding SelectedWorker}" AutoGenerateColumns="False">
   <DataGrid.Columns>
        <DataGridTextColumn Header="Control Type" Binding="{Binding TypeColumn}" Width="90" IsReadOnly="True"/>
        <DataGridTemplateColumn Header="Dynamic Control" CellStyle="{StaticResource DataGridCellStyle1}"/>
   </DataGrid.Columns>
 </DataGrid>
</Grid>

I'm able to achieve this with xaml style, but looking for programmatic way to dynamically add controls in DataGrid cell i.e from C# code both (mvvm approach and code-behind approach) is preferred. Other possible way for solution also appreciated.

This question is incomplete, How to create a Minimal, Complete, and Verifiable example: stackoverflow.com/help/mcve — Any Moose

mm8 mm8 · Accepted Answer · 2018-09-20T15:12:46

You could use a ContentControl with a Style that sets the Content property based on the value of the ControlType source property, e.g.:

<DataGrid ... AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Control Type" Binding="{Binding ControlType}" />
        <DataGridTemplateColumn Header="Dynamic Control">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <ContentControl>
                        <ContentControl.Style>
                            <Style TargetType="ContentControl">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding ControlType}" Value="ComboBox">
                                        <Setter Property="Content">
                                            <Setter.Value>
                                                <ComboBox />
                                            </Setter.Value>
                                        </Setter>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding ControlType}" Value="TextBox">
                                        <Setter Property="Content">
                                            <Setter.Value>
                                                <TextBox Text="text...." />
                                            </Setter.Value>
                                        </Setter>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </ContentControl.Style>
                    </ContentControl>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

Dynamic cell control in one column in WPF DataGrid

1 Answers