WPF Swap the entire content in a column based on content

Posted on 2 mins read

In previous post, I demonstrated how to change the content of a grid based on the content of a property of bound object, now I want to take that example further. In the old example I change the source of an image, but now I want to set a complete different template based on content, to make this happens first of all you have to change the DataTemplate in ControlTemplate

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

    <Window.Resources>
        <ControlTemplate x:Key="Ct1">
            <Image x:Name="TheImage" Source="Images/error.png" />
        </ControlTemplate>
        <ControlTemplate x:Key="Ct2">
            <StackPanel>
                <TextBlock Text="Yes Is True!!" />
                <TextBlock Text="This is another different template!!" />
            </StackPanel>
        </ControlTemplate>
    </Window.Resources>

As you can see I create a template with an image, and another template with a complete different content, a stackpanel with two textblock. Now the interesting part is on the grid.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

                <GridView x:Name="theGrid">
                    <GridViewColumn x:Name="firstCol" Header="Active" >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <Control x:Name="cnt" Template="{StaticResource Ct1}" />
                                <DataTemplate.Triggers>
                                    <DataTrigger Binding="{Binding Path=IsTrue}" Value="true">
                                        <Setter TargetName="cnt" Property="Template" Value="{StaticResource Ct2}" />
                                    </DataTrigger>
                                </DataTemplate.Triggers>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>

                    </GridViewColumn>
                    <GridViewColumn Header="Active" DisplayMemberBinding="{Binding Path=IsTrue}"/>
                    <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Path=Name}" Width="100"/>

Since we want to change the content of the GridViewColumn we simply declare the DataTemplate inside a CellTemplate of the GridViewColumn object, here we drop a single control named cntand with default Template of Ct1. Then we can insert a DataTemplate trigger to simply change the Template property of the control, actually swapping the template at runtime based on property of the bound object, here is the result.

image

You can now completely change the template based on object property.

Alk.