Use WPF to create a highlighted button

1. Create three buttons (create multiple buttons for comparison and style demonstration)
(1) Open Microsoft Expression blend 2 (I am here in August preview version, hereinafter referred to as blend)
(2) file-> new project, the first one selected by default: WPF applications(.exe), perform relevant settings, and then press OK ,:

(3) return to the Created directory c:/books/buttondemos and check the file structure. For example:

Note that the app. XAML and window1.xaml series files (the series here represent all files starting with them, such as app. XAML and App. XAML. CS files, the same below ).
(4) Rename window1.xaml to buttondemos. XAML in the project on the right of the blend operation window. After the name is changed, the corresponding CS file is automatically changed to a new file name, such as buttondemos. XAML. CS.
(5) Click the "button" button in the left toolbox and drag a button in the intermediate content area. Similarly, change the name to btndemo1 on the Properties tab on the right, enter "demo 1" in the content box of the common properties item, which is the text displayed by the button.
(6) Right-click the button and click View XAML. The following code is displayed:
<Button horizontalalignment = "Left" margin = "8, 8, 0, 0" X: name = "btndemo1" verticalignment = "TOP" width = "81" Height = "37" content = "demo 1"/>
(7) Go to design mode, select the "btndemo1" button, copy, paste, and drag it to the following position, and set the name to btndemo2 and content: DEMO 2;
(8) Repeat Step (7) and create the demo 3 button.

2. Create a beautiful button
(1) In design mode, select the button "btndemo1", copy, paste, and drag it to the right, and set name to btndemo1_copy and content: Demo 1 copy;
(2) set the btndemo1_copy button on the right side:
On the Properties tab, click the backgound option in the brushes folding option, and then click the gradient brush below (and then follow Photoshop to make the gradient Paint Brush) to select/adjust the color settings, for example: (if you have used Photoshop, you will find that it is similar, and the operation method is the same)

Select reflect in options (that is, keep it selected before it) to get the following button style:

(3) let's take a look at the code of this button:
<Button X: Name = "btndemow.copy" Height = "37" content = "demo 1 copy" horizontalalignment = "Left" margin = "107,8, 0, 0 "verticalalignment =" TOP "width =" 81 ">
<Button. Background>
<Lineargradientbrush endpoint = "0.123, 0.595" startpoint = "0.123,-0.243" spreadmethod = "reflect">
<Gradientstop color = "# fffdfdfd" offset = "0"/>
<Gradientstop color = "# fff5ad10" offset = "1"/>
</Lineargradientbrush>
</Button. Background>
</Button>
(For the meaning of the Code and how to use the C # code to implement it one by one, if I have time, I will try again one by one. Here, I will press "no table)
(4) make another button as follows:

3. Use application. Resources to set button attributes (similar to CSS style sheets ):
(1) define the application. Resources block: Open the app. XAML file. We can see the following XML snippet:
<Application. Resources>
<! -- Resources scoped at the application level shocould be defined here. -->
</Application. Resources>
(2) Intermediate <! --> Partially changed to the following code (Note: The Yellow bottom and bold Section are the XAML code of the buttons in step 3 above, however, an X: key attribute is added at the beginning of the tag, and its value is "graybluegradientbrush "):
<Lineargradientbrush X: Key = "graybluegradientbrush" endpoint = "0.123, 0.595" startpoint = "0.123,-0.243" spreadmethod = "reflect">
<Gradientstop color = "# fffdfdfd" offset = "0"/>
<Gradientstop color = "# fff5ad10" offset = "1"/>
</Lineargradientbrush>
<Style targettype = "{X: type button}">
<Setter property = "background" value = "{staticresource graybluegradientbrush}"/>
<Setter property = "width" value = "120"/>
<Setter property = "margin" value = "10"/>
</Style>
It is worth mentioning that X: key is the unique name of the gradient paint brush.
Here it is necessary to explain the content marked by style in the red text section:
First, part of the content in the targettype attribute value "{}" of the style is to indicate the type name of the control to be used by the style. Second, in the style label, <setter property = "background"...>, set the background of the control to the value corresponding to the value attribute, and the value is enclosed by a braces {}, indicating that the value is an expression, this part of content needs to be "computed" by the program, while "staticresource graybluegradientbrush" indicates a static resource reference to "graybluegradientbrush. Finally, set the property values of width and margin respectively (setter, which can be understood as "value assignment") to and 10. Note that the set value here is only when the corresponding value of the related control is empty, they play a role.
At this point, the complete XAML content is:
<Window
Xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
X: class = "buttondemos. window1"
X: Name = "window"
Title = "window1"
Width = "640" Height = "480" background = "# ff000000">

<Grid X: Name = "layoutroot">
<Button horizontalalignment = "Left" margin = "8, 8, 0, 0" X: name = "btndemo1" verticalignment = "TOP" width = "81" Height = "37" content = "demo 1"/>
<Button X: Name = "btndemo2" width = "81" Height = "37" content = "DEMO 2" horizontalalignment = "Left" margin = "8, 49, 0, 0 "verticalalignment =" TOP "/>
<Button X: Name = "btndemo3" width = "81" Height = "37" content = "demo 3" horizontalalignment = "Left" margin = "8, 90, 0, 0 "verticalalignment =" TOP "/>
<Button X: Name = "btndemow.copy" Height = "37" content = "demo 1 copy" horizontalalignment = "Left" margin = "107,8, 0, 0 "verticalalignment =" TOP "width =" 81 ">
<Button. Background>
<Lineargradientbrush endpoint = "0.123, 0.595" startpoint = "0.123,-0.243" spreadmethod = "reflect">
<Gradientstop color = "# fffdfdfd" offset = "0"/>
<Gradientstop color = "# fff5ad10" offset = "1"/>
</Lineargradientbrush>
</Button. Background>
</Button>
<Button X: Name = "btndemo2_copy" Height = "37" content = "DEMO 2 Copy" horizontalalignment = "Left" margin = "107,49, 0, 0 "verticalalignment =" TOP "width =" 81 ">
<Button. Background>
<Lineargradientbrush endpoint = "0.123, 0.595" startpoint = "0.123,-0.243" spreadmethod = "pad">
<Gradientstop color = "# fff9f110" offset = "0.005"/>
<Gradientstop color = "# ff9f9a12" offset = "1"/>
<Gradientstop color = "# fffbfaf1" offset = "0.298"/>
<Gradientstop color = "# ff595506" offset = "0.659"/>
</Lineargradientbrush>
</Button. Background>
</Button>
<Button X: Name = "btndemo3_copy" width = "81" Height = "37" content = "demo 3 copy" rendertransformorigin = "0.481, 0.432 "horizontalalignment =" Left "margin =", 90, "verticalignment =" TOP ">
<Button. Background>
<Lineargradientbrush endpoint = "1, 0.5" startpoint = "0, 0.5">
<Gradientstop color = "# ff9000086" offset = "0"/>
<Gradientstop color = "# ffc63838" offset = "1"/>
<Gradientstop color = "# fffbf9f9" offset = "0.418"/>
<Gradientstop color = "# fff01717" offset = "0.74"/>
<Gradientstop color = "# ffd4d4b7" offset = "0.091"/>
<Gradientstop color = "# ff8f8f87" offset = "0.183"/>
<Gradientstop color = "# ff972424" offset = "0.562"/>
<Gradientstop color = "# ff5c0d0d" offset = "0.928"/>
</Lineargradientbrush>
</Button. Background>
</Button>
<Button X: Name = "btndemo3_copy1" width = "81" Height = "37" content = "demo 3 copy" rendertransformorigin = "0.481, 0.432 "horizontalalignment =" Left "margin =" 107,131, "verticalignment =" TOP ">
<Button. Background>
<Lineargradientbrush endpoint = "0.198, 1" startpoint = "0.198, 0.054">
<Gradientstop color = "# ff9000086" offset = "0"/>
<Gradientstop color = "# ffc63838" offset = "1"/>
<Gradientstop color = "# fffbf9f9" offset = "0.418"/>
<Gradientstop color = "# fff01717" offset = "0.74"/>
<Gradientstop color = "# ffd4d4b7" offset = "0.091"/>
<Gradientstop color = "# ff8f8f87" offset = "0.183"/>
<Gradientstop color = "# ff972424" offset = "0.562"/>
<Gradientstop color = "# ff5c0d0d" offset = "0.928"/>
</Lineargradientbrush>
</Button. Background>
</Button>
</GRID>
</WINDOW>
(3) OK. Press F5 to get the following result:

We found that all the backgrounds of all the buttons that have not set the background attribute are replaced with the same background color as the demo 1 copy button!