WPF C button style

Question

Would somebody know how to recreate this button style in WPF  As I do not know how to make the different compartments  As well as the 2 different texts and text styles

User · Answer

lt  --Customize button -- gt    lt LinearGradientBrush x Key  Buttongradient  StartPoint  0 500023 0 999996  EndPoint  0 500023 4 37507e-006  gt       lt GradientStop Color   5e5e5e  Offset  1    gt       lt GradientStop Color   0b0b0b  Offset  0    gt   lt  LinearGradientBrush gt     lt Style x Key  hhh  TargetType   x Type Button   gt       lt Setter Property  Background  Value   DynamicResource Buttongradient    gt       lt Setter Property  Foreground  Value  White    gt       lt Setter Property  FontSize  Value  15    gt       lt Setter Property  SnapsToDevicePixels  Value  True    gt       lt Setter Property  Template  gt           lt Setter Value gt               lt ControlTemplate TargetType   x Type Button   gt                   lt Border CornerRadius  4  Background   TemplateBinding Background   BorderBrush  Black  BorderThickness  0 5  gt                       lt Border Effect gt                           lt DropShadowEffect ShadowDepth  0  BlurRadius  2  gt  lt  DropShadowEffect gt                       lt  Border Effect gt                        lt Grid gt                            lt Path Width  9  Height  16 5  Stretch  Fill  Fill   000   HorizontalAlignment  Left  Margin  16 5 0 0 0  Data  F1 M 30 0833 22 1667L 50 6665 37 6043L 50 6665 38 7918L 30 0833 53 8333L 30 0833 22 1667 Z   Opacity  0 2  gt                            lt  Path gt                           lt Path x Name  PathIcon  Width  8  Height  15   Stretch  Fill  Fill   4C87B3  HorizontalAlignment  Left  Margin  17 0 0 0  Data  F1 M 30 0833 22 1667L 50 6665 37 6043L 50 6665 38 7918L 30 0833 53 8333L 30 0833 22 1667 Z   gt                               lt Path Effect gt                                   lt DropShadowEffect ShadowDepth  0  BlurRadius  5  gt  lt  DropShadowEffect gt                               lt  Path Effect gt                           lt  Path gt                             lt Line  HorizontalAlignment  Left  Margin  40 0 0 0  Name  line4  Stroke  Black  VerticalAlignment  Top  Width  2  Y1  0  Y2  640  Opacity  0 5    gt                           lt ContentPresenter x Name  MyContentPresenter  Content   TemplateBinding Content   HorizontalAlignment  Center  VerticalAlignment  Center  Margin  0 0 0 0    gt                       lt  Grid gt                   lt  Border gt                    lt ControlTemplate Triggers gt                       lt Trigger Property  IsMouseOver  Value  True  gt                           lt Setter Property  Background  Value   E59400    gt                           lt Setter Property  Foreground  Value  White    gt                           lt Setter TargetName  PathIcon  Property  Fill  Value  Black    gt                       lt  Trigger gt                        lt Trigger Property  IsPressed  Value  True  gt                           lt Setter Property  Background  Value  OrangeRed    gt                           lt Setter Property  Foreground  Value  White    gt                       lt  Trigger gt                   lt  ControlTemplate Triggers gt               lt  ControlTemplate gt           lt  Setter Value gt       lt  Setter gt   lt  Style gt

User · Answer

Here s my attempt  Looks more similar to the OP s sample and provides settable properties for icon  FrameworkElement   title  string  and subtitle  string   The output looks like this     Here s XAML    lt Button x Class  Controls FancyButton               xmlns  http   schemas microsoft com winfx 2006 xaml presentation               xmlns x  http   schemas microsoft com winfx 2006 xaml               xmlns mc  http   schemas openxmlformats org markup-compatibility 2006                xmlns d  http   schemas microsoft com expression blend 2008                xmlns local  clr-namespace Controls               mc Ignorable  d                d DesignHeight  300  d DesignWidth  300  Width  300  Height  80            BorderBrush   x Null   BorderThickness  0  gt     lt Button Effect gt       lt DropShadowEffect BlurRadius  12  Color  Gray  Direction  270  Opacity   8  ShadowDepth  3    gt     lt  Button Effect gt      lt Button Template gt       lt ControlTemplate TargetType  Button  gt         lt Grid Width   Binding RelativeSource  RelativeSource AncestorType Button   Path ActualWidth           Height   Binding RelativeSource  RelativeSource AncestorType Button   Path ActualHeight   gt            lt Border x Name  MainBorder  CornerRadius  3  Grid ColumnSpan  2  Margin  0 0 4 4  BorderBrush  Black  BorderThickness  1  gt             lt Border Background gt               lt LinearGradientBrush StartPoint  0 5 0  EndPoint  0 5 1  gt                 lt GradientStop Color   FF5E5E5E  Offset  0    gt                 lt GradientStop Color   FF040404  Offset  1    gt               lt  LinearGradientBrush gt             lt  Border Background gt              lt Grid  gt               lt Grid ColumnDefinitions gt                 lt ColumnDefinition Width  1 2    gt                 lt ColumnDefinition Width  3    gt               lt  Grid ColumnDefinitions gt                lt Border CornerRadius  2  Margin  0  BorderBrush  LightGray  BorderThickness  0 1 0 0  Grid ColumnSpan  2  Grid RowSpan  2    gt                lt Line X1  10  Y1  0  X2  10  Y2  10  Stretch  Fill  Grid Column  0  HorizontalAlignment  Right  Stroke   0C0C0C  Grid RowSpan  2    gt               lt Line X1  10  Y1  0  X2  10  Y2  10  Stretch  Fill  Grid Column  1  HorizontalAlignment  Left  Grid RowSpan  2  gt                 lt Line Stroke gt                   lt LinearGradientBrush StartPoint  0 0  EndPoint  0 1  gt                     lt GradientStop Color   4D4D4D  Offset  0    gt                     lt GradientStop Color   2C2C2C  Offset  1    gt                   lt  LinearGradientBrush gt                 lt  Line Stroke gt               lt  Line gt                lt ContentControl HorizontalAlignment  Center  VerticalAlignment  Center  Grid RowSpan  2  gt                 lt ContentControl Content gt                   lt Binding RelativeSource   RelativeSource TemplatedParent   Path  Image  gt                     lt Binding FallbackValue gt                       lt Path Data  M0 0 L30 15 L0 30Z  gt                         lt Path Effect gt                           lt DropShadowEffect Direction  50  ShadowDepth  2    gt                         lt  Path Effect gt                         lt Path Fill gt                           lt LinearGradientBrush StartPoint  0 0 5  EndPoint  1 0 5  gt                             lt GradientStop Color   4B86B2  Offset  0    gt                             lt GradientStop Color   477FA8  Offset  1    gt                           lt  LinearGradientBrush gt                         lt  Path Fill gt                       lt  Path gt                     lt  Binding FallbackValue gt                   lt  Binding gt                 lt  ContentControl Content gt               lt  ContentControl gt                 lt Grid Grid Column  1  HorizontalAlignment  Left  VerticalAlignment  Center  gt                 lt Grid RowDefinitions gt                   lt RowDefinition Height  Auto    gt                   lt RowDefinition Height  Auto    gt                 lt  Grid RowDefinitions gt                  lt TextBlock x Name  Title  Text   Binding RelativeSource  RelativeSource TemplatedParent   Path Title  FallbackValue  Watch Now    Grid Column  1  VerticalAlignment  Bottom  FontFamily  Calibri  FontWeight  Bold  FontSize  28  Foreground  White  Margin  20 0 0 0    gt                 lt TextBlock x Name  SubTitle  Text   Binding RelativeSource  RelativeSource TemplatedParent   Path SubTitle  FallbackValue  Duration  50 min    Grid Column  1  Grid Row  1  VerticalAlignment  top  FontFamily  Calibri  FontSize  14  Foreground  White  Margin  20 0 0 0    gt               lt  Grid gt             lt  Grid gt           lt  Border gt         lt  Grid gt          lt ControlTemplate Triggers gt           lt Trigger Property  IsMouseOver  Value  True  gt             lt Setter TargetName  Title  Property  TextDecorations  Value  Underline    gt             lt Setter TargetName  SubTitle  Property  TextDecorations  Value  Underline    gt           lt  Trigger gt           lt Trigger Property  IsPressed  Value  True  gt             lt Setter TargetName  MainBorder  Property  Background  gt               lt Setter Value gt                 lt LinearGradientBrush StartPoint  0 5 0  EndPoint  0 5 1  gt                   lt GradientStop Color   FF5E5E5E  Offset  0    gt                   lt GradientStop Color   FFA4A4A4  Offset  1    gt                 lt  LinearGradientBrush gt               lt  Setter Value gt             lt  Setter gt           lt  Trigger gt         lt  ControlTemplate Triggers gt       lt  ControlTemplate gt     lt  Button Template gt   lt  Button gt    Here s the code-behind   using System Windows  using System Windows Controls   namespace Controls     public partial class FancyButton   Button         public FancyButton               InitializeComponent               public string Title             get   return  string GetValue TitleProperty           set   SetValue TitleProperty  value                public static readonly DependencyProperty TitleProperty           DependencyProperty Register  Title   typeof string   typeof FancyButton   new FrameworkPropertyMetadata  Title   FrameworkPropertyMetadataOptions AffectsRender         public string SubTitle             get   return  string GetValue SubTitleProperty           set   SetValue SubTitleProperty  value                public static readonly DependencyProperty SubTitleProperty           DependencyProperty Register  SubTitle   typeof string   typeof FancyButton   new FrameworkPropertyMetadata  SubTitle   FrameworkPropertyMetadataOptions AffectsRender         public FrameworkElement Image             get   return  FrameworkElement GetValue ImageProperty           set   SetValue ImageProperty  value                public static readonly DependencyProperty ImageProperty           DependencyProperty Register  Image   typeof FrameworkElement   typeof FancyButton   new FrameworkPropertyMetadata null  FrameworkPropertyMetadataOptions AffectsRender            Here is how to use it    lt controls FancyButton Grid Row  1  HorizontalAlignment  Right  Margin  3  Title  Watch Now  SubTitle  Duration  50 min  gt     lt controls FancyButton Image gt       lt Path Data  M0 0 L30 15 L0 30Z  gt         lt Path Effect gt           lt DropShadowEffect Direction  50  ShadowDepth  2    gt         lt  Path Effect gt         lt Path Fill gt           lt LinearGradientBrush StartPoint  0 0 5  EndPoint  1 0 5  gt             lt GradientStop Color   4B86B2  Offset  0    gt             lt GradientStop Color   477FA8  Offset  1    gt           lt  LinearGradientBrush gt         lt  Path Fill gt       lt  Path gt     lt  controls FancyButton Image gt   lt  controls FancyButton gt

User · Answer

To solve your question definitely need to use the Style and Template for the Button  But how exactly does he look like  Decisions may be several  For example  Button are two texts to better define the relevant TextBlocks  Can be directly in the template  but then use the buttons will be limited  because the template can be only one ContentPresenter  I decided to do things differently  to identify one ContentPresenter with an icon in the form of a Path  and the content is set using the buttons on the side    The style    lt Style TargetType   x Type Button   gt       lt Setter Property  Background  Value   373737    gt       lt Setter Property  Foreground  Value  White    gt       lt Setter Property  FontSize  Value  15    gt       lt Setter Property  SnapsToDevicePixels  Value  True    gt        lt Setter Property  Template  gt           lt Setter Value gt               lt ControlTemplate TargetType   x Type Button   gt                   lt Border CornerRadius  4  Background   TemplateBinding Background   gt                       lt Grid gt                           lt Path x Name  PathIcon  Width  15  Height  25  Stretch  Fill  Fill   4C87B3  HorizontalAlignment  Left  Margin  17 0 0 0  Data  F1 M 30 0833 22 1667L 50 6665 37 6043L 50 6665 38 7918L 30 0833 53 8333L 30 0833 22 1667 Z    gt                           lt ContentPresenter x Name  MyContentPresenter  Content   TemplateBinding Content   HorizontalAlignment  Center  VerticalAlignment  Center  Margin  0 0 0 0    gt                                                       lt  Grid gt                   lt  Border gt                    lt ControlTemplate Triggers gt                       lt Trigger Property  IsMouseOver  Value  True  gt                           lt Setter Property  Background  Value   E59400    gt                           lt Setter Property  Foreground  Value  White    gt                           lt Setter TargetName  PathIcon  Property  Fill  Value  Black    gt                       lt  Trigger gt                        lt Trigger Property  IsPressed  Value  True  gt                           lt Setter Property  Background  Value  OrangeRed    gt                           lt Setter Property  Foreground  Value  White    gt                       lt  Trigger gt                   lt  ControlTemplate Triggers gt               lt  ControlTemplate gt           lt  Setter Value gt       lt  Setter gt   lt  Style gt    Sample of using    lt Button Width  200  Height  50  VerticalAlignment  Top  Margin  0 20 0 0    gt       lt Button Content gt           lt StackPanel gt               lt TextBlock Text  Watch Now  FontSize  20    gt               lt TextBlock Text  Duration  50m  FontSize  12  Foreground  Gainsboro    gt           lt  StackPanel gt       lt  Button Content gt   lt  Button gt    Output    It is best to StackPanel determine the Resources and set the Button so    lt Window Resources gt       lt StackPanel x Key  MyStackPanel  gt           lt TextBlock Name  MainContent  Text  Watch Now  FontSize  20    gt           lt TextBlock Name  DurationValue  Text  Duration  50m  FontSize  12  Foreground  Gainsboro    gt       lt  StackPanel gt   lt  Window Resources gt    lt Button Width  200  Height  50  Content   StaticResource MyStackPanel   VerticalAlignment  Top  Margin  0 20 0 0    gt    The question remains with setting the value for TextBlock Duration  because this value must be dynamic  I implemented it using attached DependencyProperty  Set it to the window  like that    lt Window Name  MyWindow  local MyDependencyClass CurrentDuration  Duration  50m        gt    Using in TextBlock    lt TextBlock Name  DurationValue  Text   Binding ElementName MyWindow  Path  local MyDependencyClass CurrentDuration    FontSize  12  Foreground  Gainsboro    gt    In fact  there is no difference for anyone to determine the attached DependencyProperty  because it is the predominant feature   Example of set value   private void Button Click object sender  RoutedEventArgs e        MyDependencyClass SetCurrentDuration MyWindow   Duration  101m        A complete listing of examples   XAML   lt Window x Class  ButtonHelp MainWindow      xmlns  http   schemas microsoft com winfx 2006 xaml presentation      xmlns x  http   schemas microsoft com winfx 2006 xaml      xmlns local  clr-namespace ButtonHelp      Name  MyWindow      Title  MainWindow  Height  350  Width  525      WindowStartupLocation  CenterScreen      local MyDependencyClass CurrentDuration  Duration  50m  gt    lt Window Resources gt       lt Style TargetType   x Type Button   gt           lt Setter Property  Background  Value   373737    gt           lt Setter Property  Foreground  Value  White    gt           lt Setter Property  FontSize  Value  15    gt           lt Setter Property  FontFamily  Value     Segoe UI    gt           lt Setter Property  SnapsToDevicePixels  Value  True    gt            lt Setter Property  Template  gt               lt Setter Value gt                   lt ControlTemplate TargetType   x Type Button   gt                       lt Border CornerRadius  4  Background   TemplateBinding Background   gt                           lt Grid gt                               lt Path x Name  PathIcon  Width  15  Height  25  Stretch  Fill  Fill   4C87B3  HorizontalAlignment  Left  Margin  17 0 0 0  Data  F1 M 30 0833 22 1667L 50 6665 37 6043L 50 6665 38 7918L 30 0833 53 8333L 30 0833 22 1667 Z    gt                               lt ContentPresenter x Name  MyContentPresenter  Content   TemplateBinding Content   HorizontalAlignment  Center  VerticalAlignment  Center  Margin  0 0 0 0    gt                                                           lt  Grid gt                       lt  Border gt                        lt ControlTemplate Triggers gt                           lt Trigger Property  IsMouseOver  Value  True  gt                               lt Setter Property  Background  Value   E59400    gt                               lt Setter Property  Foreground  Value  White    gt                               lt Setter TargetName  PathIcon  Property  Fill  Value  Black    gt                           lt  Trigger gt                            lt Trigger Property  IsPressed  Value  True  gt                               lt Setter Property  Background  Value  OrangeRed    gt                               lt Setter Property  Foreground  Value  White    gt                           lt  Trigger gt                       lt  ControlTemplate Triggers gt                   lt  ControlTemplate gt               lt  Setter Value gt           lt  Setter gt       lt  Style gt        lt StackPanel x Key  MyStackPanel  gt           lt TextBlock Name  MainContent  Text  Watch Now  FontSize  20    gt           lt TextBlock Name  DurationValue  Text   Binding ElementName MyWindow  Path  local MyDependencyClass CurrentDuration    FontSize  12  Foreground  Gainsboro    gt       lt  StackPanel gt   lt  Window Resources gt    lt Grid gt               lt Button Width  200  Height  50  Content   StaticResource MyStackPanel   VerticalAlignment  Top  Margin  0 20 0 0    gt        lt Button Content  Set some duration  Style   x Null   Width  140  Height  30  VerticalAlignment  Top  HorizontalAlignment  Left  Click  Button Click    gt   lt  Grid gt      Code behind  public partial class MainWindow   Window       public MainWindow                 InitializeComponent               private void Button Click object sender  RoutedEventArgs e                MyDependencyClass SetCurrentDuration MyWindow   Duration  101m             public class MyDependencyClass   DependencyObject       public static readonly DependencyProperty CurrentDurationProperty               public static void SetCurrentDuration DependencyObject DepObject  string value                DepObject SetValue CurrentDurationProperty  value              public static string GetCurrentDuration DependencyObject DepObject                return  string DepObject GetValue CurrentDurationProperty              static MyDependencyClass                 PropertyMetadata MyPropertyMetadata   new PropertyMetadata  Duration  0m             CurrentDurationProperty   DependencyProperty RegisterAttached  CurrentDuration                                                               typeof string                                                               typeof MyDependencyClass                                                               MyPropertyMetadata

User · Answer

In this day and age of mouse driven computers and tablets with touch screens etc  it is often forgotten to cater for input via keyboard only  A button should support a focus rectangle  the dotted rectangle when the button has focus  or another shape matching the button shape   To add a focus rectangle to the button  use this XAML  from this site   Focus rectangle style    lt Style x Key  ButtonFocusVisual  gt     lt Setter Property  Control Template  gt       lt Setter Value gt         lt ControlTemplate gt           lt Border gt             lt Rectangle Margin  2  StrokeThickness  1  Stroke   60000000  StrokeDashArray  1 2    gt           lt  Border gt         lt  ControlTemplate gt       lt  Setter Value gt     lt  Setter gt   lt  Style gt    Applying the style to the button    lt Style TargetType  Button  gt     lt Setter Property  FocusVisualStyle  Value   StaticResource ButtonFocusVisual     gt

User · Answer

lt Button x Name  mybtnSave  FlowDirection  LeftToRight   HorizontalAlignment  Left  Margin  813 614 0 0  VerticalAlignment  Top   Width  223  Height  53  BorderBrush   FF2B3830  HorizontalContentAlignment  Center  VerticalContentAlignment  Center  FontFamily  B Titr  FontSize  15  FontWeight  Bold  BorderThickness  2  TabIndex  107  Click  mybtnSave Click   gt           lt Button Background gt               lt LinearGradientBrush EndPoint  0 5 1  StartPoint  0 5 0  gt                   lt GradientStop Color  Black  Offset  0   gt                   lt GradientStop Color   FF080505  Offset  1   gt                   lt GradientStop Color  White  Offset  0 536   gt               lt  LinearGradientBrush gt           lt  Button Background gt           lt Button Effect gt               lt DropShadowEffect  gt           lt  Button Effect gt           lt StackPanel HorizontalAlignment  Stretch  Cursor  Hand   gt               lt StackPanel Background gt                   lt LinearGradientBrush EndPoint  0 5 1  StartPoint  0 5 0  gt                       lt GradientStop Color   FF3ED82E  Offset  0   gt                       lt GradientStop Color   FF3BF728  Offset  1   gt                       lt GradientStop Color   FF212720  Offset  0 52   gt                   lt  LinearGradientBrush gt               lt  StackPanel Background gt               lt Image HorizontalAlignment  Left   Source  image Append Or Save 3 png  Height  36  Width  203    gt               lt TextBlock HorizontalAlignment  Center  Width  145  Height  22  VerticalAlignment  Top  Margin  0 -31 -35 0  Text  Save Com F12  FontFamily  Tahoma  FontSize  14  Padding  0 4 0 0  Foreground  White    gt           lt  StackPanel gt       lt  Button gt ente   enter image description here  1   1 r image description here

[wpf] WPF C# button style

Examples related to wpf

Examples related to xaml

Examples related to styles