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.
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.