WPF Custom Controller Button

Question

I am making a button, but I do not know how to make it anime a click action.

here is my code:

I wanted it to look and work like the once on Audacity but I could not get it:

Can anyone help me?

Accepted Answer

Create one Button like this:

class ActionButton : FrameworkElement  
{  
    Border border;  
    string icon;  
    public string Icon {  
        get { return icon; }  
        set { icon = value; ((Path)border.Child).Data = Geometry.Parse(value); }  
    }  
    public Action Command { get; set; }  
    protected SolidColorBrush brush;  
    protected ColorAnimation anim;  
    protected Color normalColor, highlightColor, downColor;         
    public ActionButton() {  
        normalColor = Colors.Black;  
        highlightColor = Colors.Coral;  
        downColor = Colors.Red;  
        brush = new SolidColorBrush(normalColor);  
        border = new Border() {  
            Background = Brushes.Transparent,  
            Child = new Path() {  
                Fill = brush,  
                Stretch = Stretch.Uniform  
            }  
        };  
        anim = new ColorAnimation() {  
            Duration = TimeSpan.FromSeconds(0.5),  
            EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseInOut }  
        };  
        FocusVisualStyle = null;  
        AddVisualChild(border);  
    }  
    protected void animateBrush(Color color) {  
        anim.To = color;  
        brush.BeginAnimation(SolidColorBrush.ColorProperty, anim);  
    }  
    protected override Size MeasureOverride(Size availableSize) {  
        border.Measure(new Size(Width, Height));  
        border.Arrange(new Rect(border.DesiredSize));  
        return border.DesiredSize;  
    }  
    protected override Size ArrangeOverride(Size finalSize) => new Size(Width, Height);  
    protected override void OnMouseEnter(MouseEventArgs e) => animateBrush(highlightColor);  
    protected override void OnMouseLeave(MouseEventArgs e) => animateBrush(normalColor);  
    protected override void OnMouseLeftButtonUp(MouseButtonEventArgs e) => Command.Invoke();  
    protected override void OnMouseDown(MouseButtonEventArgs e) => animateBrush(downColor);  
    protected override Visual GetVisualChild(int index) => border;  
    protected override int VisualChildrenCount => 1;  
}

and put that in Grid/StackPanel, etc. as many times as you want like this:

With some of your Path Data, it looks like this:

To set Color or other properties in xaml, expose those as Full Property if you don't have to bind or as DependencyProperty if you want to bind .

With this approach, you have full control over your Controls and can extend these Controls to add more functionality, for example, I've another button, CommandButton, which is an ActionButton with custom enabled/disabled style and Keyboard functionality:

class CommandButton : ActionButton  
{  
    Color disabledColor;  
    public CommandButton() : base() {  
        Focusable = true;  
        normalColor = Colors.CornflowerBlue;  
        brush.Color = normalColor;  
        disabledColor = Colors.LightGray;  
        IsEnabledChanged += (s,e) => animateBrush(IsEnabled ? normalColor : disabledColor);  
    }  
    protected override void OnGotKeyboardFocus(KeyboardFocusChangedEventArgs e) => animateBrush(highlightColor);  
    protected override void OnPreviewLostKeyboardFocus(KeyboardFocusChangedEventArgs e) => animateBrush(normalColor);  
    protected override void OnMouseLeave(MouseEventArgs e) { if (IsEnabled) base.OnMouseLeave(e); }  
    protected override void OnKeyUp(KeyEventArgs e) {  
        if (e.Key != Key.Space) return;  
        Command.Invoke();  
    }  
    protected override void OnKeyDown(KeyEventArgs e) {  
        if (e.Key != Key.Space) return;  
        animateBrush(downColor);  
    }  
}

and have one more button, MultiCommandButton, which is a CommandButton that executes two tasks sequentially:

class MultiCommandButton : CommandButton  
{  
    public Action BeforeCommand { get; set; }  
    public MultiCommandButton() : base() { }  

    protected override void OnKeyUp(KeyEventArgs e) {  
        if (e.Key != Key.Space) return;  
        BeforeCommand.Invoke();  
        Command.Invoke();  
    }  
    protected override void OnMouseLeftButtonUp(MouseButtonEventArgs e) {  
        BeforeCommand.Invoke();  
        Command.Invoke();  
    }  
}

WPF Custom Controller Button

0 additional answers