Custom control - ButtonAdv with a SfBadge + override some default properties

[Tomasz Jagusz]

I'd like to mention that I come from WinForms world, this is my first large WPF project.

I want to create a custom button based on ButtonAdv.

I need to add DependencyProperty and override some default values.

Idea is to have a button that will display a badge with the button's key property value.

So if I set the Key property to "F1" the badge will display "F1".

I've got the badge working, but I can't override the default values of the control. For example, I'd like to set the default margin and padding.

The code below is based on https://www.syncfusion.com/feedback/21778/add-shortcut-property-that-will-allow-calling-command-by-pressing-specific-key-hot

Below is my current version:

using System.Windows;

using System.Windows.Input;

using Syncfusion.Windows.Controls.Notification;

using Syncfusion.Windows.Tools.Controls;

namespace Test.Desktop.Wpf.Controls

{

    public class BetterButton:ButtonAdv

    {

        public static readonly DependencyProperty KeyProperty = DependencyProperty.Register(nameof(Key), typeof(Key), typeof(BetterButton), new UIPropertyMetadata(Key.None, OnKeyPropertyChanged));

        private static void OnKeyPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)

        {

            if(!(d is BetterButton dd)) return;

            dd.Badge.Content = dd.Key.ToString();

        }

        public BetterButton()

        {

            VerticalAlignment = VerticalAlignment.Center;

            HorizontalAlignment = HorizontalAlignment.Center;

            Margin = new Thickness(10, 0,10,0);

            Padding = new Thickness(10);

            SmallIcon = null;

            LargeIcon = null;

            Badge = new SfBadge

            {

                Content = Key.ToString(),

                HorizontalAnchor = BadgeAnchor.Inside,

                HorizontalAlignment = HorizontalAlignment.Left,

                HorizontalPosition = 0.05,

                VerticalAnchor = BadgeAnchor.Outside,

                Shape = BadgeShape.None,

                FontSize = 10

            };

            SfBadge.SetBadge(this, Badge);

        }

        public Key Key

        {

            get => (Key)this.GetValue(KeyProperty);

            set => this.SetValue(KeyProperty, value);

        }

        public SfBadge Badge { get; }

    }

}

As mentioned I'm new to WPF, so any code suggestions like optimizations and best practices are more than welcome.

Regards,

Tomasz

[Vijayalakshmi Roopkumar]

Hi Tomasz, 

 

Thank you for contacting Syncfusion Support. 

 

We have checked your query and understood that you want to set the default values for your custom button derived from ButtonAdv using your codes, and we observe the default values given for your custom button are reflected properly in UI. 

 

Please find sample, screenshot for the same below: 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ButtonAdv_override1189311180 

 

For example, you have been set the Horizontal and vertical alignment as center and the margin as 10 and these values are applied properly in UI, and it is shown as same below: 

 

Screenshot: 

 

 

 

On observing your code, you want to set the margin and padding . But  the given padding value is higher value to align the control, since it trims and shrink down the text for the respective control.  So in order to align properly for the ButtonAdv control, we recommend you to set the margin value and this is enough to align the layout of the control.  

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Vijayalakshmi VR