Как я делал user-control на WPF (VS2019, c#)

Всех приветствую, решил выложить свой первый пост на Хабре, не судите строго - вдруг кому-нибудь да пригодится =)

Исходная ситуация: в рамках проекта по разработке декстопного приложения под винду заказчиком было выражено фи по поводу деталей интерфейса, в частности кнопок. Возникла необходимость сделать свой контрол а-ля навигационные кнопки в браузерах.

Задача: сделать контрол кнопки (WPF): круглая, с возможностью использования в качестве иконки объекта Path, с возможностью использовать свойство IsChecked, и сменой цветовых схем при наведении/нажатии.

В итоге кнопка будет иметь следующий внешний вид (иконки само-собой произвольные):

Переходим к реализации. Назовем наш контрол VectorRoundButton, наследуя его от UserControl. XAML разметка нашего контрола предельно проста: масштабируемый Grid; объект Ellipse, символизирующий столь желанную круглую кнопку и объект Path с выбранной иконкой.

<UserControl x:Class="UserControls.VectorRoundButton"
             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:UserControls"
              mc:Ignorable="d" 
             d:DesignHeight="50" d:DesignWidth="50" Loaded="UserControl_Loaded" MouseEnter="UserControl_MouseEnter" MouseLeave="UserControl_MouseLeave" MouseLeftButtonDown="UserControl_MouseLeftButtonDown" MouseLeftButtonUp="UserControl_MouseLeftButtonUp">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="20*"/>
            <RowDefinition Height="60*"/>
            <RowDefinition Height="20*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20*"/>
            <ColumnDefinition Width="60*"/>
            <ColumnDefinition Width="20*"/>
        </Grid.ColumnDefinitions>
        
      <Ellipse x:Name="ButtonEllipse" Grid.ColumnSpan="3" Grid.RowSpan="3"/>

      <Path x:Name="ButtonImage" Stretch="Uniform" Grid.Row="1" Grid.Column="1" />

    </Grid>
</UserControl>

Для контроля внешнего вида и состояния кнопки будем использовать следующие свойства:

IsCheckable - возможность отображения в режиме чек-бокса
IsChecked - в речиме чек-бокса - включено/выключено (кнопка обводится кружком)
ActiveButtonColor - цвет активной кнопки (при наведенном курсоре)
InactiveButtonColor - цвет кнопки в нормальном состоянии
ButtonIcon - иконка кнопки

 public partial class VectorRoundButton : UserControl
    {
        public bool IsCheckable
        {
            get { return (bool)GetValue(IsCheckableProperty); }
            set { SetValue(IsCheckableProperty, value); }
        }

        public bool IsChecked
        {
            get { return (bool)GetValue(IsCheckedProperty); }
            set { SetValue(IsCheckedProperty, value); }
        }

        public Brush ActiveButtonColor
        {
            get { return (Brush)GetValue(ActiveButtonColorProperty); }
            set { SetValue(ActiveButtonColorProperty, value); }
        }

        public Brush InactiveButtonColor
        {
            get { return (Brush)GetValue(InactiveButtonColorProperty); }
            set { SetValue(InactiveButtonColorProperty, value); }
        }

        public Path ButtonIcon
        {
            get { return (Path)GetValue(ButtonIconProperty); }
            set { SetValue(ButtonIconProperty, value); }
        }
     }

Для корректной работы контрола в процессе визуальной верстки нашего приложения необходимо реализовать привязку данных через соответствующие DependencyProperty:

public static readonly DependencyProperty IsCheckableProperty = DependencyProperty.Register(
  "IsCheckable",
  typeof(bool),
  typeof(VectorRoundButton),
  new FrameworkPropertyMetadata(false, FrameworkPropertyMetadataOptions.AffectsRender, IsCheckablePropertChanged));

public static readonly DependencyProperty IsCheckedProperty = DependencyProperty.Register(
  "IsChecked",
  typeof(bool),
  typeof(VectorRoundButton),
  new FrameworkPropertyMetadata(false, FrameworkPropertyMetadataOptions.AffectsRender, IsCkeckedPropertChanged));

public static readonly DependencyProperty InactiveButtonColorProperty = DependencyProperty.Register(
  "InactiveButtonColor",
  typeof(Brush),
  typeof(VectorRoundButton),
  new FrameworkPropertyMetadata(System.Windows.SystemColors.ControlBrush, FrameworkPropertyMetadataOptions.AffectsRender, InactiveButtonColorPropertyChanged));

public static readonly DependencyProperty ActiveButtonColorProperty = DependencyProperty.Register(
  "ActiveButtonColor",
  typeof(Brush),
  typeof(VectorRoundButton),
  new FrameworkPropertyMetadata(System.Windows.SystemColors.ControlDarkBrush, FrameworkPropertyMetadataOptions.AffectsRender, ActiveButtonColorPropertyChanged));

public static readonly DependencyProperty ButtonIconProperty = DependencyProperty.Register(
  "ButtonIcon",
  typeof(Path),
  typeof(VectorRoundButton),
  new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsRender, ButtonIconPropertyChanged));

В описанных присоединенных свойствах указаны обработчики событий на их изменение, связанные с выбором иконки, цвета, нажатием на кнопку и т.д. Ниже приводятся методы, реализующие данные обработчики.

Обработчик изменения иконки нашей кнопки:

private static void ButtonIconPropertyChanged(DependencyObject source, DependencyPropertyChangedEventArgs e)
{
  if (source is VectorRoundButton)
  {
    VectorRoundButton control = source as VectorRoundButton;
    control.ButtonIcon.Data = (e.NewValue as Path)?.Data;
    control.ButtonIcon.Fill = (e.NewValue as Path)?.Fill;
    control.ButtonImage.Data = control.ButtonIcon.Data;
    control.ButtonImage.Fill = control.ButtonIcon.Fill;
  }
}

Обработчики изменения цветов кнопки:

private static void ActiveButtonColorPropertyChanged(DependencyObject source, DependencyPropertyChangedEventArgs e)
{
  if (source is VectorRoundButton)
  {
    VectorRoundButton control = source as VectorRoundButton;
    control.ActiveButtonColor = (Brush)e.NewValue;
  }
}

private static void InactiveButtonColorPropertyChanged(DependencyObject source, DependencyPropertyChangedEventArgs e)
{
  if (source is VectorRoundButton)
  {
    VectorRoundButton control = source as VectorRoundButton;
    control.InactiveButtonColor = (Brush)e.NewValue;
    control.ButtonEllipse.Fill = (Brush)e.NewValue;
  }
}

Обработчики изменения состояния включено/выключено для кнопки в режиме чек-бокс, а также включения/выключения данного режима:

private static void IsCkeckedPropertChanged(DependencyObject source, DependencyPropertyChangedEventArgs e)
{
  if (source is VectorRoundButton)
  {
    VectorRoundButton control = source as VectorRoundButton;
    if (control.IsCheckable)
    {
      control.IsChecked = (bool)e.NewValue;
      if (control.IsChecked)
      {
        control.ButtonEllipse.Stroke = System.Windows.SystemColors.ControlDarkBrush;
        control.ButtonEllipse.StrokeThickness = 2;
      }
      else
      {
        control.ButtonEllipse.Stroke = null;
        control.ButtonEllipse.StrokeThickness = 1;
      }
    }
  }
}

private static void IsCheckablePropertChanged(DependencyObject source, DependencyPropertyChangedEventArgs e)
{
  if (source is VectorRoundButton)
  {
    VectorRoundButton control = source as VectorRoundButton;
    control.IsCheckable = (bool)e.NewValue;
  }
}

Осталось совсем немного - реализовать реакцию кнопки на перемещение мышки через данный контрол, а также событие нажатия левой кнопки мыши:

private void UserControl_MouseEnter(object sender, MouseEventArgs e)
{
  ButtonEllipse.Fill = ActiveButtonColor;
}

private void UserControl_MouseLeave(object sender, MouseEventArgs e)
{
  ButtonEllipse.Fill = InactiveButtonColor;
  if (!IsChecked)
    ButtonEllipse.Stroke = null;
}

private void UserControl_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
  ButtonEllipse.Stroke = System.Windows.SystemColors.ActiveCaptionBrush;
}

private void UserControl_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
  ButtonEllipse.Fill = ActiveButtonColor;
  ButtonEllipse.Stroke = null;
  if (IsCheckable)
  {
    IsChecked = !IsChecked;
  }
}

В итоге, имеем следующий код пользовательского контрола:

public partial class VectorRoundButton : UserControl
    {
        public bool IsCheckable
        {
            get { return (bool)GetValue(IsCheckableProperty); }
            set { SetValue(IsCheckableProperty, value); }
        }

        public bool IsChecked
        {
            get { return (bool)GetValue(IsCheckedProperty); }
            set { SetValue(IsCheckedProperty, value); }
        }

        public Brush ActiveButtonColor
        {
            get { return (Brush)GetValue(ActiveButtonColorProperty); }
            set { SetValue(ActiveButtonColorProperty, value); }
        }

        public Brush InactiveButtonColor
        {
            get { return (Brush)GetValue(InactiveButtonColorProperty); }
            set { SetValue(InactiveButtonColorProperty, value); }
        }

        public Path ButtonIcon
        {
            get { return (Path)GetValue(ButtonIconProperty); }
            set { SetValue(ButtonIconProperty, value); }
        }

        public static readonly DependencyProperty IsCheckableProperty = DependencyProperty.Register(
            "IsCheckable",
            typeof(bool),
            typeof(VectorRoundButton),
            new FrameworkPropertyMetadata(false, FrameworkPropertyMetadataOptions.AffectsRender, IsCheckablePropertChanged));

        public static readonly DependencyProperty IsCheckedProperty = DependencyProperty.Register(
          "IsChecked",
          typeof(bool),
          typeof(VectorRoundButton),
          new FrameworkPropertyMetadata(false, FrameworkPropertyMetadataOptions.AffectsRender, IsCkeckedPropertChanged));

        public static readonly DependencyProperty InactiveButtonColorProperty = DependencyProperty.Register(
          "InactiveButtonColor",
          typeof(Brush),
          typeof(VectorRoundButton),
          new FrameworkPropertyMetadata(System.Windows.SystemColors.ControlBrush, FrameworkPropertyMetadataOptions.AffectsRender, InactiveButtonColorPropertyChanged));

        public static readonly DependencyProperty ActiveButtonColorProperty = DependencyProperty.Register(
         "ActiveButtonColor",
         typeof(Brush),
         typeof(VectorRoundButton),
         new FrameworkPropertyMetadata(System.Windows.SystemColors.ControlDarkBrush, FrameworkPropertyMetadataOptions.AffectsRender, ActiveButtonColorPropertyChanged));

        public static readonly DependencyProperty ButtonIconProperty = DependencyProperty.Register(
            "ButtonIcon",
            typeof(Path),
            typeof(VectorRoundButton),
            new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsRender, ButtonIconPropertyChanged));


        private static void ButtonIconPropertyChanged(DependencyObject source, DependencyPropertyChangedEventArgs e)
        {
            if (source is VectorRoundButton)
            {
                VectorRoundButton control = source as VectorRoundButton;
                control.ButtonIcon.Data = (e.NewValue as Path)?.Data;
                control.ButtonIcon.Fill = (e.NewValue as Path)?.Fill;
                control.ButtonImage.Data = control.ButtonIcon.Data;
                control.ButtonImage.Fill = control.ButtonIcon.Fill;
            }
        }

        private static void ActiveButtonColorPropertyChanged(DependencyObject source, DependencyPropertyChangedEventArgs e)
        {
            if (source is VectorRoundButton)
            {
                VectorRoundButton control = source as VectorRoundButton;
                control.ActiveButtonColor = (Brush)e.NewValue;
            }
        }

        private static void InactiveButtonColorPropertyChanged(DependencyObject source, DependencyPropertyChangedEventArgs e)
        {
            if (source is VectorRoundButton)
            {
                VectorRoundButton control = source as VectorRoundButton;
                control.InactiveButtonColor = (Brush)e.NewValue;
                control.ButtonEllipse.Fill = (Brush)e.NewValue;
            }
        }

        private static void IsCkeckedPropertChanged(DependencyObject source, DependencyPropertyChangedEventArgs e)
        {
            if (source is VectorRoundButton)
            {
                VectorRoundButton control = source as VectorRoundButton;
                if (control.IsCheckable)
                {
                    control.IsChecked = (bool)e.NewValue;
                    
                    if (control.IsChecked)
                    {
                        control.ButtonEllipse.Stroke = System.Windows.SystemColors.ControlDarkBrush;
                        control.ButtonEllipse.StrokeThickness = 2;
                    }
                    else
                    {
                        control.ButtonEllipse.Stroke = null;
                        control.ButtonEllipse.StrokeThickness = 1;
                    }
                }
            }
        }

        private static void IsCheckablePropertChanged(DependencyObject source, DependencyPropertyChangedEventArgs e)
        {
            if (source is VectorRoundButton)
            {
                VectorRoundButton control = source as VectorRoundButton;
                control.IsCheckable = (bool)e.NewValue;
            }
        }

        public VectorRoundButton()
        {
            InitializeComponent();
        }

        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            ButtonImage.Fill = ButtonIcon?.Fill;
            ButtonImage.Data = ButtonIcon?.Data;
            ButtonEllipse.Fill = InactiveButtonColor;
        }

        private void UserControl_MouseEnter(object sender, MouseEventArgs e)
        {
            ButtonEllipse.Fill = ActiveButtonColor;
        }

        private void UserControl_MouseLeave(object sender, MouseEventArgs e)
        {
            ButtonEllipse.Fill = InactiveButtonColor;
            if (!IsChecked)
                ButtonEllipse.Stroke = null;
        }

        private void UserControl_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            ButtonEllipse.Stroke = System.Windows.SystemColors.ActiveCaptionBrush;
        }

        private void UserControl_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            ButtonEllipse.Fill = ActiveButtonColor;
            ButtonEllipse.Stroke = null;
            if (IsCheckable)
            {
                IsChecked = !IsChecked;
            }
        }
    }

Во собственно и все =) Понимаю, что все написанное до банального просто и вряд ли представляет интерес для серьезных разработчиков, тем более что реализация довольно кривая, но в рамках каких-либо учебных проектов может кому и сгодится.

Камнями не кидайтесь, за сим хочу раскланяться =)