I finally have my weekly 6 hours of peace. I will get back to work soon nuff, but I need to sink my teeth properly in EI/Sparkle. I thought it might be cool if I kept my blog open and kept scribbling as I went through the app. So this is gonna be a real log-style thing. <PicardVoice>Captain's log, stardate 24871.4.</PicardVoice>
I decided earlier (after dissecting the samples that come with EI) that the only way to get going with this deceptively small-sized package was to get my hands dirty. So I have a few applications planned:
FXAurek - customized styles on common controls. This is ByFar (or ByRef) gonna be the most used thing in Avalon, methinks. Skinning WinForms can often be like skinning a dragon (or do you scale a dragon? I don't know. I gave up dragonmeat after watching DragonHeart). Here, with a few simple lines of code, you can quickly create an app-wide skin - much like what Yahoo! has done with their Messenger. So that's the first project. Let's see how it goes.
Pro: The Worspace Zoom is fantastic! The flexibility is greatly helpful when you're working on 1600x1200 or higher.
[Going to code now]
Con: The tools (especially the "create" tools) don't switch back to the Pointer tool - quite annoying.
Pro: As I make the template (no code writen yet - all GUI!!) for the skin, I am finding the instant binding (see image below)...
... to be quite helpful. You just select the property, you get a menu, select TemplateBinding > [property-to-bind] and the object (a rectangle shape object in this case) gets its property value (height) from the control's property. Zero code still. 
Well, handwritten anyways. As far as I have seen, this kind of binding is available on all properties which can accept binding of any sort.
I have now created the metallic button with th Silver XP style colors (suggestion for Microsoft: Allow selection of SystemColors in the gradients et al.) and all that's left is create the animations for OnHover OnLeave and a ContentPresenter where the text will be shown.
[Back to coding...uhh, designing]
Okay, now I have two timelines that animate the gradient of the rectangle, and I've added the event-analogs of timelines - "triggers" - to each timeline (ie, MouseEnter and MouseLeave). Eventually we will need MouseDown and MouseUp too.
fxbesh_1.zip (6.54 KB) - I botched up in he gradient animation. I moved the GradientStops. I should've changed their colors!! You can see the stuff I've made so far by running this EXE in the zip. You will need the JanCTP of WinFX Runtime installed. It's about 16MB and can be found here.
Another suggestion for MS: Middle-click/mouse-scroll zoom/pan functionality is BADLY needed.
Con: <DataVoice>Captain, sensors show an anomaly.</DataVoice> A warning to all you Visual Studio devs trying your hand at EID: The "Library" (toolbox-analog) DOES NOT SUPPORT DRAGGING, nor does it create a control if you select it and click on the design surface. You have to draw manually.
Pro: Wanna see how scary a design workspace can be? Check out my personalized workspace in EID here. This is where the flexibility of EID's UI shines! Auto-collapse, auto-sizing. Wonderful. Just plain wonderful!!
I'm having a bit of trouble adding a ContentPresenter. It keeps wiping out the Rectangle I made. I've added the code manually. In hindsight, I think this was because there was no container control. Recommendation: Add a Grid or Canvas or something to the base of the ControlTemplate and put graphics and sub-controls on that. That should solve this problem.
Now I'm gonna bind the content presenter ... which in code looks like this:
<ContentPresenter Content="{TemplateBinding Content}" />
Even in code, this is a quick and easy job!
Con: EID does not have IntelliSense and code coloring/formatting - YET. It does have basic coloring when you enter Code mode for VB or C#.
Beta-thing: Even when you make a VB project, the project icon has a green # on it. Guess MS still hasn't gotten all the icons decided yet. :P
Btw, in EID, when you highlight text anywhere, even the highlight is a gradient, rounded-corner rectangle! Is this sweet or what?!
Okay, going back to position the ContentPresenter.
[15 minutes later] ContentPresenter is now done. All properties are bound. Works like a charm. I changed the gradient to a more better looking one. The animation looks MUCH better now. It's still a bit chunky, but good enough for this exercise.
While making the skin for our second button, a ControlTemplate by the supercool name of "ButtonControlTemplate1" was created. It is part of the "Form"'s resources. So now, if you add a new button and select ButtonControlTemplate1 as it's template, voila - it will inherit that template. In the zip below you will find one more button in the app and it uses that template as well. The full XAML code and EID project is included. Click here to download it. Btw, I remembered I already had a project called FXAurek, so this one is now FXBesh.
Next: Messing with a List control - custom styles, custom formatting, and other cool stuff.
<WorfVoice>Q'pla!</WorfVoice>
WARNING: The code and downloads presented in this blog post are released under IDGAD License (I-Don't-Give-A-Damn). Feel free to use it anywhere you want.