Befestigen Sie ICommand im WPF-UserControl

Implementiert habe ich eine einfache Schaltfläche mit einem Bild in ihm:

    <Button Command="{Binding ButtonCommand, ElementName=ImageButtonControl}">
        <StackPanel Orientation="Horizontal">
            <Image Source="{Binding ButtonImage, ElementName=ImageButtonControl}"/>
            <TextBlock Text="{Binding ButtonText, ElementName=ImageButtonControl}" Margin="2,0,0,0"/>
        </StackPanel>
    </Button>

Wie Sie sehen können, ich setze ein ButtonCommand-Eigenschaft, um in der Lage sein zu befestigen, wird ein ICommand zu diesem UserControl:

public partial class ImageButton : UserControl
{
    ///<summary>
    ///The dependency property that gets or sets the source of the image to render.
    ///</summary>
    public static DependencyProperty ImageSourceProperty = 
        DependencyProperty.Register("ButtonImage", typeof(ImageSource), typeof(ImageButton));

    public static DependencyProperty TextProperty =
        DependencyProperty.Register("ButtonText", typeof(string), typeof(ImageButton));

    public static DependencyProperty ButtonCommandProperty =
        DependencyProperty.Register("ButtonCommand", typeof(ICommand), typeof(ImageButton));

    public ImageButton()
    {
        this.DataContext = this;
        InitializeComponent();
    }

    ///<summary>
    ///Gets or sets the button command.
    ///</summary>
    public ICommand ButtonCommand
    {
        get { return (ICommand)GetValue(ImageButton.ButtonCommandProperty); }
        set { SetValue(ImageButton.ButtonCommandProperty, value); }
    }

    ///<summary>
    ///Gets or sets the button image.
    ///</summary>
    public ImageSource ButtonImage
    {
        get { return (ImageSource)GetValue(ImageButton.ImageSourceProperty); }
        set { SetValue(ImageButton.ImageSourceProperty, value); }
    }

    ///<summary>
    ///Gets or sets the button text.
    ///</summary>
    public string ButtonText
    {
        get { return (string)GetValue(ImageButton.TextProperty); }
        set { SetValue(ImageButton.TextProperty, value); }
    }
}

Dann, wenn ich erkläre, meine Taste, es gibt diese:

<uc:ImageButton Grid.Row="1" Grid.Column="0" ButtonCommand="{Binding AttachContextCommand}" ButtonImage="{StaticResource AssociateImage}" ButtonText="Associer"/>

Und badaboom, nichts nie passieren, wenn ich auf meine ImageButton.
Wenn ich ersetzen Sie den ImageButton mit einer einfachen Schaltfläche, die ICommand genannt wird.

Ich habe sogar versucht, einfach erweitert die Klasse Button und einen ICommand binden, aber wieder, es hat nicht funktioniert...

Hilfe dankbar !

Thx.

Ist es so, dass die Taste deaktiviert ist, oder, dass Sie darauf klicken und nichts passiert?
Ich klicke es an und der Befehl wird nie aufgerufen...

InformationsquelleAutor Roubachof | 2009-03-13

c#mvvm user-controls wpf

Dies können Sie erreichen, in eine viel sauberere Weg, mit einem Stil und ein paar angefügte Eigenschaften.

Den angefügten Eigenschaften zu speichern bestimmte Informationen.
Der Stil wird diese Eigenschaften verwenden, und erstellen Sie das Aussehen Sie wollen.

Wird das element immer noch eine Schaltfläche, damit der Befehl und alles andere funktioniert.

 public class ImageButton
    {

        public static ImageSource GetImage(DependencyObject obj)
        {
            return (ImageSource)obj.GetValue(ImageProperty);
        }

        public static void SetImage(DependencyObject obj, ImageSource value)
        {
            obj.SetValue(ImageProperty, value);
        }

        public static readonly DependencyProperty ImageProperty =
            DependencyProperty.RegisterAttached("Image", typeof(ImageSource), typeof(ImageButton), new UIPropertyMetadata(null));

        public static String GetCaption(DependencyObject obj)
        {
            return (String)obj.GetValue(CaptionProperty);
        }

        public static void SetCaption(DependencyObject obj, String value)
        {
            obj.SetValue(CaptionProperty, value);
        }

        public static readonly DependencyProperty CaptionProperty =
            DependencyProperty.RegisterAttached("Caption", typeof(String), typeof(ImageButton), new UIPropertyMetadata(null));

    }

<Style TargetType="{x:Type Button}"
               x:Key="ImageButton">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{Binding Path=(local:ImageButton.Image), RelativeSource={RelativeSource AncestorType={x:Type Button}}}" />
                            <TextBlock Text="{Binding Path=(local:ImageButton.Caption), RelativeSource={RelativeSource AncestorType={x:Type Button}}}"
                                       Margin="2,0,0,0" />
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>   
        </Style>

Können Sie dann verwenden Sie diese, um zu erklären Tasten:

   <Button Style="{DynamicResource ImageButton}"
                        local:ImageButton.Caption="Foo" 
                        local:ImageButton.Image="..." />

Hinweis:

Ich bin mir ziemlich sicher, es wäre sauberer " gehen Sie über die "Template" - Eigenschaft und verwenden Sie ein ControlTemplate und TemplateBindings, aber das würde bedeuten, dass neu zu erstellen, die Grenz-und andere Sachen rund um Ihren Inhalt, also, wenn Sie schauen, um definieren eine Standard - "Inhalt" in meinem Beispiel wäre der Weg zu gehen, denke ich.

Ich mag diese Antwort viel besser, auch. Ich in der Regel nicht denken, zu tun, angefügte Eigenschaften, aber Sie sind ein großartiges feature von WPF.
In der Tat sind Sie. Die Tatsache, dass Sie können anfügen Verhalten, um Elemente, die durch angefügte Eigenschaften (wie deklarative Verarbeitung von Ereignissen für Dinge wie Drag-and-Drop) ist noch beeindruckender, wenn Sie es erhalten.
+1 Sehr einfach, flexibel und wiederverwendbar. Dank
Ich habe eine Frage und zwar: gibt es eine reasone zu verwenden DynamicResource? Würde nicht StaticResource ausreichend?
Dieser arbeitete für mich, nachdem ich eine kleine änderung auf den Stil-markup. Ich hatte zu entfernen die "Path=" des Bild-und TextBlock-Bindung durch einen Pfad Ausnahme. Nun meine Bild-element sieht wie folgt aus: <Image Source="{Binding (local:ImageButton.Image), RelativeSource={RelativeSource AncestorType={x:Type Button}}}" /> Hoffe, es hilft.

InformationsquelleAutor Denis Troller

4

Wenn das nur zusätzliche Funktionalität, die Sie für Ihre Schaltfläche, um ein Bild auf ihn, dann denke ich, Sie nähert sich dieser aus der falschen Richtung. WPF ist so genial, wie es ist, weil die UI-Steuerelemente sind Aussehen-weniger. Dies bedeutet, dass eine Steuerung lediglich eine definition der Funktionalität + template zu definieren, wie es aussieht. Dies bedeutet, dass die Vorlage kann ausgelagert werden, jederzeit zu ändern das Aussehen. Auch fast alle Inhalte können platziert fast jede Kontrolle

Beispielsweise die Definition einer Schaltfläche in der xaml-hat den look, gehen Sie für alles, was Sie brauchen, ist diese:
```
<Window ...>
    ...
    <Button Command="{Binding AttachContextCommand}">
        <StackPanel Orientation="Horizontal">
            <Image Source="{StaticResource AssociateImage}"/>
            <TextBlock Text="Associer"/>
        </StackPanel>
    </Button>
    ...
</Window>
```
Nur im Hinterkopf behalten, dass mit WPF Sie nicht haben, um eine neue zu definieren CustomControl oder UserControl jedes mal, wenn Sie wollen, ändern Sie das Aussehen und das Gefühl von etwas. Die einzige Zeit, die Sie sollten ein CustomControl ist, wenn Sie möchten, um Funktionalität hinzuzufügen, um ein vorhandenes Steuerelement zu erstellen oder Funktionen, die nicht vorhanden ist in einem anderen Steuerelement.

Edit Wegen Kommentar:

Wenn Sie wollen, um sich von der Definition der Inhalte für die Schaltfläche jedes mal, die andere Möglichkeit ist, einfach eine poco (plain old CLR object) - Klasse, würde definieren, alles, was Ihr daran interessiert (Schreibe ich als Beispiel, wenn Sie tun dies für eine tool-bar, denn es macht Sinn für mich):
```
public class ToolBarItem : INotifyPropertyChanged
{
    public string Text { get ... set ... }
    public ICommand Command { get ... set ... }
    public ImageSource Image { get ... set ... }
}
```
Die eine data-template irgendwo definiert (App.xaml Fenster.Ressourcen, etc):
```
<DataTemplate DataType="{x:Type l:ToolBarItem}">
    <Button Command="{Binding Command}">
        <StackPanel Orientation="Horizontal">
            <Image Source="{Binding Image}"/>
            <TextBlock Text="{Binding Text}"/>
        </StackPanel>
    </Button>
</DataTemplate>
```
Und verwenden Sie dann den Kerl im xaml-Code wie dieser:
```
<Window ...>
    ...
    <ContentControl>
        <ContentControl.Content>
            <l:ToolBarItem Image="..." Command="..." Text="..."/>
        </ContentControl.Content>
    </ContentControl>
    ...
</Window>
```
Ich weiß nur nicht, dass der Weg, den Sie versuchen zu tun, ist es, die meisten WPF-Art und Weise Sie es tun könnte.

BEARBEITEN Aktualisiert, basierend auf den zweiten Kommentar
Sorry, ich vergaß zu zählen, die ContentControl im umliegenden Bereich. Nun, ich erinnerte mich, dass, ich weiß, dass das nicht viel weniger ausführlich als das original, wo Sie angeben, den Inhalt manuell. Ich werde eine neue Antwort zu helfen, die mit Ihrer ursprünglichen Frage.
- Hi, ich weiß das. Eigentlich dem Ziel der Schaffung eines Benutzer-Kontrolle war, zu vermeiden, diese schriftlich für alle Tasten. Dies zu tun, hatte ich nur schreiben: <uc:ImageButton ButtonCommand="{Binding AttachContextCommand}" ButtonImage="{StaticResource AssociateImage}" /> Es ist nur die Umgestaltung, wenn Sie wollen.
- Sorry, aber diese funktioniert nicht... ToolBarItem ist nicht ein UIElement und wenn ich versuche, die app zu starten, bekomme ich eine exception, die mir dies erzählt.
InformationsquelleAutor dustyburwell
1

Re-Antwort auf die ursprüngliche Frage:

Was ich glaube, was Sie tun möchten, ist erstellen Sie eine neue CustomControl genannt ImageButton. Dann ändern Sie es zu erweitern, aus-Taste statt Control. Sie brauchen nicht eine Command-Eigenschaft, da Button schon einen hat. Sie müssen nur ein Bild hinzufügen Eigentum und Sie können die Wiederverwendung der Content-Eigenschaft aus-Taste anstelle der Text-Eigenschaft.

Wenn Ihr CustomControl erstellt, es wird fügen Sie einen Eintrag in Ihre Generic.den xaml-Code für die Standard-Stil der ImageButton. In den Setter für die Template-Eigenschaft, die Sie ändern können, das ControlTemplate zu diesem:
```
<ControlTemplate TargetType="{x:Type local:ImageButton}">
    <StackPanel Orientation="Horizontal">
        <Image Source="{TemplateBinding Image}"/>
        <ContentPresenter/>
    </StackPanel>
</ControlTemplate>
```
Dann wieder, wenn Sie es verwenden möchten:
```
<Window ... >
...
    <l:ImageButton Image="{StaticResource ...}" Command="...">
        Associer
    </l:ImageButton>
...
</Window>
```
InformationsquelleAutor dustyburwell
0

Den eingebauten WPF-button enthält code, der feuert den angehängten Befehl in Antwort auf geklickt haben. Ihre "ImageButton" leitet von UserControl, so dass Sie nicht bekommen, dass Verhalten. Wahrscheinlich der kürzeste Weg zu bekommen, was Sie wollen, ist für Ihre Klasse ImageButton tatsächlich leiten sich von den WPF-Button-Klasse. Um dies zu erreichen, ändern Sie die markup für den ImageButton aus
```
<UserControl
...
>
...
</UserControl>
```
zu
```
<Button
...
>
...
</Button>
```
Dann ändern Sie die Basisklasse von ImageButton aus UserControl zu Button.

Werden Sie wahrscheinlich benötigen, um einige kleinere änderungen vorgenommen, bevor es funktioniert alles.
- Hallo Daniel, ich habe in der Tat versucht, erstreckt sich die button-Klasse, der Befehl wird aber nie aufgerufen...
InformationsquelleAutor Daniel Pratt

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.