在WPF用户控件安装的ICommand [英] Attach ICommand in WPF UserControl

问题描述

我在它执行与图像一个简单的按钮：

I implemented a simple button with an image in it:

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

正如你所看到的，我为了揭露一个ButtonCommand属性能一个ICommand附加到此用户控件：

As you can see, I expose a ButtonCommand property in order to be able to attach an ICommand to this 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); }
    }
}

后来，当我宣布我的按钮，它给出了这样的：

Then when I declare my button it gives this:

＆LT; UC：ImageButton的Grid.Row =1Grid.Column =0ButtonCommand ={结合AttachContextCommand}按钮画面={StaticResource的AssociateImage}ButtonText =Associer/ ＆GT;

和Badaboom的，当我点击我的ImageButton什么不会发生。
当我用一个简单的按钮替换的ImageButton时，ICommand的被调用。

And badaboom, nothing never happen when I click on my ImageButton. When I replace the ImageButton with a simple button, the ICommand is called.

我甚至试图简单地扩展了Button类和绑定一个ICommand，但再次，它没有工作......

I even tried to simply extends the Button class and bind an ICommand, but once again, it didn't work...

帮助AP preciated！

Help appreciated !

THX。

推荐答案

您可以使用样式和两个附加属性在一个更清洁的方式实现这一目标。

You can achieve this in a much cleaner way using a style and a couple of attached properties.

的附加属性将存储您的具体信息。
风格将使用这些属性，打造你想要的效果。

The attached properties will store your specific information. The style will use these properties and build the look you want.

元素仍然是一个按钮，命令和其他一切正常工作。

The element will still be a button so the command and everything else will work.

 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>

您可以使用这个声明按钮：

You can then use this to declare buttons:

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

请注意：

我是pretty肯定这将是清洁要经过模板属性，并使用一个的ControlTemplate和TemplateBindings，但是这意味着重新创建围绕内容的边界和其他的东西，所以如果你是希望只是定义一个默认的内容，我的例子是要走的路，我想。

I'm pretty sure it would be cleaner to go through the "Template" property and use a ControlTemplate and TemplateBindings, but that would mean re-creating the border and other stuff around your content, so if you are looking to just define a default "Content", my example would be the way to go, I think.

这篇关于在WPF用户控件安装的ICommand的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！