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:

Hello World Orcas

Welcome everyone, today I decided to install Orcas in my job computer (xp) and this afternoon in my own computer(vista). Well with xp any matter I installed Visual c# express Orcas and compiled without problem. But this afternoon with Vista, ouch.

If you have any problem post me a comment, to tell you how to solve it. And now... Hello World Orcas:

1.- Create a new WPF application















1.1- Go to Project : HelloWorld properties and change the next:












2.- Add a button on the window


















3.- Let's create the event (I supposed they will put a design mode early), to do that, go to the window.xaml.cs (yeah we will have to get customed):



















4.- And now add the following code:

public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
button1.Click += new RoutedEventHandler(button1_Click);
}
void button1_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Hello World");
}
}

Run and you will have your first VISTA WPF .net 3.5 C# first app, Congratulations :)

Preparing RibbonFastMenu

Good Afternoon everyone

I'm preparing the RibbonFastMenu, with
RibbonMenuButtons and RibbonContextMenu,
as you can see in the image, I also included the Transparent Region to place the RibbonForm in the correct place. The constructor will have the
RibbonRoundButton location to place it well.

When you click on the Arrow Region of a button with SplitRegion, you open the RibbonContextMenu (second image). I solved some matters with the round corners and the shadow which was difficult because I haven't found any help about this matter in the Internet but at the end I get it.

Now I have to finish the correct width of the painting of the
RibbonContextMenu, and the Gradients of the RibbonFastMenu.
After that I'll mix with the RibbonForm.

Another thing I have add to the
RibbonMenuButton is the Keep Pressed option, that makes the chance to keep it pressed and send to the Parent Control (Container) to the other RibbonMenuButtons to left this Status. (It will be great to simulate tabcontrols with RibbonMenuButtons or any multichoice selection.

Preparing the RibbonForm

Good night again, tonight I present a preview of the RibbonForm, as you can see in the image, it's like OF2007, has the:

• RibbonCommandButtons (Minimize, Maximize and Close).


• Method to change Hue, Sat and Brightness


• Secondary title with armony ForeColor


• I'm including the RibbonRoundButton (it looks great)


• I have to make all the methods to resize and move the RibbonForm.

I'm finishing the RibbonFastMenu with the RibbonContextMenu. I think this weekend or next I'll publish the article.

The down count is coming to integrate and create a great library. Thanks everyone

The RibbonRoundButton

Good Night, I have finished now the RibbonRoundButton, this is like the WM player, Of2007 and VSTA round buttons, and includes fading between colors. I designed with .net 2.0, I think it's a eye candy and it works fine.

I'll publish it in codeproject with the RibbonForm and the Updated RibbonMenuButton with the InfoForm and ContextMenuStrip.




It was difficult to add a shadow under the circle region but at the end I think it finished well.

Another matters with that is the stranges halos that has inside and over, in a few days you will have all the code.

About RibbonMenuButton

First of all, I have decided to put all my ControlLibrary free for everybody and Thanks for all the opinions.

Due to my ControlLibrary is getting huge, I thought explain it as I finished the parts, and then publish it as article in codeproject. Here is a screenshot of the RibbonMenuButtonControlTest.




















The interesting properties I created are:

• Arrow: ToRight or ToDown.
• ColorBase,ColorOn,ColorPress (not more back images, more customizable).
• GroupPos: Left,Center,Right,Top,Bottom.
• ImageLocation : L,R,C,T,B.
• ImageOffset (Autoscales).
• Radius (of corners button).
• ShowBase: to show base or not.
• SplitButton: to convert in multiple click event.
• Split Distance : to set the size of the contextmenu button part.
• FadingSpeed: how fast is the transtition from base to oncolor and back.

I have to add the final touches and if you want to add another functionality, tell me, I'll be grateful to know your opinion and I'll try to add it.

If you want to learn with this controls, I recommend you to take a look to:

• this.Region: thats a good way to avoid matters of transparency.
• LinearGradient with multiple colors, that makes easy the gradients.
• MeasureString : thats a good method to position the text (Beacuse you have to take away the base.OnPaint -> you have to do ALL, including write the text).
• Transform Colors Method including Alpha opacity.
• The DrawArc Method: As you can see with the radius you can make smooth corners
• OnMouseUp: Here you can see what happens when the is SplitButton is activated.

Tomorrow or next, you will see the fantastic RibbonRoundButton. (Another thing, I'm Spanish and I want to improve my English. Could you tell me my faults in the articles? Thank's)