Dynamically change the content of of control based on a value

Question

Hi

I want to achieve the following behavior: Depending on a value use a different datatemplate:

 <DataTemplate x:Key="cardTemplate2">
                    <Border x:Name="container">
                     .....
                    </Border>

                  <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding ShowSecondDT}" Value="True">
                      <Setter Property="Child" TargetName="container">
                        <Setter.Value>
                            <StackPanel Orientation="Vertical" >

                            </StackPanel>
                        </Setter.Value>
                      </Setter>
                    </DataTrigger>
                  </DataTemplate.Triggers>
                </DataTemplate>

The application fails claiming that Setter Property="Child" is null...

Another information is that this Datatemplate in the resource of a control: (devexpress gris)

<dxg:GridControl      xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
x:Name="gridTitulaire"        DataSource="{Binding Contacts}" Width="600" >
                <dxg:GridControl.Resources>

                    <DataTemplate x:Key="cardTemplate2">
                    <Border x:Name="container">
                    <StackPanel Orientation="Horizontal" >

                            </StackPanel>
                    </Border>

                  <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding isTitulairePrincipal}" Value="True">
                      <Setter Property="Child" TargetName="container">
                        <Setter.Value>
                            <StackPanel Orientation="Vertical" >

                            </StackPanel>
                        </Setter.Value>
                      </Setter>
                    </DataTrigger>
                  </DataTemplate.Triggers>
                </DataTemplate>

                </dxg:GridControl.Resources>
                <dxg:GridControl.Columns>

                  <dxg:GridColumn FieldName="first_name"/>
                  <dxg:GridColumn FieldName="last_name"/>

                </dxg:GridControl.Columns>
                <dxg:GridControl.View>
                  <dxg:CardView  x:Name="view" ShowGroupedColumns="True" CardTemplate="{DynamicResource cardTemplate2}"  />
                </dxg:GridControl.View>
              </dxg:GridControl>

Any idea ? Thanks Jonathan

Answer 1

Define two separate data templates (call them CardTemplateV for the vertical one, and CardTemplateH for the horizontal one, for example), and set the CardTemplateSelector to a selector object that checks the discriminating field.

Example:

class MyTemplateSelector : DataTemplateSelector
{
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        var cardData = item as CardData;
        if (cardData == null) return;
        var dataObject = cardData.DataContext as YourDataType;
        if (dataObject == null) return null;
        if (dataObject.isTitulairePrincipal)
            return (DataTemplate)App.Current.FindResource("CardTemplateV");
        else 
            return (DataTemplate)App.Current.FindResource("CardTemplateH");
    }
}

In the XAML add the selector to the resource dictionary and reference it from the grid:

<Window.Resources>
    <local:YourTemplateSelector x:Key="MyTemplateSelector"/>
</Window.Resources>
...
<dxg:CardView
    x:Name="view" 
    ShowGroupedColumns="True" 
    CardTemplateSelector="{StaticResource MyTemplateSelector}"/>
...