CODEWITHSUNDEEP
c#wpfxamldata-binding
gmn
gmn

Reputation: 4319

WPF DataTemplate Binding depending on the type of a property

I have a collection of objects bound to a hierarchical data template, each of my objects have a property on them (lets call it Property "A") that is of a certain type. This type varies among each of the objects.

If the data template contains an image and some text, what would be the best way to change the image that is displayed in the template based on the type of property "A".

I know I could just stick this into a converter and do the binding translation manually in code, but with all the binding facilities available in WPF, I think theres probably a better way.

Upvotes: 21

Views: 35882

Answers (3)

Snowbear
Snowbear

Reputation: 17274

DataTemplateSelector doesn't seem to be a good choice here since you have the same template for all values of A.

Use DataTriggers: 

<DataTemplate>
    <StackPanel>
        <Image x:Name="image" />
        <TextBlock>Your text</TextBlock>
    </StackPanel>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding Path=A}" Value="ValueToCheck1">
            <DataTrigger.Setters>
                <Setter Property="Source" Value="Image1.png" TargetName="image" />
            </DataTrigger.Setters>
        </DataTrigger>
        <DataTrigger Binding="{Binding Path=A}" Value="ValueToCheck2">
            <DataTrigger.Setters>
                <Setter Property="Source" Value="Image2.png" TargetName="image" />
            </DataTrigger.Setters>
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

Haven't tested it, but the idea is like that.

Upvotes: 1

Matěj Z&#225;bsk&#253;
Matěj Z&#225;bsk&#253;

Reputation: 17272

I think You can do that with triggers. 

<Image.Style>
    <Style TargetType="{x:Type Image}">
        <Setter Property="Source" Value="Path">
        <Style.Triggers>
            <DataTrigger Binding="{Binding TheProperty}" Value="TheValue">
                <Setter Property="Source" Value="NewPath"/>
            </DataTrigger>
        </Style.Triggers>
     </Style>
</Image.Style>

Upvotes: 1

Robert Rossney
Robert Rossney

Reputation: 96702

It's pretty simple to do this within your data template, if you create local data templates and use a ContentPresenter. This template presents objects of type MyObject, displaying an image whose source is determined by the type of the A property next to a TextBlock that displays the content of the Text property:

<DataTemplate DataType="{x:Type MyObject}">
   <StackPanel Orientation="Horizontal">
      <StackPanel.Resources>
         <DataTemplate DataType="{x:Type Thing1}">
            <Image Source="thing1.png"/>
         </DataTemplate>
         <DataTemplate DataType="{x:Type Thing2}">
            <Image Source="thing2.png"/>
         </DataTemplate>
      </StackPanel.Resources>
      <ContentPresenter Content="{Binding A}"/>
      <TextBlock Text="{Binding Text}"/>
   </StackPanel>
</DataTemplate>

If you want to use styles to do this instead, you're going to run into a problem, because data triggers want to look at property values, and the type of the A property is not, itself, exposed as a property.

Unless, of course, you implement one:

public Type AType { get { return A.GetType(); } }

(You'll also need to raise PropertyChanged for AType when the value of A changes.) Once you've done this, you should be able to implement a data trigger in a style, e.g.:

<Style TargetType="Image">
   <Setter Property="Source" Value="default.png"/>
   <Style.Triggers>
      <DataTrigger Binding="{Binding AType}" Value="{x:Type Thing1}">
         <Setter Property="Source" Value="thing1.png"/>
      </DataTrigger>
      <DataTrigger Binding="{Binding AType}" Value="{x:Type Thing2}">
         <Setter Property="Source" Value="thing2.png"/>
      </DataTrigger>
   </Style.Triggers>
</Style>

Upvotes: 42

Related Questions