WPF Styling Tutorial #1 – Button

The video of making a Button style consists of 3 parts:

Part 1 – Creating the style

Just create an empty style and set the properties of your button. Background, border, foreground, font family, font size and whatever you want. This is only for giving your button’s default properties.

Part 2 – Creating the template and the layout

In ControlTemplates you shouldn’t use directly defined colors. A ControlTemplate is not for telling WPF how to display a control in specific colors, but for telling how to display the control and its properties. Use TemplateBindings so your template remains customizable. Notice that I used directly defined brushes, but those only white masks for giving MouseOver and Pressed effects without changing the background color.

Create an empty ControlTemplate and start to build up your layout. I have a Background border displaying the border and background colors, a Shine border that can display the MouseOver and Pressed effects, and a ContentPresenter showing the content. After your layout made, set RecognizesAccessKey to true on your ContentPresenter, so underscore characters are recognized as access key modifiers. For example after you set your content to ‘Click _here’, you can activate your button by pressing Alt+H.

Part 3 – Creating the triggers

This can be very various based on your needs. A typical button handle the MouseOver and Pressed states, and because it’s a control for input you should handle IsEnabled too. Besides you have many more options, for example you can visualize whether IsDefault set to true or not

Advertisements

5 Responses to WPF Styling Tutorial #1 – Button

  1. GM02 says:

    what software do u used?

  2. Dron247 says:

    it’s cool, i need more. WPF is good thing, but i’m very bad designer =)

  3. im too=). but what software it?

  4. Alan says:

    The software is called Expression Blend

  5. Then you may really start off searching great if possibly you paint your head’s hair, you may obtain a cost-effective
    hair painting for any couple of bucks, its surely
    not high-priced in any way! . In case you have the very locks colouring then thats an edge
    and also a matter considerably less to concern yourself with.
    Down the road you are going to desire to uncover the vital naruto costume, as a
    consequence of the extra frizzy hair which
    it is actually have around the the neck and throat, you can get a thing
    sort a sibling or possibly a cosing or perhaps some fiancee you realize appearances to acquire got a new sweater or some factor akin to
    that which has the unique locks depth, than the only situation remaining could possibly be to place several orange outfit
    dress yourself in more than this to be sure the hair go over the leading of this orange shirts or clothes producing it seem and really feel as if this have been a particular.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: