WPF custom window close button, wpf custom window button

WPF custom window close button, wpf custom window button

The main knowledge points of the closed icon design are as follows:

1. Path: draw a line through Path. Of course, you can use Rectangle/Border instead of horizontal and vertical.

It is very convenient to use Path for some simple line icons.

2. simple Animation and Animation usage

The Button style is as follows:

<Button x: Name = "BtnClose" Click = "BtnClose_OnClick"> <Button. template> <ControlTemplate TargetType = "Button"> <Grid x: name = "Uc_Grid" VerticalAlignment = "Center" Height = "25" Width = "25"> <Path x: name = "Uc_Path1" Stroke = "DodgerBlue" StrokeThickness = "4" Data = "M0, 0 L20, 20 "verticalignment =" Center "HorizontalAlignment =" Center "> </Path> <Path x: name = "Uc_Path2" Stroke = "DodgerBlue" StrokeThickness = "4" Data = "M20, 0 L0, 20 "verticalignment =" Center "HorizontalAlignment =" Center "> </Path> <Grid. renderTransform> <RotateTransform x: Name = "Uc_Transform" Angle = "0" CenterY = "12.5" CenterX = "12.5"> </RotateTransform> </Grid. renderTransform> </Grid> <ContentPresenter Content = "{TemplateBinding Content}" HorizontalAlignment = "{TemplateBinding HorizontalAlignment}"> </ContentPresenter> </Grid> <ControlTemplate. triggers> <Trigger Property = "IsMouseOver" Value = "True"> <Setter TargetName = "Uc_Path1" Property = "Data" Value = "M0, 0 L22, 22 "> </Setter> <Setter TargetName =" Uc_Path2 "Property =" Data "Value =" M22, 0 L0, 22 "> </Setter> </Trigger> <Trigger Property =" IsPressed "Value =" True "> <Setter TargetName =" Uc_Path1 "Property =" Data "Value =" M0, 0 L24, 24 "> </Setter> <Setter TargetName =" Uc_Path2 "Property =" Data "Value =" M24, 0 L0, 24 "> </Setter> </Trigger> <EventTrigger RoutedEvent =" MouseEnter "> <BeginStoryboard HandoffBehavior =" SnapshotAndReplace "> <Storyboard TargetName =" Uc_Transform "TargetProperty =" Angle "> <DoubleAnimation From = "0" To = "90" Duration = "0: 0. 1 "> </DoubleAnimation> </Storyboard> </BeginStoryboard> </EventTrigger> </ControlTemplate. triggers> </ControlTemplate> </Button. template> </Button>View Code