WPF 中的自定义控件

Question

我刚刚开始学习 WPF。

我有一个带图像的按钮。喜欢Image+Text

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

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

所以我决定有一个 customButton 来轻松完成我的工作。 我尝试创建自定义控件。

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

我是不是走错路了？

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!" />