TemplateBinding en una plantilla anidada en Silverlight 4

Question

He implementado un Control, CommandTextBox, que quiero ser un cuadro de texto con un botón justo al lado (por lo que casi aparece dentro del cuadro de texto).

El botón debe ser una imagen que pueda vincular a un icono. Es algo bastante directo ...

public class CommandTextBox : TextBox
{
    /// <summary>
    /// The image property.
    /// </summary>
    public static readonly DependencyProperty ImageProperty = DependencyProperty.Register(
        "Image", typeof(ImageSource), typeof(CommandTextBox), null);

    /// <summary>
    ///     Initializes a new instance of the <see cref = "CommandTextBox" /> class.
    /// </summary>
    public CommandTextBox()
    {
        this.DefaultStyleKey = typeof(CommandTextBox);
    }

    /// <summary>
    ///     Gets or sets the image.
    /// </summary>
    /// <value>
    ///     The image.
    /// </value>
    public ImageSource Image
    {
        get
        {
            return (ImageSource)this.GetValue(ImageProperty);
        }

        set
        {
            this.SetValue(ImageProperty, value);
        }
    }
}

Tengo una plantilla de la siguiente manera ...

<Style TargetType="Controls:CommandTextBox">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Controls:CommandTextBox">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <TextBox Grid.Column="0" Text="{TemplateBinding Text}"/>

                        <Button Grid.Column="1" 
                                Content="Search" >
                            <Button.Template>
                                <ControlTemplate>
                                    <Image Source="{TemplateBinding Image}" />
                                </ControlTemplate>
                            </Button.Template>
                        </Button>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Pero recibo un error debido a la vinculación de la plantilla en la imagen. Entiendo por qué, es porque la plantilla ha cambiado ahora, por lo que el contexto vinculante no es el mismo, pero no sé cómo superarla.

¿Necesito crear un control de Button por separado para poder hacer una unión de plantilla normal o hay otra forma?

Gracias Ben

Answer 1

He logrado hacer que esto funcione cambiando el estilo de la siguiente manera:

    <Style TargetType="appControls:CommandTextBox">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="appControls:CommandTextBox">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <TextBox Grid.Column="0" Text="{TemplateBinding Text}"/>
                        <Button Grid.Column="1" >
                            <Button.Content>                                
<Image DataContext="{TemplateBinding Image}" Source="{Binding}" />                               
                            </Button.Content>
                        </Button>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

No estoy usando una plantilla separada para el botón. Mi XAML con el control es:

<controls:CommandTextBox Text="Text" Image="/MyApp.Silverlight;component/Assets/Images/Amber_Triangle.png"></controls:CommandTextBox>

Esto parece lograr el resultado que estuvo después. El control representa en mi página de prueba como se esperaba.