Search code examples
wpfexpression-blend

How to display the image in a template where the source is a TemplateBinding in design view WPF?


I've got the following template ImageTextRadioButton for a button-like RadioButton with text and the image in it:

<ControlTemplate TargetType="RadioButton" x:Key="ImageTextRadioButton">
  <Border  Background="{TemplateBinding Background}" BorderBrush="Black" CornerRadius="8" BorderThickness="2">
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width=".5*" />
        <ColumnDefinition Width="1*" />
      </Grid.ColumnDefinitions>
        <Image x:Name="ButtonImage" Grid.Column="0" Source="{TemplateBinding Content}" Stretch="None" />
        <TextBlock Grid.Column="1" VerticalAlignment="Center" Text="{TemplateBinding Content}" />
    </Grid>
  </Border>
</ControlTemplate>

(Note that Content in the TemplateBindings is just a string containing the path+filename of the image file).

This works as expected in run mode, but in design mode it doesn't display the image. The text block displays the correct text, and if I replace the Image.Source with a hard-coded value, the image displays correctly too. But the image just won't display correctly in design mode with the TemplateBinding source.


Solution

  • Argh, I had the .png files as embedded resources, so the converter needed to report the filename as "/MyProject;component/images/" + value + ".png" instead of "../images/" + value + ".png" Once I made that change to the converter, everything worked.