Кнопка WPF как пользовательский элемент управления с текстом и векторным значком

Question

Добрый вечер, ребята,

Мне бы очень хотелось иметь пользовательскую кнопку с текстом и векторным значком ... Я искал что-то похожее, но не повезло ... поэтому я попытался создать собственный элемент управления но я не могу заставить его работать: ошибки или предупреждения не найдены, но значок не отображается вообще. Вот мой код:

Пользовательский элемент управления CS:

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

    public static readonly DependencyProperty IconProperty =
        DependencyProperty.Register("Icon", typeof(Path), typeof(ThButton), new UIPropertyMetadata(null));

    public Path Icon
    {
        get { return (Path)GetValue(IconProperty); }
        set { SetValue(IconProperty, value); }
    }

    public static readonly DependencyProperty ThLabelProperty =
        DependencyProperty.Register("ThLabel", typeof(string), typeof(ThButton), new UIPropertyMetadata(null));

    public String ThLabel
    {
        get { return (String)GetValue(ThLabelProperty); }
        set { SetValue(ThLabelProperty, value); }
    }

}

generi c .xaml (триггеры и т. Д. c удалены, поскольку для этого не нужны):

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

    <Path x:Key="BoatIcon" Fill="Black" Data="M6,6H18V9.96L12,8L6,9.96M3.94,19H4C5.6,19 7,18.12 8,17C9,18.12 10.4,19 12,19C13.6,19 15,18.12 16,17C17,18.12 18.4,19 20,19H20.05L21.95,12.31C22.03,12.06 22,11.78 21.89,11.54C21.76,11.3 21.55,11.12 21.29,11.04L20,10.62V6C20,4.89 19.1,4 18,4H15V1H9V4H6A2,2 0 0,0 4,6V10.62L2.71,11.04C2.45,11.12 2.24,11.3 2.11,11.54C2,11.78 1.97,12.06 2.05,12.31M20,21C18.61,21 17.22,20.53 16,19.67C13.56,21.38 10.44,21.38 8,19.67C6.78,20.53 5.39,21 4,21H2V23H4C5.37,23 6.74,22.65 8,22C10.5,23.3 13.5,23.3 16,22C17.26,22.65 18.62,23 20,23H22V21H20Z" />

    <Color x:Key="BackgroundColor1" A="255" R="0" G="133" B="209"/>
    <Color x:Key="BackgroundColor2" A="255" R="0" G="61" B="94"/>

    <Color x:Key="MouseOverBackgroundColor1" A="255" R="0" G="156" B="231"/>
    <Color x:Key="MouseOverBackgroundColor2" A="255" R="0" G="90" B="155"/>

    <Color x:Key="MousePressedBackgroundColor1" A="255" R="0" G="98" B="195"/>
    <Color x:Key="MousePressedBackgroundColor2" A="255" R="0" G="36" B="72"/>

    <Color x:Key="IsNotEnabledBackgroundColor1" A="255" R="233" G="233" B="233"/>
    <Color x:Key="IsNotEnabledBackgroundColor2" A="255" R="240" G="240" B="240"/>

    <SolidColorBrush x:Key="ThBorderBrush" Color="#ECECEC"></SolidColorBrush>

    <Style TargetType="{x:Type local:ThButton}">
        <Setter Property="BorderBrush" Value="{StaticResource ThBorderBrush}"/>
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:ThButton}">
                    <Border x:Name="t"
                            Margin="{TemplateBinding Margin}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="6">

                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <LinearGradientBrush.GradientStops>
                                    <GradientStop x:Name="BackgroundGradientStop1" Offset="0" Color="{StaticResource BackgroundColor1}"/>
                                    <GradientStop x:Name="BackgroundGradientStop2" Offset="1" Color="{StaticResource BackgroundColor2}"/>
                                </LinearGradientBrush.GradientStops>
                            </LinearGradientBrush>
                        </Border.Background>

                        <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
                            <Rectangle Width="20" Height="20" Fill="black" Margin="0,0,0,5">
                                <Rectangle.OpacityMask>
                                    <VisualBrush Stretch="Fill" Visual="{TemplateBinding Icon}"/>
                                </Rectangle.OpacityMask>
                            </Rectangle>
                            <Label Content="{TemplateBinding ThLabel}"/>
                        </StackPanel>

                    </Border>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

И, наконец, mainWindow.xaml:

<local:ThButton Width="100" Icon="{StaticResource BoatIcon}" ThLabel="Test"/>

, если я поставлю «{StaticResource BoatIcon}» вместо «{TemplateBinding Icon}» в Visual (generi c .xaml) значок Похоже, проблема в том, как я пытался использовать DependencyProperty.

Answer 1

Это можно легко сделать с помощью пользовательского UserControl.

Сначала добавьте ваше изображение к ресурсам вашего проекта и установите «Build Type = Resource» в свойствах. Сделайте это, выбрав вновь добавленное изображение и щелкнув правой кнопкой мыши, а затем установив вышеуказанное свойство.

Далее создайте UserControl. Вот мой XAML

<UserControl x:Class="ListViewDragAndDrop.UCPictureButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:ListViewDragAndDrop"
             mc:Ignorable="d" 
             d:DesignHeight="32" d:DesignWidth="128">
    <Grid>
        <Button Click="Button_Click">
            <StackPanel Orientation="Horizontal">
                <Image Source="/Resources/solution.png"
                       Margin="4, 4, 8, 4"/>
                <TextBlock Text="Button Text"
                           HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </StackPanel>
        </Button>  
    </Grid>
</UserControl>

Убедитесь, что «Источник» изображения правильный. Выше показано, где он находится в моем проекте по умолчанию.

Затем код UserControl:

public partial class UCPictureButton : UserControl
{
    public event RoutedEventHandler RoutedButtonClick;

    public UCPictureButton()
    {
        InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        RoutedButtonClick?.Invoke(this, e);
    }
}

В событии нажатия кнопки мы вызываем RoutedEvent, который мы объявлено там.

Теперь в вашем окне Main или там, где вы хотите использовать кнопку:

<local:UCPictureButton Grid.Column="2" Width="120" Height="32">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="RoutedButtonClick">
            <i:InvokeCommandAction Command="{Binding CmdButtonClick}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</local:UCPictureButton>

Пространство имен i является пространством имен interactivity:

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

Теперь все, что вам нужно сделать, это просто набрать в ViewModel метод к объявленной выше команде CmdButtonClick.

Я использую инструментарий MVVM Light, и похоже, это:

public RelayCommand CmdButtonClick { get; private set; }

public MainViewModel(IDataService dataService)
{
    CmdButtonClick = new RelayCommand(ButtonClick);
}

private void ButtonClick()
{
    // Button action
}

Результат: