WPF Custom Styled Button


/ Published in: C#
Save to your folder(s)

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


Copy this code and paste it in your HTML
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.