How to set image content to ContentControl dynamically using style? - wpf

Question

I have custom Button which contains ContentControl named "IconBox", which content depends on triggers:
<Button>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<!-- somethig here ..... -->
<ContentControl x:Name="IconBox" HorizontalAlignment="Center"
VerticalAlignment="Center"
Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<!-- triggers here -->
</ControlTemplate.Triggers>
<!-- closing tags ... -->
</Button>
Most of the triggers looks like:
<DataTrigger Binding="{Binding Path=Flag}" Value="icon1">
<Setter TargetName="IconBox" Property="Visibility" Value="Visible"/>
<Setter TargetName="IconBox" Property="Style"
Value="{DynamicResource icon1}"/>
</DataTrigger>
Where icon1 is a ControlTemplate with ViewBox and vector images inside.
So it's already known.
Now I need to add also bitmap images, which name contains in new Model's property let's call it Image.
So I want something like:
<DataTrigger Binding="{Binding Path=Flag}" Value="useImage">
<Setter TargetName="IconBox" Property="Visibility" Value="Visible"/>
<Setter TargetName="IconBox" Property="Style"
Value="{DynamicResource ImageTemplate}"/>
</DataTrigger>
How then ImageTemplate should look like?
I've tried next one:
<Style TargetType="ContentControl" x:Key="ImageTemplate">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Viewbox>
<Image>
<Image.Source>
<Binding RelativeSource="{RelativeSource Self}"
Converter="{StaticResource ImagePathConverter}"
Path="Image"/>
</Image.Source>
</Image>
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But it didn't work. Why?
Image contains sting like "image1.bmp", and ImagePathConverter simply adds full path to it - "%CurrentDir%\Resources\image1.bmp"
Breakpoint inside converter doesn't hit. As far as one inside Image getter.
And I have no idea why. Maybe some error happens inside my template or trigger?
The other triggers with Canvas inside ViewBox works fine.
Though when I'm using VisualTree to check this element properties in runtime, breakpoint inside Image getter hits.
Any other ideas how could I implement the image inside ImageBox?

Answer 1

If you define a DataTemplate:
<DataTemplate x:Key="ImageTemplate">
<Image Source="{Binding Image, Converter={StaticResource ImagePathConverter}}"/>
</DataTemplate>
...you could set the ContentTemplate of the ContentControl to this one:
<DataTrigger Binding="{Binding Path=Flag}" Value="useImage">
<Setter TargetName="IconBox" Property="Visibility" Value="Visible"/>
<Setter TargetName="IconBox" Property="ContentTemplate" Value="{DynamicResource ImageTemplate}"/>
<Setter TargetName="IconBox" Property="Content" Value="{Binding}"/>
</DataTrigger>
The Content property should be bound to the object where the Image property is defined.
Also note that your converter should return an ImageSource and not a string:
"Cannot convert string to ImageSource." How can I do this?