Posted By

heathbo on 09/28/13


Tagged


Versions (?)

WPF Custom Styled Button


 / Published in: C#
 

This code gives you the ability to stylize the buttons background, and borders on events.

  1. Put this code in the XAML
  2.  
  3. <Window.Resources>
  4. <Style x:Key="RoundCorner" TargetType="Button">
  5.  
  6. <Setter Property="HorizontalContentAlignment" Value="Center"/>
  7. <Setter Property="VerticalContentAlignment" Value="Center"/>
  8. <Setter Property="Padding" Value="1"/>
  9. <Setter Property="Template">
  10. <Setter.Value>
  11. <ControlTemplate TargetType="{x:Type Button}">
  12. <Grid x:Name="grid">
  13. <Border x:Name="border" CornerRadius="0,3,0,0" BorderBrush="#FF114EAF" BorderThickness="1">
  14. <Border.Background>
  15. <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
  16. <GradientStop Color="#FF88A6D7" Offset="0"/>
  17. <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
  18. <GradientStop Color="#FF1853B1" Offset="0.5"/>
  19. <GradientStop Color="#FF779AD1" Offset="1"/>
  20. <GradientStop Color="#FF4977C2" Offset="0.498"/>
  21. </LinearGradientBrush>
  22. </Border.Background>
  23. <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" TextElement.FontWeight="Bold"></ContentPresenter>
  24. </Border>
  25. </Grid>
  26. <ControlTemplate.Triggers>
  27. <Trigger Property="IsMouseOver" Value="True">
  28. <Setter Property="Background" TargetName="border">
  29. <Setter.Value>
  30. <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
  31. <GradientStop Color="#FF98B2DC" Offset="0"/>
  32. <GradientStop Color="#FF245CB5" Offset="0.528"/>
  33. <GradientStop Color="#FFCAD7ED" Offset="1"/>
  34. <GradientStop Color="#FF7095CF" Offset="0.442"/>
  35. <GradientStop Color="#FF4272BF" Offset="0.487"/>
  36. </LinearGradientBrush>
  37. </Setter.Value>
  38. </Setter>
  39. </Trigger>
  40.  
  41. <Trigger Property="IsPressed" Value="True">
  42. <Setter Property="Background" TargetName="border">
  43. <Setter.Value>
  44. <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
  45. <GradientStop Color="#FF88A6D7" Offset="0"/>
  46. <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
  47. <GradientStop Color="#FF1853B1" Offset="0.5"/>
  48. <GradientStop Color="#FF779AD1" Offset="1"/>
  49. <GradientStop Color="#FF4977C2" Offset="0.498"/>
  50. </LinearGradientBrush>
  51. </Setter.Value>
  52. </Setter>
  53. </Trigger>
  54.  
  55. <Trigger Property="IsEnabled" Value="False">
  56. <Setter Property="Opacity" TargetName="grid" Value="0.25"/>
  57. </Trigger>
  58.  
  59. </ControlTemplate.Triggers>
  60. </ControlTemplate>
  61. </Setter.Value>
  62. </Setter>
  63. </Style>
  64. </Window.Resources>
  65.  
  66.  
  67.  
  68.  
  69.  
  70. <Button Style="{StaticResource RoundCorner}"/>

Report this snippet  

You need to login to post a comment.