30 May 2007

Tutorial: Custom XAML Button - First Step

Today I have practically finished my first button in Orcas, there are few things to get customed, and I'll try to explain as for a dummy. Let's start from what you need:


1.- Download Microsoft Expression Design : This is needed to learn a bit of XAML figure structure and design easily , (at the moment I'm solving a problem with a domain when I finished it I'll put all my code files, if you want the source, email me: mailto:juanpablogc@gmail.com , subject: Overrider_300507)














Paint something that you would like to have in a button, (I take a similar look and feel as my RibbonRoundButton).

After you have finished it, you will have to export it to a xaml file. The structure of an xaml (the interesting part for us) is for instance:

canvas...>
ellipse...>
/ellipse>
path...>
/path>
path...>
/path>
/canvas>

(I have problems to add (<) in the blog)

You can imagine the Canvas as a Drawing Table where you layout the components and inside you can add everything you want as Ellipses, Paths... (This substitutes to the OnPaint method which disappears in .net 3.5)

2.- After you have get customed a bit with designer, and exported the file, you must take advice that every component in designer has a name like:

x:Name="Layer_1...
x:Name="Ellipse_0"...
x:Name="Path"...


you must remove the part of x:Name... because a control in Orcas can have only one name.
and to work fine in Orcas, and change Canvas to Grid.

Tomorrow I'll show you how to implement it in a Control Button, as a preview take a look to this screenshot:



No comments: