Geeks With Blogs
Bander Alsharfi yet another WinFX fan!

Writting applications using the Longhorn Application Model is not hard at all, It's just a bit different. In the other application models you will be interfacing with Win32 API, but for LH Application Model; you will be using WinFX API. To understand what I'm going to talk about in this tutorial you must have at least a basic knowledge of what is WinFX.If you already have,skip the following defenitions.

  • "Windows Communication Foundation" is the name for Microsoft’s unified programming model for building connected systems, formerly known as code-name "Indigo". It extends the .NET Framework 2.0 with additional APIs for building secure, reliable, transacted Web services that interoperate with non-Microsoft platforms and integrate with existing investments. By combining the functionality of existing Microsoft distributed application technologies (ASMX, .NET Remoting, .NET Enterprise Services, Web Services Enhancements, and System.Messaging), Indigo delivers a single development framework that improves developer productivity and reduces organizations’ time to market.
  • "Windows Presentation Foundation" is the name for Microsoft's unified presentation subsystem for Windows, formerly known as "Avalon". It consists of a display engine and a managed-code framework. "Windows Presentation Foundation" unifies how Windows creates, displays, and manipulates documents, media, and user interface. This enables developers and designers to create visually-stunning, differentiated user experiences that improve customer connection. When delivered, "Windows Presentation Foundation" will become Microsoft's strategic user interface (UI) technology.
  • "Windows Workflow Foundation" is the name for Microsoft's strategic programming model for building workflow enabled applications. It consists of a managed-code framework and designers for Visual Studio .NET. Windows Workflow Foundation includes both system workflow and human workflow. It supports a wide range of scenarios including: workflow within line of business applications, page-flow, document-centric workflow, workflow for service oriented applications and workflow for systems management. The Windows Workflow Foundation developer experience is consistent with existing WinFX technologies and includes support for VB and C#, debugging, a graphical workflow designer and the ability to write your workflow completely in code. Windows Workflow Foundation also provides an extensible model and designer to build custom activities which encapsulate workflow functionality for end-users or for re-use across multiple projects. Windows Workflow Foundation will be used across many future Microsoft products including Office “12”, BizTalk Server and the Microsoft Business Solutions. Most applications can benefit from the asynchronous state management features of the workflow model, the rapid development features of the designer, the potential for end-user flexibility, and the increased visibility into run-time code execution.  

In addition, to be able to write and complie the tutorial, you will need to install the January CTP of WinFX SDKJanuary CTP of WinFX Runtime ComponentsMicrosoft Visual Studio Code Name “Orcas” Community Technology Preview - Development Tools for WinFX (If using Microsoft Visual Studio 2005 RTM), and Mike Swanson's XAML Plugin for Adobe Illustrator CS2 (If you don't have Adobe Illustrator CS2 you can Day 1and start straight from Day 2)

First we have to create our scene, we can either draw it easily using Adobe Illustrator CS2 or using Paths in XAML.
I have created the following layout using Adobe Illustrator CS2 then simply used the XAML plugin.

Layout in Illustrator:

If you don't have Illustrator you can simply create it using Paths in XAML, try this code:

<
Window x:Class="Window1"

xmlns="http://schemas.microsoft.com/winfx/avalon/2005"

xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"

Title="WinFX TicTacToe" Height="513" Width="646">

<Grid>

<Canvas Width="Auto" Height="Auto" Grid.RowSpan="1" Grid.Row="0" Margin="4,5,4,131" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Column="0" Grid.ColumnSpan="1">

<Canvas>

<Path StrokeThickness="1.000000" Stroke="#ff221e1f" StrokeMiterLimit="1.000000" Fill="#fffded9e" Data="F1 M 432.500000,470.500000 L 0.500000,470.500000 L 0.500000,0.500000 L 432.500000,0.500000 L 432.500000,470.500000 Z"/>

<Path StrokeThickness="1.000000" Stroke="#ff221e1f" StrokeMiterLimit="1.000000" Fill="#ffd8e8ba" Data="F1 M 629.500000,469.500000 L 437.500000,469.500000 L 437.500000,49.500000 L 629.500000,49.500000 L 629.500000,469.500000 Z"/>

</Canvas>

<Canvas>

<Path StrokeThickness="4.000000" Stroke="#ff008dae" StrokeMiterLimit="1.000000" Data="F1 M 144.500000,27.500000 L 144.500000,450.500000"/>

<Path StrokeThickness="4.000000" Stroke="#ff008dae" StrokeMiterLimit="1.000000" Data="F1 M 413.000000,159.909668 L 19.000000,160.078125"/>

<Path StrokeThickness="4.000000" Stroke="#ff008dae" StrokeMiterLimit="1.000000" Data="F1 M 273.500000,29.500000 L 273.500000,452.500000"/>

<Path StrokeThickness="4.000000" Stroke="#ff008dae" StrokeMiterLimit="1.000000" Data="F1 M 413.000000,289.910156 L 19.000000,290.078125"/>

</Canvas>

</Canvas>

</Grid>

</Window>

We have the scene, next step will be creating the project. Now go to Microsoft Visual Studio 2005, create a new project and call it “WinFX_TicTacToe”. Notice code name Cider designer, We have 3 tab buttons on the bottom, Design, Xaml, and Source. We will get a full understanding of every tab use in our way into finishing TicTacToe, further more we can notice that we can drag and drop controls into the window, this reminds me of the time were I had to code every thing using XAML! belive me it was a very long process. Back to our tutorial; now goto the Xaml tab and replace the current code with the new code either generated by the plugin or the copied from my blog. Goto back to the Design tab, and yes we have our scene built in XAML, now try it out; hit ctrl + F5.

Now let's drag a TextBlock control and add drop it on the bottom of the green area. Notice that Cider gave us the ability to interact with XAML controls easily, look on the properties panel we have new number of properties and stuff to play with, for now just click on the text property and enetr the following text: “WinFX Tic Tac Toe, Version 1.0 http://geekswithblogs.net/bander”, goto TextAlignment property and select Justify, and finally goto TextWrapping property and select Wrap. Go to the Toolbox and drag an Image control and drop it in the upper right corner of the window. On the Properties panel, click on the Source property and set the value for where your logo resides, for me; it was Jordev's logo. For you guys who don't have Visual Studio, here is the code:

<Window x:Class="Window1"

xmlns="http://schemas.microsoft.com/winfx/avalon/2005"

xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"

Title="WinFX TicTacToe" Height="513" Width="646">

<Grid>

<Canvas Width="Auto" Height="Auto" Grid.RowSpan="1" Grid.Row="0" Margin="4,5,4,131" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Column="0" Grid.ColumnSpan="1">

<Canvas>

<Path StrokeThickness="1.000000" Stroke="#ff221e1f" StrokeMiterLimit="1.000000" Fill="#fffded9e" Data="F1 M 432.500000,470.500000 L 0.500000,470.500000 L 0.500000,0.500000 L 432.500000,0.500000 L 432.500000,470.500000 Z"/>

<Path StrokeThickness="1.000000" Stroke="#ff221e1f" StrokeMiterLimit="1.000000" Fill="#ffd8e8ba" Data="F1 M 629.500000,469.500000 L 437.500000,469.500000 L 437.500000,49.500000 L 629.500000,49.500000 L 629.500000,469.500000 Z"/>

<TextBlock Canvas.Left="446" Canvas.Top="386" Width="176.646666666667" Height="83.66" Name="lblAbout" TextWrapping="Wrap" Text="WinFX Tic Tac Toe, Version 1.0 Written by: Bander Alsharfi, http://geekswithblogs.net/bander" TextAlignment="Left"></TextBlock>

</Canvas>

<Canvas>

<Path StrokeThickness="4.000000" Stroke="#ff008dae" StrokeMiterLimit="1.000000" Data="F1 M 144.500000,27.500000 L 144.500000,450.500000"/>

<Path StrokeThickness="4.000000" Stroke="#ff008dae" StrokeMiterLimit="1.000000" Data="F1 M 413.000000,159.909668 L 19.000000,160.078125"/>

<Path StrokeThickness="4.000000" Stroke="#ff008dae" StrokeMiterLimit="1.000000" Data="F1 M 273.500000,29.500000 L 273.500000,452.500000"/>

<Path StrokeThickness="4.000000" Stroke="#ff008dae" StrokeMiterLimit="1.000000" Data="F1 M 413.000000,289.910156 L 19.000000,290.078125"/>

</Canvas>

</Canvas>

<Image VerticalAlignment="Top" HorizontalAlignment="Right" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" Margin="0,5,4,0" Width="192.65979381443327" Height="44.329896907216494" Name="Image1" Source="file:///C:/Documents and Settings/bander/My Documents/Visual Studio 2005/Projects/WinFX_TicTacToe/jordevlogo.png" />

</Grid>

</Window>

and taraaaaaaaaaaa! We have created our scene, let's try testing it; hit ctrl + F5, It should look like somthing like this:

Can't wait for Day 2 =)

Posted on Wednesday, January 25, 2006 11:20 AM | Back to top


Comments on this post: Learning WinFX (Day 1): Building TicTacToe using Windows Presentation Foundation (WPF)

# re: Learning WinFX (Day 1): Building TicTacToe using Windows Presentation Foundation (WPF)
Requesting Gravatar...
Cool stuff...
I use TextBoxes to draw rectangles =p
much eaiser.. loool
Left by Chris on Jan 26, 2006 10:13 AM

# re: Learning WinFX (Day 1): Building TicTacToe using Windows Presentation Foundation (WPF)
Requesting Gravatar...
it's amazing , Well Done dude :)

let's try in the next sessions to add some enhancements such as let's see how can we fill the background with two colors ?! , let's see how can we force the WPF to call some functions from a user-defined class ?! , let's see how can we change the skin of the app. at the runtime.

really cool Bander :) ...
Left by Mohammed Zayed on Jan 27, 2006 2:00 PM

# re: Learning WinFX (Day 1): Building TicTacToe using Windows Presentation Foundation (WPF)
Requesting Gravatar...
RE: Zayed
This is the first day in the tutorial my friend, you have to wait; we build the interface then we write code... It's not a XAML tutorial as in such; basicly it's a walk through in building a TicTacToe using XAML.
Left by Bander Alsharfi on Jan 27, 2006 4:34 PM

# re: Learning WinFX (Day 1): Building TicTacToe using Windows Presentation Foundation (WPF)
Requesting Gravatar...
First very interesting lesson, we are going to see if second it is even but!
Left by Chuchot on Apr 30, 2006 7:09 PM

Your comment:
 (will show your gravatar)


Copyright © Bander Alsharfi | Powered by: GeeksWithBlogs.net