wpf - WPF 中的自定义控件

Question

我刚刚开始学习WPF。

我有一个带有图像的按钮。比如图片+文字

    <Button Height="67" Name="Button1" Width="228" HorizontalContentAlignment="Left">
        <StackPanel Orientation="Horizontal" >
            <Image Source="Images/add.png" Stretch="Uniform"></Image>
            <TextBlock Text="  Create Company" VerticalAlignment="Center" FontSize="20"></TextBlock>
        </StackPanel>
    </Button>

现在我想以上述格式添加更多按钮。所以我不得不一次又一次地编写相同的代码。

所以我决定使用自定义按钮来轻松完成我的工作。我尝试创建自定义控件。

我在那里添加了一个名为 Image 的属性。现在我应该如何赋予该属性值(value)？

我走错路了吗？

Answer 1

这里有教程how to create a custom control .

[1.] 添加名为“ButtonImg”的新项“自定义控件 (WPF)”。

完成此步骤后，VS 会为您创建两个文件:“ButtonImg.cs”和“/Themes/Generic.xaml”。

[2.] 添加一些依赖属性到“ButtonImg.cs”文件:

我创建了以下属性:图像源、文本、图像宽度和高度。

public class ButtonImg : Control
{
    static ButtonImg()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(ButtonImg), new FrameworkPropertyMetadata(typeof(ButtonImg)));
    }

    public ImageSource ImageSource
    {
        get { return (ImageSource)GetValue(ImageSourceProperty); }
        set { SetValue(ImageSourceProperty, value); }
    }        
    public static readonly DependencyProperty ImageSourceProperty =
        DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(ButtonImg), new PropertyMetadata(null));

    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }
    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text", typeof(string), typeof(ButtonImg), new PropertyMetadata(string.Empty));

    public double ImageWidth
    {
        get { return (double)GetValue(ImageWidthProperty); }
        set { SetValue(ImageWidthProperty, value); }
    }
    public static readonly DependencyProperty ImageWidthProperty =
        DependencyProperty.Register("ImageWidth", typeof(double), typeof(ButtonImg), new PropertyMetadata((double)30));

    public double ImageHeight
    {
        get { return (double)GetValue(ImageHeightProperty); }
        set { SetValue(ImageHeightProperty, value); }
    }
    public static readonly DependencyProperty ImageHeightProperty =
        DependencyProperty.Register("ImageHeight", typeof(double), typeof(ButtonImg), new PropertyMetadata((double)30));
}

[3.] 在此步骤中，您必须为新的自定义控件创建模板。所以你必须编辑以下文件“/Themes/Generic.xaml”:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfButtonImg">

    <Style TargetType="{x:Type local:ButtonImg}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:ButtonImg}">                  
                    <Button>
                        <Button.Content>
                            <StackPanel Orientation="Horizontal">
                                <Image Source="{TemplateBinding ImageSource}" 
                                       Height="{TemplateBinding ImageHeight}" Width="{TemplateBinding ImageWidth}" 
                                       Stretch="Uniform" />
                                <TextBlock Text="{TemplateBinding Text}" Margin="10,0,0,0" VerticalAlignment="Center" FontSize="20" />
                            </StackPanel>
                        </Button.Content>
                    </Button>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

[4.]使用这个新的自定义控件的例子如下:

首先你必须添加适当的命名空间:

xmlns:MyNamespace="clr-namespace:WpfButtonImg"

现在你可以像这样使用它:

<MyNamespace:ButtonImg ImageSource="/Images/plug.png" Text="Click me!" />