Yesterday I have a time to let some folks know about WPF, cause only one day, guess not to satisfied since I could not shared as lot as I know, I believe If I can help someone about it , it will help me also to knew better kind of knowledge.
Some part that's shows yesterday was:
- WPF Concept
- XAML + Analogy
- Layout + Composition + Binding
- Style + Data Template + Control Template ( I feel that we need this session more deeply and so it does with binding sesion)
- Simple Animation
- Some demo samples from AvalonPatien + my latest project as well + my best practice sample
- 1 Video
- 1 Labs How WPF do with Astoria
I thought knowing the XAML is important rather know how to use Blend... since it concern on XAML I've asked them to used KAXAML and VS08, (I believe they will do more better when playing with blend, after knew how do XAML in right way).
Hi Teddy+Maria(jatis), Yoga , Benny, Juneidi , Agung, Wawan (wa-one), Mr. Gunawan ( whom expect silverlight ..) thanks for let me share for you guys... and so Satria + Norman from MS.. he guys...you're pushing me again... thank u.
I wish I could have another oppty to explain better way and to describe wpf more deeply.
-Malky
And not forget to mention pak tennis who helping installed all tools for all pc < He ngana pe wullur kita sama jo!, sorry pak saya menado card *>
* Menado Card -> Anak keturunan menado , tp gak pernah bisa bicara manado dan Sering ke Manado.. <Sorry pa Kita cuma sekali jo..liat kita pe papah punya tanah <that's because he passed away....>
As you know doing with wpf, you'll see the common XAML specification rules that map .NET namespace like this:
The things you should understand that the root object element in XAML file at lease must specify at one (1) XML namespace used to qualify itself and any child elements.
how about its companion (it usually come up and add automatically with VS2008, when you're adding new window , page or even usercontrol )
This is XAML language namespace which maps to type in System.Windows.Markup namespace, it also define some directives for XAML compiler or parser. Note that: it appears as attributes to XML element for a while look like properties but actually are Not! anyway it just a convention like in c# using System; directive or event in VB imports System.
If you need to test your code <it might be usefull sometimes, which I don't recommend it under serious apps> , Create a new project from visual studio just point to new WPF application or open your saved project. After that add new item under your selected project, under wpf select class or flowdocument , after new class or new flowdocument appear, just replace all the code on your new class/flowdocument with this code below. ( when you're create a new class make sure it save with xaml extention file , mine in this sample named Tes.XAML)
<Button xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="50" Content="Hello Click Me Please !" />Just after you're saved this xaml file, now you can test it as your StartupURI and run it. It should appears like this :
note that the runtime compiler know how to show the button, it not show only the button, instead it automaticly use the page class as parent container of the button, if you open this xaml file using IE , you will also see almost the same result :
But the point when test this result is, if you open your solution explorer, under obj\debug (make sure you already click 'show all buttons' on solution explorer toolbar), you'll see similar result as I have, in picture below:
If you're notice, the parser and compiler create another file respectively, since I have App.xaml it will have App.g.cs so Windows1.g.cs and not for Tes... other things is compiler also create BAML (Binary Application Markup Languange) which xaml file that compiled, including Tes.Baml and Window1.Baml, this BAML file actually will embedding in assembly being built, and performing the plumbing that connect to XAML (using procedure code..sure!)
Back to our sample, we'll learn interesting point when we create a event handler for our Tes.xaml file.
<Button xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Tes"
Width="200" Height="50" Content="Hello Click Me Please !" Click="Click_This" >
<x:Code>
<![CDATA[
void Click_This(object sender, RoutedEventArgs e)
{
MessageBox.Show("XAML IS COOL !");
}
]]>
</x:Code>
</Button>I've added couple things now, you see that the Italic and bold was new declarative, eventhandler and code:
- x:Class="Tes", tell the compiler that I have declared Tes class under my XAML
- Create a new click event handler for button that point to click_this procedure
- Add <x:Code> , meaning that embeds procedural code to be inserted into the class specified by x:Classname (in this sample x:Tes)
You can try to run it, and click the button it should have result this:
Now the interesting part is, again open your solution explorer, you notice that Tes.BAML also companion with Tes.g.cs
If you try to open again the Tes.xaml, the parser will give error that you have to compiled the specified events, that means that the parser is only responsible to render the xaml not the procedural code. ( Btw WPF support run on Browser that's called XBAP, XAML Browser Application )
Conclusion
- One XAML should specify at least one XML namespace
- Pure XAML without proc should appear with Browser
- compiler will create xx.g.cs (for c#) so it does with vb I guess xx.gc.vb, when x:class declarative was inserted
- IMHO, writing proc code inside XAML is not recommended since misleading with the natural strategy to divide Designer and developer as ASP.NET has !!
All the vampires walkin' through the valley
Move west down Ventura Boulevard
And all the bad boys are standing in the shadows
And the good girls are home with broken hearts
Free Yes I'm free... Free fallin............If you know song from Tom Petty and Heartbreaker that's the song That I'm feel right now...
Perhaps it's time to share about what I know little bit about WPF...
Oh my 3 December 08... was the day of my life... first of all "WPF" apps that we've built made the minister amazed so all the top official was giving applause when the presentation is closed, second we also have a credit by Microsoft Indonesia for the best Micro ISV, the third one is bonus ..get sleep as much as I could after tortured with tight schedule and lot's of pressure.
When yesterday morning comes I've still debug my apps at 5.30 AM, make sure it works fine for 8.00 AM presentation, although my schedule was get slept at 4.00 AM ( it turn out that I've got my free slept at 16.00 ) btw my debugging is painless while I'm powered with HP nw8600 Workstation (4 XEON proc + 4 GB RAM + NVidia QUATRO 512 MB )
In the last 4-5 months I deal with WPF seriously, Adam Nathan's books was the one that I've brought everyday and everywhere... my default browser site is "wpf msdn forum" .. and my tools in VS2008, Blend, KAXAML, Reflector and not to forget SQL Server 05/08.
I'm not saying that it's over yet, it just the beginning to reach another set of goals... one of my goals is just simply make WPF and Silverlight as one of our specialized, and much help others to use both of them to know as much as I do.......
Thanks for my family <my beloved wife and 2 princess 4 understood my crazy work time>, my team Mario , Iksan, pojok.com at dep...nas <Pak ade, Bu Retno, Boss Manik, Abang, Heru (Agus....oh guss), Aing, fu-kleb, dil-dil, danny.. and others..> not to forget Risman, Norman, Satria from Microsoft thanks to encourage us (while we go down) for make it happen with ISV Empower products and lots of inspired...........
Recently I took my week end to found out what Virtual earth can do, as I have such an experience using MapInfo MapX (now MapXtreme) for couples of my old projects, for some reason I figure it out that might be interesting if I can combine VE and Silverlight.
In my sample here, I'll show you how we can easily create lines in Virtual Earth and silverlight application will following the lines, just like a route.
Click here to see how it run.
(*) Note If you are using IE8 beta, you should click Toggle with IE 7 Emulation mode.
If you interesting about virtual earth just go to http://dev.live.com/virtualearth/sdk/ and you'll find interactive sample that live.com provide to learn it fast.
In this sample the I'm requesting VE to load map of Jakarta and show Monas at center of the map, the code is quite simple using javascript :
- provide the location latitude and longitude as center of the map using VELatLong
- how many zoom that you preferred ?
- gave a type of map you wanted , a for 'aerial' , r for 'road'
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(-6.17605430, 106.82762146), 15 ,'a' ,false);
} and the result below
Stacking Silverlight with Virtual Earth, and Create Silverlight Transparently
Cause silverlight will run on the top of VE , we have to make silverlight component position on top VE component.
<div id='myMap' style="position:relative; width:640px; height:480px">
</div>
<!-- Silverlight Component -->
<div id="silverlightControlHost">
<object id="silverlight" data="data:application/x-silverlight," type="application/x-silverlight-2-b1" width="640px" height="480px"
style="position: absolute; z-index:100; top:0px; left: 0px;">
<param name="background" value="Transparent" />
<param name="windowless" value="True" />
In order to make the silverlight looks transparently, some properties we should changed is background and windowless
- Set background value to Transparent
- Set windowless value to True
In the silverlight XAML make sure usercontrol properties background set to transparent.
Draw Lines On Virtual Earth
We can using VEShape class to drawing shape onto map, currently VE only support three type of Shape, they are : Polygon, Polyline and pushpin.
In here because I like to draw using the mouse, I need to attached mouse event. These function below is tell the map that I'm register on OnmouseDown and OnMouseUp Event on VE, that shall be pointed to my MousehandlerDown and MouseHandlerUp function,
map.AttachEvent("onmousedown",MouseHandlerDown);
map.AttachEvent("onmouseup",MouseHandlerUp);
When the mouseeventdown occurs I setup a couple things they are :
- Get The Position X, Y
- Convert to LatLong
- And Save Position Current Point
// Where We Are
var x = e.mapX;
var y = e.mapY;
// Convert TO VEPixel Class
pixel = new VEPixel(x, y);
// Convert To LatLong
LL = map.PixelToLatLong(pixel);
// Save To Array Collection
collLL.push(LL);
// Is This First Time Click ?
iClick +=1;
// Tell Map We Handle This
return true;
After that on mouseeventUp I called drawlines function to draw the lines.
// Convert To LatLong
var ll1 =convertToLL(val1);
var ll2 =convertToLL(val2);
// Create Polyline Object
var shape = new VEShape(VEShapeType.Polyline, [ ll1, ll2 ]);
// Set Line Color To Red
var mycolor = new VEColor(255, 0, 0, 0.8);
shape.SetLineColor(mycolor);
shape.SetFillColor(new VEColor(0,100,150,0.5));
// Size Of The Width (max 5)
shape.SetLineWidth(3);
// Tell VE that I do not need Icon
shape.HideIcon();
// Add SHape to Map
map.AddShape(shape);
In code above you see that VE provide us rich class and function to manipulate map instanly.
Speaking HTML and Silverlight Managed Code
In order to communicate with silverlight from HTML, I modify App.xaml.cs on mysilvelight application
private void Application_Startup(object sender,StartupEventArgs e)
{
// Load the main control
this.RootVisual = new Page();
HtmlDocument doc = HtmlPage.Document;
HtmlPage.RegisterScriptableObject("mysilver", RootVisual);
}What actually happen, I'm telling HtmlPage class to register page class representing by rootvisual object as mysilver in HTML page.
In page class I also set "[ScriptableMember()]" attributes so they can safely call by my javascript from HTML. ScriptableMember attributes is part of System.Windows.Browser namespace.
[ScriptableMember()]
public void
AddPoint(double x, double y)
{
_playpts.Add(new Point(x, y));
}AddPoint function above was called by mouseeventUp event VE from HTML, and saved on _playpts generic List of point.
Play with Animation
In Page.xaml, I added storyboard under usercontrol.resources which basically will play the animation instantly.
<Storyboard x:Name="Storyboard1">
<DoubleAnimationUsingKeyFrames x:Name="dakX" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" BeginTime="00:00:00">
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames x:Name="dakY" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" BeginTime="00:00:00">
</DoubleAnimationUsingKeyFrames>
</Storyboard>On sample above, the target name and property is also setup, especially for TargetProperty value, I've define that X and Y will be mark as target. As position will move dynamically, there is a function will generate KeyFrames during runtime, so rectangle object will following keyframes based mousedown event on HTML where the map reside.
private void GenerateKeyFrames()
{
for (int i = 0; i < _playpts.Count -1 ; i++)
{
SplineDoubleKeyFrame newsdkfX = new SplineDoubleKeyFrame();
// Set KeyTime
newsdkfX.SetValue(SplineDoubleKeyFrame.KeyTimeProperty , string.Format("00:00:0{0}",i+1));
// Set Value X Move
newsdkfX.SetValue(SplineDoubleKeyFrame.ValueProperty, _playpts[i + 1].X - _playpts[0].X);
dakX.KeyFrames.Add(newsdkfX);
SplineDoubleKeyFrame newsdkfY = new SplineDoubleKeyFrame();
// Set KeyTime
newsdkfY.SetValue(SplineDoubleKeyFrame.KeyTimeProperty,string.Format("00:00:0{0}", i+1));
// Set Value Y Move
newsdkfY.SetValue(SplineDoubleKeyFrame.ValueProperty, _playpts[i + 1].Y - _playpts[0].Y);
dakY.KeyFrames.Add(newsdkfY);
}
}After Storyboard acomplished completed of storyboard event will fire to hide the Silvelight host application on HTML page.
HtmlPage.Document.GetElementById("SilverlightHostControl").SetStyleAttribute("visibility", "hidden");
Creating such an application using both VirtualEarth and Silverlight is challenge for me, I'll look more deep to see how their collaboration could create interesting and powerful application.
Regards
Finally I'm finishing my sample articles on this blog, I'm just worried with the language I choose when writing this article but I prefer to bahasa because I think is more appropriate this time:
This sample takes me 3 days to finished the articles and I carefully learn it from the expert ( * 2 Scott names ) that I recently back and forth reading their explanations.
You check it on this page as Part I and here Part II, this page quite enough long to described about what I did because I like to share it.
You can download the source code here and enjoy it for free (if you're happy) !
I am happy while Scott Morrison gave a quick feed back since I'm asking about DataGrid Behaviour.
* One is Scott Guhtrie and Scott Morirson who actually The PM on DataGrid development on Silverlight 2.0
- Cheers
Kemane aja sih..... well, beberapa orang menanyakan hal tsb jika lama tak jumpa. Shame for me also that I have not update my blogs... cuman 1 page doank dan tahun lalu lagi....btw Since I was amazed with MS done in Silverlight and 3.5 Framework, I've just realized how amazing this technology ... that I shall learn again and update with a tons of new exciting tools & platform.
Starting 2 weeks ago I just research and playing with silverlight 2.0, I do appreciate what they've done in 1.0, well it does not enough make me so enthusiasm, but this new verson 2.0 (still beta) was rock for me... in next post I'll share my working sample of silverlight 2.0.
cheers
Kita sibuk dengan tanggung jawab secara pribadi dan profesionalisme kita, namun kadang ada hal lain yg perlu kita lakukan untuk terus melakukan hal yg terbaik sesuai dengan kapasitas dan keinginan kita, menulis blog tidaklah mudah untuk saya, waktu yg tersita dan lainnya mudah mengarahkan perhatian ke segala hal yg membuat kita larut dalam kesibukan dan obsesi kita.
Namun sesuai yg di tulis oleh scot hanselman agar terus keep up as good developer, menulis dan sharing suatu yg baik untuk dicoba, sebenarnya sejak beberapa tahun yg saya sering membaca tentang local .NET hero kita yg kita harus 'thumbs up' kepada mereka Agus Kurniawan , Norman Sasono dan risman merupakan salah satu yg terbaik ( tanpa melupakan dondy , saya jg liat zeddy jg cool banget handling issue tentang thread), saya sendiri belum pernah mempunyai kesempatan bertemu dengan mereka secara langsung, namun cukup membaca hal yg telah mereka lakukan membuat kita yakin dengan 'capabilty' orang Indonesia.( no effense ) 
Beberapa temen komunitas ms seperti krisna, peter even arikun, lama tidak jumpa karena kesibukan saya dan lainnya, tapi mungkin ini sekarang waktunya untuk sering mampir lagi ke kegiatan yg ms lakukan, terutama developer events.
Semoga ini sebagai permulaan untuk sering menulis dan membagi pengetahuan tentang .NET