Template Binding in Control template

Question

I have the following control template.

I wish to set the source property for the image control in the control template using Template Binding.

But since this is a control template for button control and the button control doesn't have source property, i can't use TemplateBinding in this case.

<ControlTemplate x:Key="BtnTemplate" TargetType="Button">
        <Border CornerRadius="5"  Margin="15" Cursor="Hand">
            <StackPanel>
                <Image Name="Img" Style="{StaticResource ImageStyle}" Source="temp.jpg" Height="100" Width="100" Margin="5"></Image>
                <Label Content="{TemplateBinding Content}" Background="Transparent" Margin="2"></Label>
            </StackPanel>
        </Border>
    </ControlTemplate>

Since i have to set different images for different instances of button, i can't hardcode the path as well.

Please let me know how to tackle this situation.

score 36 · Accepted Answer · answered Jan 09 '11 at 11:09

I'd suggest using dynamic resources, e.g. define the template as follows:

<ControlTemplate x:Key="buttonTemplate" TargetType="Button">
    <Border CornerRadius="5"  Margin="15" Cursor="Hand">
        <StackPanel Orientation="Horizontal" Background="Yellow">
            <Image Source="{DynamicResource ResourceKey=Img}" Height="100" Width="100" Margin="5"></Image>
            <Label Content="{TemplateBinding Content}" Background="Transparent" Margin="2"></Label>
        </StackPanel>
    </Border>
</ControlTemplate>

And use it like this:

<Button Content="Button" Template="{StaticResource ResourceKey=buttonTemplate}">
    <Button.Resources>
        <ImageSource x:Key="Img">SomeUri.png/</ImageSource>
    </Button.Resources>
</Button>

Is it possible to use the Button in a much more concise manner? Like ? I am struck with this, could you please help me? http://stackoverflow.com/q/13464735/640607 — Shankar Raju, Nov 20 '12 at 05:43

score 5 · Answer 2 · answered Jan 09 '11 at 11:05

TemplateBinding is a lightweight "binding", it doesn't support some features of traditional Binding, such as automatically type conversion using the known type converters associated with the target property (such as converting the string URI into a BitmapSource instance).

The following code can work properly:

<Window x:Class="GridScroll.Window2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window2">
<Window.Resources>
    <Style TargetType="{x:Type Button}" x:Key="ButtonStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border CornerRadius="5"  Margin="15" Cursor="Hand" Background="Red">
                        <StackPanel Orientation="Horizontal" Background="White">
                            <Image Name="Img" Source="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}" Margin="5"></Image>
                            <Label Content="{TemplateBinding Content}" Margin="2"></Label>
                        </StackPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


</Window.Resources>
<StackPanel Orientation="Horizontal">
    <Button Style="{StaticResource ButtonStyle}" Tag="a.jpeg" Content="a"/>
    <Button Style="{StaticResource ButtonStyle}" Tag="b.png" Content="b"/>
</StackPanel>

is there any other way to do it rather than having Tag.? I am worried coz, later i might have multiple controls in my control template and i would like to set the properties at the time of creating object. But since Tag is already used, i will not be able use that again. — Sam, Jan 09 '11 at 11:12
You can do as Kent suggests.Derive from button and create your own control.Add your custom dependency property and use as i use tag — biju, Jan 09 '11 at 11:18
My problem was slightly different than the original post, but this was the only solution that did the trick. I spent all morning on this, because errors in a single resource dictionary were preventing the UI from loading in several xaml designers throughout our application. Seriously, thank you. — CodeOtaku, Jul 13 '16 at 17:22

score 3 · Answer 3 · edited Sep 28 '11 at 00:27

3

You haven't really said how you expect consumers of your button to set the source. You could use the Button.Tag property, for example, and then bind to that in your template. Or you could define your own control:

public class ImageButton : Button
{
    // add Source dependency property a la Image
}

And then the template:

<ControlTemplate TargetType="ImageButton">
    <Border CornerRadius="5"  Margin="15" Cursor="Hand">
        <StackPanel>
            <Image Name="Img" Style="{StaticResource ImageStyle}" Source="{TempateBinding Source}" Height="100" Width="100" Margin="5"></Image>
            <Label Content="{TemplateBinding Content}" Background="Transparent" Margin="2"></Label>
        </StackPanel>
    </Border>
</ControlTemplate>

edited Sep 28 '11 at 00:27

answered Jan 09 '11 at 10:52

Kent Boogaart

175,602
35
392
393

i used tag property but that doesn't work. Source="{TemplateBinding Tag}" and while creating the button, Tag="Temp.jpg" but this doesn't work. i wish to set the source only in XAML no codebehind. Also, Tag might not be a good idea as there can be many controls within the controltemplate for whom i would want to set a few properties at the time of creation of the object. – Sam Jan 09 '11 at 10:56
That doesn't work because `Source` is of type `ImageSource`, and "Temp.jpg" is a `string`. You'll need to use a converter to convert strings to ImageSources, much like the `Image` control does. – Kent Boogaart Jan 09 '11 at 14:58

score 1 · Answer 4 · answered Jan 09 '11 at 11:21

I'm not sure that I understood your problem very well but why don't you use ContentPresenter? It allows to move the code for your Image at the higher level.

<ControlTemplate x:Key="BtnTemplate" TargetType="Button">
  ...
  <ContentPresenter/>
</ControlTemplate>
...
<Button Template="{StaticResource BtnTemplate}">
  <Image .../>
</Button>

Template Binding in Control template

4 Answers4

Linked

Related