c# - 扩展按钮以创建可重复使用的自定义按钮

我想扩展Button类以创建可重用的按钮，我将其称为NavBarButton。

非常简单：该按钮是一个在其下方具有TextBlock的图像。

这是NavBarButton类：

public class NavBarButton : Button
{
    public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
        "Text",
        typeof(string),
        typeof(NavBarButton),
        new UIPropertyMetadata(null));

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


    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public ImageSource Image
    {
        get { return (ImageSource)GetValue(ImageProperty); }
        set { SetValue(ImageProperty, value); }
    }
}

这是NavBarButton标记：

<Button Name="NavBarButton"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
    <Button.Template>
        <ControlTemplate>
            <StackPanel Orientation="Vertical">
                <Image Source="{Binding ElementName=NavBarButton, Path=Image}"/>
                <TextBlock Text="{Binding ElementName=NavBarButton, Path=Text}" />
            </StackPanel>
        </ControlTemplate>
    </Button.Template>
</Button>

这是我将NavBarButton放置在用户控件内的方式：

<local:NavBarButton x:Name="UserNavBarButton"
    Width="80"
    Height="80"
    Image="/Resources/User.png" Text="Test"/>

问题是：我看不到文本（在这种情况下为“ Test”）或图像。

注意：该图像的构建设置为“资源”。如果将“ /Resources/User.png”直接放在图像上，则可以毫无问题地看到它。

我想念什么？

最佳答案

修改了您的代码以对其进行修复。

NavBarButton中定义的Generic.xaml标记
    

<Style TargetType="{x:Type local:NavBarButton}" BasedOn="{StaticResource ResourceKey={x:Type Button}}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:NavBarButton}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <StackPanel HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                        <Image Source="{TemplateBinding Image}"/>
                        <TextBlock Text="{TemplateBinding Text}"/>
                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

CustomControl最重要的部分是您需要重写代码中缺少的静态构造函数中的样式。

public class NavBarButton : Button
{
    //Unless you override the style it will never be rendered
    static NavBarButton()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(NavBarButton), new FrameworkPropertyMetadata(typeof(NavBarButton)));
    }



    public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
    "Text",
    typeof(string),
    typeof(NavBarButton),
    new UIPropertyMetadata(null));

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


    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public ImageSource Image
    {
        get { return (ImageSource)GetValue(ImageProperty); }
        set { SetValue(ImageProperty, value); }
    }
}

现在您应该可以轻松使用它

<Window x:Class="WpfApplication.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication"
    mc:Ignorable="d"
    xmlns:custom="clr-namespace:WpfApplication"
    Title="MainWindow" Height="350" Width="525">
  <custom:NavBarButton Text="Test" />
</Window>