How to bind an image to a button template using Blend?

Question

In Microsoft Expression Blend, I have the following button template:

    <ControlTemplate x:Key="ImageBlueButton" TargetType="{x:Type Button}">
        <Grid x:Name="MainGrid" Width="75" Height="50">
            <Grid.RowDefinitions>
                <RowDefinition Height="0.5*"/>
                <RowDefinition Height="0.5*"/>
            </Grid.RowDefinitions>  
            <ContentPresenter x:Name="TextContent" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0" Grid.Row="1" d:LayoutOverrides="Width, Height"/>
            <Image x:Name="ButtonImage" Margin="0" Grid.RowSpan="1" HorizontalAlignment="Center" VerticalAlignment="Center" Source="{TemplateBinding Content}"/>
        </Grid>         
    </ControlTemplate>

I manually edited the XAML to add the Source={TemplateBinding Content} property to the Image tag. My question is, how do I assign an image to a button object that's using this template inside Blend?

In Blend, I can see a Common Properties window with Content field in it, but changing it only updates the text on the button. I'm guessing I need to use Custom Expression, to set both Text Content and Image content at the same time?

score 0 · Accepted Answer · edited May 23 '17 at 11:49

0

Looks like there's no way to set multiple Content properties inside a template (Text and Image). I will have to create my own UserControl instead. This question is similar to the one answered here.

edited May 23 '17 at 11:49

Community

1
1

answered Jun 21 '12 at 16:57

Eternal21

4,190
2
48
63

How to bind an image to a button template using Blend?

1 Answers1