Skip to content

Instantly share code, notes, and snippets.

@markheath

markheath/MainWindow.xaml

Created April 18, 2015 15:30
Show Gist options
  • Save markheath/c9d78c72876e06313bed to your computer and use it in GitHub Desktop.
Save markheath/c9d78c72876e06313bed to your computer and use it in GitHub Desktop.
Download ZIP
WPF Button Styles
Raw
MainWindow.xaml
<Window x:Class="WpfButtonStyles.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WPF Example Button Styles" Height="350" Width="525">
<Window.Resources>
<Style
TargetType="Button" x:Key="NewGameButtonStyle">
<Setter Property="FontFamily" Value="Resources/teen bd.ttf#Teen" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Border BorderThickness="2"
CornerRadius="4"
Padding="3"
x:Name="ButtonBorder"
Background="AliceBlue"
>
<Border.BorderBrush>
<SolidColorBrush x:Name="ButtonBorderBrush" Color="Black"/>
</Border.BorderBrush>
<ContentPresenter VerticalAlignment="Center"
Margin="4,2" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ButtonBorder" Property="Background" Value="#C0C0C0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MyFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Control}">
<Grid Margin="3 2">
<Rectangle Name="r1" StrokeThickness="1" Stroke="Black" StrokeDashArray="2 2"/>
<Border Name="border" Width="{TemplateBinding ActualWidth}" Height="{TemplateBinding ActualHeight}" CornerRadius="2" BorderThickness="1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ShadowStyle">
<Setter Property="Control.Foreground" Value="LightGray" />
</Style>
<Style x:Key="OrangeButton" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="FontFamily" Value="Verdana"/>
<Setter Property="FontSize" Value="11px"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisual}" />
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="#FFFFD190" Offset="0.2"/>
<GradientStop Color="Orange" Offset="0.85"/>
<GradientStop Color="#FFFFD190" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="1"
Padding="4,2"
BorderBrush="DarkGray"
CornerRadius="3"
Background="{TemplateBinding Background}">
<Grid >
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" Name="contentShadow"
Style="{StaticResource ShadowStyle}">
<ContentPresenter.RenderTransform>
<TranslateTransform X="1.0" Y="1.0" />
</ContentPresenter.RenderTransform>
</ContentPresenter>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" Name="content"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="#FF4788c8" />
<Setter Property="Foreground" Value="#FF4788c8" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="#FFFFD190" Offset="0.35"/>
<GradientStop Color="Orange" Offset="0.95"/>
<GradientStop Color="#FFFFD190" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="content" Property="RenderTransform" >
<Setter.Value>
<TranslateTransform Y="1.0" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsDefaulted" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="#FF282828" />
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="#FF282828" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="border" Property="Opacity" Value="0.7" />
<Setter Property="Foreground" Value="Gray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MyFocusVisual2">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Control}">
<Grid Margin="8">
<Ellipse
Name="r1"
Stroke="Black"
StrokeDashArray="2 2"
StrokeThickness="1"/>
<Border
Name="border"
Width="{TemplateBinding ActualWidth}"
Height="{TemplateBinding ActualHeight}"
BorderThickness="1"
CornerRadius="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CircleButton" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisual2}"/>
<Setter Property="Background" Value="#FF6DB4EF"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Fill="{TemplateBinding Background}"/>
<Ellipse>
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Offset="0" Color="#00000000"/>
<GradientStop Offset="0.88" Color="#00000000"/>
<GradientStop Offset="1" Color="#80000000"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Margin="10" x:Name="highlightCircle" >
<Ellipse.Fill >
<LinearGradientBrush >
<GradientStop Offset="0" Color="#50FFFFFF"/>
<GradientStop Offset="0.5" Color="#00FFFFFF"/>
<GradientStop Offset="1" Color="#50FFFFFF"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="highlightCircle" Property="Fill">
<Setter.Value>
<LinearGradientBrush StartPoint="0.3,0" EndPoint="0.7,1">
<GradientStop Offset="0" Color="#50FFFFFF"/>
<GradientStop Offset="0.5" Color="#00FFFFFF"/>
<GradientStop Offset="1" Color="#50FFFFFF"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="content" Property="RenderTransform">
<Setter.Value>
<TranslateTransform Y="0.5" X="0.5"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<LinearGradientBrush x:Key="GreenGradientBrush" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#006700"/>
<GradientStop Offset="1" Color="#00ef00"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="RedGradientBrush" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#774040"/>
<GradientStop Offset="1" Color="#ef4040"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="BlueGradientBrush" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#404077"/>
<GradientStop Offset="1" Color="#4040ef"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="CyanGradientBrush" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#007777"/>
<GradientStop Offset="1" Color="#00efef"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="YellowGradientBrush" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#777740"/>
<GradientStop Offset="1" Color="Yellow"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="MagentaGradientBrush" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#770077"/>
<GradientStop Offset="1" Color="#ef00ef"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="OrangeGradientBrush" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="DarkOrange"/>
<GradientStop Offset="1" Color="Orange"/>
</LinearGradientBrush>
<Style TargetType="Button" x:Key="GelButton">
<Setter Property="Background" Value="{StaticResource GreenGradientBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootElement">
<!-- drop shadow - needs to be blurred for correct effect -->
<Rectangle Fill="#40000000" Margin="1,1,0,0" RadiusX="6" RadiusY="6">
<Rectangle.BitmapEffect>
<BlurBitmapEffect Radius="3" />
</Rectangle.BitmapEffect>
</Rectangle>
<Grid x:Name="mainButton"
Margin="0,0,1,1"
RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<TranslateTransform X="0.0" Y="0.0"/>
<ScaleTransform ScaleX="1.0" ScaleY="1.0" />
</TransformGroup>
</Grid.RenderTransform>
<Rectangle x:Name="mainRect" Fill="{TemplateBinding Background}" RadiusX="6" RadiusY="6">
</Rectangle>
<!-- transparent rect -->
<Rectangle x:Name="glowRect" Margin="1,1,1,1" RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#EFFFFFFF"/>
<GradientStop Offset="1" Color="#00FFFFFF"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter HorizontalAlignment="Center"
Margin="4,0,4,0"
Content="{TemplateBinding Content}"
VerticalAlignment="Center" />
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="mainButton" Property="RenderTransform" >
<Setter.Value>
<TransformGroup>
<TranslateTransform X="0.0" Y="0.0"/>
<ScaleTransform ScaleX="1.03" ScaleY="1.03" />
</TransformGroup>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#FF4788c8" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="mainButton" Property="RenderTransform" >
<Setter.Value>
<TransformGroup>
<TranslateTransform X="1" Y="1"/>
<ScaleTransform ScaleX="1.03" ScaleY="1.03" />
</TransformGroup>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<WrapPanel>
<Button Margin="5" Width="100" Height="50" Style="{StaticResource GelButton}" Foreground="White" FontSize="20">Hello</Button>
<Button Margin="5" Width="100" Height="50" Style="{StaticResource GelButton}" Background="{StaticResource MagentaGradientBrush}">Hello</Button>
<Button Width="100" Height="100" Style="{StaticResource CircleButton}">Hello World</Button>
<Button Width="80" Height="80" Style="{StaticResource CircleButton}" Background="#FF9F1014">Button 2</Button>
<Button Width="80" Height="80" Style="{StaticResource CircleButton}" Background="#FFD8C618">Button 3</Button>
<Button Width="80" Height="80" Style="{StaticResource CircleButton}" Background="#FF499E1E">Button 4</Button>
<Button Width="80" Height="80" Style="{StaticResource CircleButton}" Background="Orange">Button 5</Button>
<Button Width="80" Height="80" Style="{StaticResource CircleButton}" Background="#FF7C7C7C">Button 6</Button>
<Button Width="80" Height="80" Style="{StaticResource CircleButton}" Background="Purple" Foreground="White">Button 7</Button>
<Button Width="100" Height="100" Style="{StaticResource CircleButton}" Background="#FF3120D4" Foreground="White">Button 8</Button>
<Button Style="{StaticResource OrangeButton}">Hello</Button>
<Button Style="{StaticResource OrangeButton}">World</Button>
<Button Style="{StaticResource OrangeButton}" FontSize="20">Big Button</Button>
<Button Style="{StaticResource OrangeButton}" IsDefault="True">Default</Button>
<Button Style="{StaticResource OrangeButton}" IsEnabled="False">Disabled</Button>
<Button Style="{StaticResource OrangeButton}" Width="70" Height="30">70 x 30</Button>
<TextBox Width="20" />
<Button Style="{StaticResource OrangeButton}" Width="30" Height="30">
<Path Fill="Black" Data="M 3,3 l 9,9 l -9,9 Z" />
</Button>
<Button Margin="5" Style="{StaticResource NewGameButtonStyle}" >1 Player</Button>
<Button Margin="5" Style="{StaticResource NewGameButtonStyle}">2 Players</Button>
</WrapPanel>
</Window>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment