c# - 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:

                <ControlTemplate TargetType="controls:RMButton">
                    <Grid x:Name="BtnInnerGrid" RenderTransformOrigin="0.5,0.5" BorderBrush="{ThemeResource RMWhiteSmoke}" BorderThickness="2" Background="{ThemeResource RMTranslucentBlackBrush}" CornerRadius="20" Padding="0">
                        <Grid.RenderTransform>
                            <CompositeTransform ScaleX="1" ScaleY="1" />
                        </Grid.RenderTransform>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="00:00:00.200000">
                                        <VisualTransition.GeneratedEasingFunction>
                                            <CubicEase EasingMode="EaseOut" />
                                        </VisualTransition.GeneratedEasingFunction>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="BtnInnerGrid" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="PointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="BtnInnerGrid.(UIElement.Opacity)" Value="0.7" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <VisualState.Setters>
                                        <Setter Target="BtnInnerGrid.(UIElement.Opacity)" Value="0.7" />
                                        <Setter Target="BtnInnerGrid.(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Value="0.9" />
                                        <Setter Target="BtnInnerGrid.(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Value="0.9" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <VisualState.Setters>
                                        <Setter Target="BtnInnerGrid.(UIElement.Opacity)" Value="0.3" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid.RowDefinitions>
                            <RowDefinition x:Name="BtnGridTopRow" />
                            <RowDefinition x:Name="BtnGridBottomRow" />
                        </Grid.RowDefinitions>
                        <RelativePanel x:Name="TopRowRelativePanel" Grid.Column="0" Grid.Row="0">
                            <Viewbox x:Name="FontIconViewBox" Visibility="Collapsed">
                                <FontIcon x:Name="BtnFontIcon" FontFamily="Segoe MDL2 Assets" Glyph="&#xE700;" />
                            </Viewbox>
                            <Viewbox x:Name="ImageViewBox" Visibility="Visible">
                                <Image x:Name="BtnImage" Source="" />
                            </Viewbox>
                        </RelativePanel>
                        <RelativePanel x:Name="BottomRowRelativePanel" Grid.Column="0" Grid.Row="1">
                            <TextBlock x:Name="BtnTextBlock"  Text="Test fdgfxgsg sdg dsgdf sgdf" />
                        </RelativePanel>
                    </Grid>
                </ControlTemplate>

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,

Answer 1

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

<Style TargetType="local:MyButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:MyButton">
                <Grid
                    x:Name="BtnInnerGrid"
                    Padding="0"
                    BorderThickness="2"
                    CornerRadius="20"
                    RenderTransformOrigin="0.5,0.5">
                    <Grid.RenderTransform>
                        <CompositeTransform ScaleX="1" ScaleY="1" />
                    </Grid.RenderTransform>
                    <Grid.RowDefinitions>
                        <RowDefinition x:Name="BtnGridTopRow" />
                        <RowDefinition x:Name="BtnGridBottomRow" />
                    </Grid.RowDefinitions>
                    <RelativePanel
                        x:Name="TopRowRelativePanel"
                        Grid.Row="0"
                        Grid.Column="0">
                        <Viewbox x:Name="FontIconViewBox" Visibility="Collapsed">
                            <FontIcon
                                x:Name="BtnFontIcon"
                                FontFamily="Segoe MDL2 Assets"
                                Glyph="&#xE700;" />
                        </Viewbox>
                        <Viewbox x:Name="ImageViewBox" Visibility="Visible">
                            <Image x:Name="BtnImage" Source="" />
                        </Viewbox>
                    </RelativePanel>
                    <RelativePanel
                        x:Name="BottomRowRelativePanel"
                        Grid.Row="1"
                        Grid.Column="0">
                        <TextBlock x:Name="BtnTextBlock" Text="Test this is button content!" />
                    </RelativePanel>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="00:00:00.200000">
                                    <VisualTransition.GeneratedEasingFunction>
                                        <CubicEase EasingMode="EaseOut" />
                                    </VisualTransition.GeneratedEasingFunction>
                                </VisualTransition>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="BtnInnerGrid" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <VisualState.Setters>
                                    <Setter Target="BtnInnerGrid.(UIElement.Opacity)" Value="0.7" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <VisualState.Setters>
                                    <Setter Target="BtnInnerGrid.(UIElement.Opacity)" Value="0.7" />
                                    <Setter Target="BtnInnerGrid.(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Value="0.9" />
                                    <Setter Target="BtnInnerGrid.(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Value="0.9" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <VisualState.Setters>
                                    <Setter Target="BtnInnerGrid.(UIElement.Opacity)" Value="0.3" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ButtonTypeGroup">
                            <VisualState x:Name="TopState">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BtnGridTopRow" Storyboard.TargetProperty="Height">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="2*" />
                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BtnInnerGrid" Storyboard.TargetProperty="Width">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="150" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                                <!--<VisualState.Setters>
                                    <Setter Property="Width" Value="100"/>
                                </VisualState.Setters>-->
                            </VisualState>
                            <VisualState x:Name="HiddenTopState">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BtnGridTopRow" Storyboard.TargetProperty="Height">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BtnInnerGrid" Storyboard.TargetProperty="Width">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="100" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Usage

<Grid>
    <local:MyButton  VerticalAlignment="Center" ButtonType="TopState"/>
</Grid>