Eran Kampf
Eran Kampf
2 min read

XAML Style: Orange Gel Button

I tossed up this XAML button style over the weekend (OrangeGelButton.xaml (6.78 KB)):

OrangeGelButton_Normal.png OrangeGelButton_Hover.png

<resourcedictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <style targettype="Button" x:key="OrangeGel">
    <Setter Property="FrameworkElement.Width" Value="NaN"/>
    <Setter Property="FrameworkElement.MinWidth" Value="0"/>
    <Setter Property="FrameworkElement.Height" Value="NaN"/>
    <Setter Property="FrameworkElement.MinHeight" Value="30"/>
    <Setter Property="Control.Padding" Value="4,4,4,4"/>
    <Setter Property="FrameworkElement.VerticalAlignment" Value="Center"/>
    <Setter Property="TextElement.Foreground">
      <Setter.Value>
        <SolidColorBrush>#FF7C4400</SolidColorBrush>
      </Setter.Value>
    </Setter>
    <Setter Property="TextElement.FontSize" Value="12"/>
    <Setter Property="TextElement.FontWeight" Value="SemiBold"/>
    <Setter Property="Control.Template">
      <Setter.Value>
        <ControlTemplate TargetType="Button">
          <Grid Background="#00FFFFFF">
            <Border BorderBrush="#FF000000" CornerRadius="6,6,6,6" BorderThickness="1,1,0,0" Opacity="0.9">
              <Border.BitmapEffect>
                <BlurBitmapEffect Radius="1" />
              </Border.BitmapEffect>
            </Border>
            <Border BorderBrush="#FFFFFFFF" CornerRadius="6,6,6,6" BorderThickness="0,0,0.6,0.6" Opacity="0.7" />
            <Border Margin="1,1,1,1" CornerRadius="6,6,6,6" Name="background">
              <Border.Background>
                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                  <LinearGradientBrush.GradientStops>
                    <GradientStop Offset="0" Color="#FFFBD19E" />
                    <GradientStop Offset="1" Color="#FFF68F15" />
                  </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
              </Border.Background>
              <Grid Margin="1,1,1,1" ClipToBounds="True">
                <Grid.RowDefinitions>
                  <RowDefinition Height="*" />
                  <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Ellipse Margin="10,3,10,3" Width="{TemplateBinding FrameworkElement.Width}" Fill="#FFFFFFFF" Opacity="0.3" Grid.Row="0" Grid.RowSpan="2">
                  <Ellipse.BitmapEffect>
                    <BlurBitmapEffect />
                  </Ellipse.BitmapEffect>
                </Ellipse>
                <Ellipse Width="{TemplateBinding FrameworkElement.Width}" Fill="#FFFFFFFF" Opacity="0.34" Grid.Row="0" />
              </Grid>
            </Border>
            <Border Margin="1,1,1,1" BorderBrush="#FFFFFFFF" CornerRadius="6,6,6,6" BorderThickness="5,5,0,0" Opacity="0.3">
              <Border.BitmapEffect>
                <BlurBitmapEffect Radius="1" />
              </Border.BitmapEffect>
            </Border>
            <Border Margin="1,1,1,1" BorderBrush="#FF000000" CornerRadius="6,6,6,6" BorderThickness="0,0,0.6,0.6" Opacity="1">
              <Border.BitmapEffect>
                <BlurBitmapEffect Radius="1" />
              </Border.BitmapEffect>
            </Border>
            <ContentPresenter Margin="{TemplateBinding Control.Padding}" HorizontalAlignment="Center" VerticalAlignment="Center" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" Content="{TemplateBinding ContentControl.Content}" />
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="UIElement.IsMouseOver" Value="True">
              <Trigger.ExitActions>
                <BeginStoryboard>
                  <Storyboard>
                    <Storyboard.Children>
                      <ColorAnimation To="#FFFBD19E" FillBehavior="HoldEnd" Duration="00:00:00.4000000" Storyboard.TargetName="background" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops).[0].(GradientStop.Color)" />
                      <ColorAnimation To="#FFF68F15" FillBehavior="HoldEnd" Duration="00:00:00.4000000" Storyboard.TargetName="background" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops).[1].(GradientStop.Color)" />
                    </Storyboard.Children>
                  </Storyboard>
                </BeginStoryboard>
              </Trigger.ExitActions>
              <Trigger.EnterActions>
                <BeginStoryboard>
                  <Storyboard>
                    <Storyboard.Children>
                      <ColorAnimation To="#FFFAF688" FillBehavior="HoldEnd" Duration="00:00:00.2000000" Storyboard.TargetName="background" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops).[0].(GradientStop.Color)" />
                      <ColorAnimation To="#FFF6D415" FillBehavior="HoldEnd" Duration="00:00:00.2000000" Storyboard.TargetName="background" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops).[1].(GradientStop.Color)" />
                    </Storyboard.Children>
                  </Storyboard>
                </BeginStoryboard>
              </Trigger.EnterActions>
            </Trigger>
            <Trigger Property="ButtonBase.IsPressed" Value="True">
              <Trigger.ExitActions>
                <BeginStoryboard>
                  <Storyboard>
                    <Storyboard.Children>
                      <ColorAnimation To="#FFFAF688" FillBehavior="Stop" Duration="00:00:00.4000000" Storyboard.TargetName="background" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops).[0].(GradientStop.Color)" />
                      <ColorAnimation To="#FFF6D415" FillBehavior="Stop" Duration="00:00:00.4000000" Storyboard.TargetName="background" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops).[1].(GradientStop.Color)" />
                    </Storyboard.Children>
                  </Storyboard>
                </BeginStoryboard>
              </Trigger.ExitActions>
              <Trigger.EnterActions>
                <BeginStoryboard>
                  <Storyboard>
                    <Storyboard.Children>
                      <ColorAnimation To="#FFFAA182" FillBehavior="HoldEnd" Duration="00:00:00.2000000" Storyboard.TargetName="background" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops).[0].(GradientStop.Color)" />
                      <ColorAnimation To="#FFFD6420" FillBehavior="HoldEnd" Duration="00:00:00.2000000" Storyboard.TargetName="background" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops).[1].(GradientStop.Color)" />
                    </Storyboard.Children>
                  </Storyboard>
                </BeginStoryboard>
              </Trigger.EnterActions>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </style>
</resourcedictionary>