Modelli in un modello nidificato in Silverlight 4

Question

Ho implementato un controllo, CommandTextBox, che voglio essere una casella di testo con un pulsante proprio accanto ad esso (quindi appare quasi nella casella di testo).

Il pulsante dovrebbe essere un'immagine che posso legare a un'icona. È roba abbastanza dritta ...

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);
        }
    }
}

Ho un modello come segue ...

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

Ma ricevo un errore a causa del legame del modello nell'immagine. Capisco perché, è perché il modello è cambiato ora, quindi il contesto vincolante non è lo stesso, ma non so come superarlo.

Devo creare un controllo separato ImageButton in modo da poter semplicemente fare un normale legame modello o c'è un altro modo?

Grazie Ben

Answer 1

Sono riuscito a farlo funzionare cambiando lo stile come segue:

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

Non sto usando un modello separato per il pulsante. Il mio xaml con il controllo è:

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

Questo sembra raggiungere il risultato che stavi cercando. Il controllo rende la mia pagina di prova come previsto.