From Web Developer (HTML/CSS) to WPF: How can i start styling my WPF app?

Question

i know HTML/CSS and want to learn WPF styling. how can i get started. i see that padding, for example, works differently in WPF app.

in css:

padding: 5px 10px;

in XAML?

Padding="5px" 

i notice that i need to expand the width of the element eg. button myself to accomodate the padding? if so, how can i calculate the box model? the text has no line-height right? so if i have a font-size of 15px and padding of 5px, my height will be 25px?

and can i set different horizontal and vertical paddings?

how can i apply simple gradients. will it be very hard with just visual studio?

i appreciate links to tutorials or advice on getting started. if there is a HTML/CSS to WPF/XAML article or tutorial that will be even better!

Answer 1

Use Expression Blend instead of Visual Studio if you are a designer. Start playing with simple styles and look behind the designer and you will see the XAML code. XAML is much more powerful than HTML and CSS. And if you want to take a deeper look visit the MSDN Library.

Answer 2

Padding is basically a Thickness structure, hence

<MyControl Padding="left"/>

<MyControl Padding="left,top"/>

<MyControl Padding="left,top,right,bottom" ... />

If you specify only left one its value is copied to top, right and bottom.
If you specify left and top, left is copied to right and top to bottom ( like vertical and horizontal paddings)

For simple gradients VS is OK.

For a start, try to get around with xaml in code rather than using WYSIWYG tools like Blend. VS or XamlPad are good.