UWP What is the best way to change button Style depending of a ButtonType property in a class button extension?

Question

I'm trying to extend button class with a ButtonType like this:

public class MyButton : Button 
{
     public MyButton()
     {
     }
     public string ButtonType
     {
         get { return (string)GetValue(ButtonTypeProperty); }
         set
         {SetValue(ButtonTypeProperty, value);}
     }
     // Using a DependencyProperty as the backing store for ButtonType.  This enables animation, styling, binding, etc...
     public static readonly DependencyProperty ButtonTypeProperty =
         DependencyProperty.Register("ButtonType", typeof(string), typeof(MyButton), new PropertyMetadata(0));
}

My button template:

For example, I want BtnGridTopRow.Height = 2*; and Button.Width=150; for a certain type and BtnGridTopRow.Height = 0; and Button.Width=100; for another type. The goal is to have the same CommonStates to every button but to have various button style but inheriting of a main style for BorderBrush , background etc...

I looking for the best way to do that because i'm quite new in XAML and UWP but i have 15 years experience in web (PHP,JS,CSS,etc.).

Hopes it's clear enough,

Thanks in advance,

Nico Zhu · Accepted Answer

UWP What is the best way to change button Style depending of a ButtonType property in a class button extension?

The better way is make VisualState to control different button type style. and goto the different VisualState when ButtonType property change.

For Example

public enum XButtonType
 {
     TopState,
     HiddenTopState
 }
 public sealed class MyButton : Button
 {
     public MyButton()
     {
         this.DefaultStyleKey = typeof(MyButton);

     }
     public XButtonType ButtonType
     {
         get { return (XButtonType)GetValue(ButtonTypeProperty); }
         set { SetValue(ButtonTypeProperty, value); }
     }

     // Using a DependencyProperty as the backing store for ButtonType.  This enables animation, styling, binding, etc...
     public static readonly DependencyProperty ButtonTypeProperty =
         DependencyProperty.Register("ButtonType", typeof(XButtonType), typeof(MyButton), new PropertyMetadata(0, new PropertyChangedCallback(OnButtonTypeChange)));

     private static void OnButtonTypeChange(DependencyObject d, DependencyPropertyChangedEventArgs e)
     {
         var control = d as MyButton;
         switch ((XButtonType)e.NewValue)
         {
             case XButtonType.TopState:
                 VisualStateManager.GoToState(control, "TopState", true);
                 break;
             case XButtonType.HiddenTopState:
                 VisualStateManager.GoToState(control, "HiddenTopState", true);
                 break;
             default:
                 break;
         }
     }
 }

Xaml Code

Usage

UWP What is the best way to change button Style depending of a ButtonType property in a class button extension?

Answers (1)

Related Questions