.NET 3.0 WPF Tools && Examples

• Download demo project (includes src code) - 734 Kb

Introduction

eXtensible Application Markup Language (XAML, pronounced ZAMMEL) is coming you better believe it. For those that havent heard of XAML, it is the way to code for Microsofts new presentation layer, Windows Presentation Foundation (WPF, codenamed Avalon).

XAML is an XML style markup language, the XAML markup is responsible for the presentation of the graphical elements, much the same as HTML markup.

XAML code can be developed using a multitude of tools, such as Zam3D, XAMLPad which is provided with the .NET Framework 3.0 SDK, Visual Studio 2005, and the new Expression Blend (previously Expression Interactive Designer).

One of the main ideas behind XAML (so I think anyway) is that the graphical front end can be developed by someone with an arty nature, and then handed back to a developer who can import the arty code (the XAML) and then code the backend .NET code to drive the interface. Both the graphical designer and the software developer should be able to freely transfer work using the same lanugauge, XAML.

Thats the basic idea anyway, but this is not what I am trying to put across in this article. In this article I want to showcase some of the concepts of what can be done in XAML, and what tools one can use for creating XAML, and also how these tools may be used. I will also be explaining how I achieved all the different elements of the demo application.

I will not be talking about how to hand code XAML, I will be purely focussing on some of, the most popular (I think anyway) XAML authoring tools.

If you really dont know your XAML from a CAMEL I suggest you check out Marc Cliftons article at XAML Resources which should bring you up to speed.

Ok so lets break down what this article will cover :

1. CIDER

Brief discussion on the CIDER Visual Studio add in. Which enables VS users to create XAML designs simply by using drag and drop from the toolboxes, as we would for a .NET 2.0 project.

2. Expression BLEND (Previously Expression Interactive Designer, And Codenamed Sparkle)

Brief introduction into what Expression BLEND looks like

3. Using Expression BLEND To Create The DEMO Application (Attached)

Disection of the DEMO app, and how it fits with BLEND

4. Visual Studio 2005 Integration

Taking a project from BLEND (EID, Sparkle) into Visual Studio 2005

This should be enough to get us going, so lets march on.

5. The Code

Yeah the techie bit, the code.

Article Code Description

I only seriously starting looking into XAML about 2 days ago (before that I had, had a cursory glance and a wink at it, but nothing serious).

For this article I decided to try and create an application using the existing tools out there, after all XAML is being generated by tools right now, so why not use them. I am not saying, that we all wont need to know XAML, we will, tha'ts a given, but before I sat myself down to read my copy of Charles Petzolds book Applications = Code + Markup, (all 1002 pages of it), I just wanted to see what I could achieve with the tools, as this is probably what most people will be using in their day to day activities.

So this article can be seen as one mans journey into the unknown. I am pretty happy with the end product. In fact ill breifly describe what I managed to achieve. So what does the attached app do, well it show cases the following XAML concepts :

Attached Application Functionality :

• Custom templates for button controls
• Custom template for slider control
• Databinding between slider and a textbox
• Alpha shading on textboxes
• Animations of button on mouse overs
• Animations of text on mouse overs
• Playing of multimedia of the users choice

Ill give you a sneaky peak, at what the application looks like when its running, though its not that obvious whats animated and whats not from a static screen shot. Later on I will describe each of the application functionality points in more detail, with screen shots where needed.

This may not look too impressive to some of you but I assure you there lots of neat stuff here, you will need to play with the real application to see whats animated and how it all fits together. You can download the app later, for now lets read on, and have a look at some XAML fun.

Prerequisites

Before you read on you should you should ensure as a minimum you have the following items, if you want to run the attached application.

• Microsoft .NET Framework 3.0
• Visual Studio 2005
• A good fat machine with plenty fo RAM (yes lots 1GB plus, I have 1GB and its only just OK)

And optionally CIDER if you want to have a look at that, which is available at "Cider" - The Visual Studio Designer for WPF ("Avalon")

1. Cider

Ive decided to start this article discussion with brief intro into WPF via the use of Cider, which is a Visual Studio add in, for creating WPF applications. By looking at Cider 1st, I am hoping that you will be broken in to the world of WPF slowly, and will be eager enough to read on to some of the other more intersting parts of this article.

Ok so, once you have all the Prerequisites installed, and have installed Cider, you will have the option to create new WPF application within Visual Studio. Lets have a look at that shall we :

We can see that one of the project options when starting Visual Studio is now a WPF project as shown in the figure below

So if I choose to accept this, we'll continue to create a WPF application.

We can see once Visual Studio loads, we have some new tabs within the normal interface, we now have a Design/Xaml tab, as shown here.

What this tab allows us to do is view the XAML code or the GUI design (probably stating the obvious here, but there you go)

Let's just have a look at the boiler plate code, that creating a new WPF application gave us.

Visual Studio / Cider gives us the following XAML for free, which is called Window1.XAML

So this is the XAML markup to describe the user interface, but shouldn't there be some code somewhere, written in something we have a hope of understanding. Well yes there is, its a .NET code file (C# in my case)

And it looks like the following, code snippet (Window1.XAML.cs)

This is not too scary now is it. In fact any of you that have done ASP .NET, should be fairly happy with the idea of a code behind file, this is fairly simliar isn't it. Basically all the presentation components and their markup are within one file (.XAML) and the code to do the logic is in another code file (.XAML.CS or .XAML.VB, if you are using VB .NET).

So the next step would be to actually add some components to the page, how do we go about doing that.

Providing we have the Design tab selected, the toolbox will contain numerous controls that may all be dragged to the forms workspace area ( I have noticed that some people also call this the artboard area )

This example shows that I have placed a single WrapPanel, which when placed would have been created like

With the start and closing of the element all on the same line. This is pretty useless, as the WrapPanel is a container, so how do we make it contain other controls. Well I selected the Xaml tab (which will clear the toolbox of controls DONT worry, they come back in Design tab view) and split the WrapPanel element out so the start and close parts of it are on different lines. Then I moved the mouse into the area between the start and close of the WrapPanel element, switched to design tab view, and dragged some more controls (buttons) from the toolbox into the WrapPanel. And hey presto the WrapPanel then contained the buttons, and correctly wrapped them as it should.

It should be noted that using Cider, also allows us to click on a control and change its properties, as we would a .NET 2.0 appliction, by the use of the properties window. But be warned the properties are not the same, and some classes are even different, the MessageBox for example, expects new arguments and returns a new MessageBoxResult object. So be wary of that.

This is obviously a bit of a contrived example, the idea is that it's a brief intro into Cider. Its up to you to experiment with this stuff, this is simply showing you that you can do this stuff within a nice safe familiar environment, namely Visual Studio (ah, our friend)

Are you still feeling brave, and want more XAML concepts, and want to know how to use some of the other Xaml resources available, then read on.

2. Expression BLEND

Some time ago I downloaded the July CTP of Expression Interactive Designer (code name sparkle AKA Flash Killer), this product is now available as a BETA release, under the new name Expression BLEND.

In my opinion Expression BLEND, will be the core tool used to construct creative XAML projects. BLEND empowers (and no i'm not beeing paid to write this for Microsoft) graphical designers and coders to share the same language, any takers as to what these may be. CAMEL you say, no not quite. Its XAML.

Using BLEND the graphic designer, can do their magic, and then hand the entire project to the developer who can then add the .NET code to the application, for example to query a database, access a web service etc etc.

Of course if you fancy yourself as a bit of an arty dev, you could also dive into BLEND, its quite fun I think. Ive only been using it 2 days, and think it's fairly easy to use. With the exception of binding to an external XML data source, which worked 100% in static view, but would not render in run time. Grrrr. Never mind, so apart from that one gripe it has all worked out I think.

What this section is going to do, is discuss the basic layout of BLEND (I originally published this article using screen shots done using the July CTP of Expression Interactive Designer, which some folk didnt like, as BLEND is available for free download for a 30 day period, so Ive updated this section of the article for those folk and new folk

So lets start shall we.

What does BLEND look like, well when you start it, it will look something like the following diagram. Microsoft seem to be following the new Office 2007 idea, that the palettes are organized based on categories, for example to change how something looks, we would use the Apperance panel. Where as in normal Visual Studio 2005 (.NET 2.0 project) we would simply have a list of all the properties, and find the one we want and change it.

As can be seen there are several work areas and numerous palettes, that make up the environment, lets briefly discuss these :

Artspace

This is the main area, where the design will be shown, you may drag and drop .NET controls onto this surface from the Library Palette, or you may add the controls manually using the XAML tab.

Objects And Timeline Palette

Remembering that XAML, is a XML type langauge, so can be thought of as a tree. This palette shows the document heirachy, and allows the quick navigation to a document element by double clicking on the element name in the document tree. From this palette we can also create animations by using timelines. More on this later.

Tools Palette

This palette simply allow the user to grab, zoom, draw, fill etc etc

Projects Palette

This palette simply shows all the project files and references etc

Library Palette

This palette shows all the .NET framework 3.0 controls, which may be dragged onto the workspace. This is available by clicking on the down arrow at the bottom of the tools palette

Brushses Palette

This palette allows the changing of colors and brush type / style etc etc

Appearance Palette

This palette allows the appearance of a selected item to be changed

Data Palette

This palette allows external data sources to be added to the project, such as XML data sources, or standard CLR data sources, such as DataSet etc etc. Once these DataSources have been added to the project, they may be used to bind data against

Layout Palette

This palette allows layout changes to be applied to the selected item, such as size margin, as shown above really

Common Properties Palette

This palette allows the modification of items such as the tooltip, enabled state, cursor etc etc

Text Palette

This palette allows the text properties of the selected text to be changed.

Transform Palette

This palette allows the current object to be manipulated. It provides scaling, rotating, skew, flip etc etc

Timeline Triggers Palette

This palette allows us to control a timeline based on trigger. This is probably my favourite of the palettes, as it allows us to trigger animations. more on this in a minute

So that is the basic palettes covered, I hope that is a gentle introduction into BLEND.

Yeah great man, but how do we use it, to do something useful, I hear you say.

In the next sub section I am going to include screen shots of the attached demo applicaton, and talk about how each part was achieved, and finally I will include both the XAML (as was generated by Expression BLEND, and the Visual Studio 2005 modified .XAML.cs c# code behind file.

3. Using Expression BLEND To Create The DEMO Application (Attached)

Recall from the introduction, that I stated the attached DEMO application Functionality would be as follows :

• Custom templates for button controls
• Custom template for slider control
• Databinding between slider and a textbox
• Alpha shading on textboxes
• Animations of button on mouse overs
• Animations of text on mouse overs
• Playing of multimedia of the users choice

So how did I do that, lets look at them one by one.

Custom templates for button controls

One of the nice features of XAML is the ability to effectively re-skin any of the standard .NET 3.0 framework controls. If you dont like what it looks like out of the Library, simply change its template. That exactly what the demo application does. Lets look at that.

In this example I have simply placed a .NET 3.0 framework Button control onto the workspace. I then choose to "Edit a Copy of the Template"

This results in a new heirachy tree being shown for the button template we are editing.

What this heirachy tree is actually showing, is the objects that actually make up the default Button rendering (as it comes, out of the box (Library palette)). To change the way we want the buttons to look, we simply change the objects contained in the Buttons template tree. This is easily achieved, we can simply clear the current template objects, or simply re-style the ones that are there.

I opted for completely new objects. Lets have a look at that then shall we.

It can be seen that, I actually introduced a Grid object, who has 2 children elements :

• A ContentPresenter object which is used to show the buttons content (this could be text, images, video etc etc)
• A Rectangle object, which has a smooth corners applied to create the rounded button.

It can also be seen that there are several Button States, each of these can have a different effect on the new Buttons template objects. For example on the IsMouseOver state, I could have a blue background, and on the IsPressed state, I could have a Yellow backgound. New states may be added using the "Add Property Trigger" button within the "Objects and Timeline" palette. From here you will need to pick which the property that should fire the trigger. A list is available as shown here.

Lets have a look at one of these. Lets say we want to create a trigger on the width being equal to 15. Well we use the "Add Property Trigger" button, find the width property, and type 15 into the box that we have available to us.

From there you may then transform the selected object in any manner you see fit.

The result of all this messing about is that we now have a button which looks like the following figure. It is really a standard .NET framework button, but it just looks like we want it to look. This is what TEMPLATES are all about.

The image in this case maps to the ContentPresenter object within the Buttons template, and the curved box is the smoothed Rectangle within the Buttons template

Custom templates for slider controls

This was done exactly as for the button templating, the new slider rendering is as shown below:

Databinding between slider and a textbox

One of the nice faetures of .NET 3.0 / XAML is that you can bind the value of one control to the property of another. In the attached demo application, I have attached the value of the slider to a textboxs font size. Lets have a look at how to do this.

In the attached project I have bound a text box FontSize to a sliders value. So to do look at how this was done, we need to first select the textbox, then find the palette that has the Fontsize property (its in the text palette). Then we right click over the font size and get the databinding menu appear.

By selecting DataBinding this loads a screen which allows us to pick the binding provider and its field.

Thats it, now anytime the slider value is changed the TextBox FontSize will also change. See this is action :

Alpha shading on textboxes

This is not really about textboxes but more about Alpha shading, I am just using a TextBox cos its easy to do. To do this we simply use the appearance palette to change the change the opacity value, 100% is totally visible, 0% is totally invisible.

This is used to produce these nice effects on the demo application.

You can see that the "Welcome.wmv" text is semi-transparent, which is nice.

Animations of button on mouse overs

Ah now to animations, which I quite like. To do this we need to consider a couple of things, Timelines, Transforms, and Timeline Properties.

First let me tell you what Animation are and how they work at a conceptual level.

An animation could be moving, resizing, chaning color, rotating etc etc of an object, these changes occur in time, and need to be told when and how to start the animation process.

Lets look at this a bit further.

1. To create an animation sequence in time, we need to create a timeline
2. To change the object (button in this case), we need to transform it somehow
3. To start an animation we need to trigger it, somehow

So how do with do this in BLEND ?

Well firstly we create a new timeline, for example I have created a new timeline called "tlBtnPlay" for the Button object "btnPlay" which is shown below. What we do is use the "Create New Timeline button". Can you also see that the highlighted timeline is marked as "tlBtnPlay", this lets us know what timeline we are editing.

It can be seen that this contains frames 0-4. And that frame 2 and frame 4, have some strange dots on them. These are called key frames. In my example, at frame2, I flip the button object vertically like. (I did this flipping using the Transform palette)

This means that whenever the animation is run, when it gets to frame 2, the button object will be flipped. Thats all cool. But how do we trigger the animation then.

Well we use the "Triggers" palette, and create a new "Event Trigger" using the button provided. Then we can pick the controls property, such as mouseDown etc etc.

So this creates a trigger, but how do we then get the trigger to run some animation (a timeline basically). Well we use the "Add new Value" button

From here we can use the dropdown lists to select the timeline to play (1st dropdown), and the state of it (2nd dropdown), where the state is one of the following Begin, Stop, Pause, SkipToFill, Resume or Remove. I have used Begin, to state that the animation should begin when the trigger is raised.

So in runtime if I mouse over a button we will see the animation happen, as shown below.

It can be seen, that a tool tip is shown. This is because this is still simply a .NET 3.0 Button control, but its been re-styled through custom templating, and had animation applied to it. Isnt that cool ? I think so.

Animations of text on mouse overs

I also use some animation (done in exactly the same way) for some text at the bottom right of the demo app.

Playing of multimedia of the users choice

In the demo application the user may choose some mutimedia to play, and provided its a file I let them play, and its not too large, the media is played. This is all achieved on one of the button Click events. This used to be a piece of cake in Expression Interactive Designer, but I can not such method of wiring up control events in Expression Blend.

There used to be an Events palette (in Expression Interactive Designer, which is what I used to create ths 1st draft of this article) to bind the controls event to a method name. Mmmm, perhaps there something I am missing, but for now lets just carry on and see how we can deal with the multimedia item. If I find out, or someone tells me about the events problem, I will ammend this article again.

Then to do the multimedia work, it is achieved in 6 lines of code. Well neat.

The code to do this is basically as follows:

player = new MediaPlayer();
player.Open(new Uri(@mediaItem, UriKind.Relative));
VideoDrawing aVideoDrawing = new VideoDrawing();
aVideoDrawing.Rect = new Rect(60,60,imgMM.Height,imgMM.Width);
aVideoDrawing.Player = player;
player.Play();

4. Visual Studio 2005 Integration

After I had the C# project in visual studio, I added the code behind logic, although Expression BLEND does actually have a code editing pane, its not nearly as responsive/nice to use as within Visual Studio. I did experiment with the code editing in Expression BLEND, but did not find a way to debug, whilst in Visual Studio we know we can simply set a break point and then debug project as normal.

The other funny that happened in Expression Blend, was that I wanted to reference some .NET 2.0 Dll's, and it didnt like that. I suppose that fair enough, as Expression BLEND is really built to target the .NET 3.0 framework. This did, however frustrate me, as I wanted to be able to try out ideas in BLEND, but couldnt as it wouldnt let me reference the relevant Dll's. As I mentioned earlier, I was using a CTP version of BLEND (which was previously called Expression Interactive Designer), so perhaps this has all changed in the BETA/Final version.

Lets hope so.

5. The Code

Ok so lets see all the code, for the attached demo application

Scene1.Xaml

To be honest it simply not worth putting up all the xaml, as there are 100's of lines of it. The best place to look for this is within the demo application itself.

Scene1.Xaml.cs

using System;
using System.IO;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Navigation;
using System.Windows.Media.Imaging;
using System.Windows.Forms;


namespace XAML_MMedia
{
    public partial class Scene1
    {
        String mediaItem ="";
        String mediaItemShortName = "";
        String imgLogo="";
        String mediaType="";
        mediaChecker mc = new mediaChecker();
        double oldHeight = 0;
        double oldWidth = 0;
        bool fetchHeights = false;
        MediaPlayer player;
        

        public Scene1()
        {
            this.InitializeComponent();
        }


        private void getNewMediaItem(object sender, 
                System.Windows.RoutedEventArgs e)
        {
            try {
                System.Windows.Forms.OpenFileDialog ofd = 
                       new  System.Windows.Forms.OpenFileDialog();
                if (ofd.ShowDialog() == System.Windows.Forms.DialogResult.OK)
                {
                    if (!ofd.FileName.Equals(String.Empty)) {
                        FileInfo fi = new FileInfo(ofd.FileName);
                        mediaChecker.selFileType fileType = 
                                mc.getFileType(fi.Extension);
                        if (!fileType.Equals(
                             mediaChecker.selFileType.Neither))
                        {
                            double fSize = (double)fi.Length / 1024;
                            if (fSize < 10000)
                            {
                                mediaType = fileType.ToString();
                                if (fileType.Equals(
                                    mediaChecker.selFileType.Audio))
                                {
                                    imgLogo = "musicLogo.png";
                                }
                                else
                                {
                                    imgLogo = "videoLogo.png";
                                }
                                mediaItem = fi.FullName;
                                mediaItemShortName = fi.Name;
                            }
                            else
                            {
                                System.Windows.MessageBox.Show("The file" + 
                                    " you picked is too large\r\n" + 
                                    "The limit is 10 MBytes", "Error",
                                    System.Windows.MessageBoxButton.OK,
                                    System.Windows.MessageBoxImage.Error);
                            }
                        }
                        else
                        {
                            System.Windows.MessageBox.Show("You pick " + 
                                "an unsupported file", "Error", 
                                System.Windows.MessageBoxButton.OK,
                                System.Windows.MessageBoxImage.Error);
                        }
                    }
                    else {
                        System.Windows.MessageBox.Show("You need to" + 
                            " select a file", "Error", 
                            System.Windows.MessageBoxButton.OK, 
                            System.Windows.MessageBoxImage.Error);
                    }
                }
                else
                {
                    System.Windows.MessageBox.Show("You need to" + 
                        " select a file", "Error", 
                        System.Windows.MessageBoxButton.OK, 
                        System.Windows.MessageBoxImage.Error);
                }
            }
            catch (Exception ex) {
                System.Windows.MessageBox.Show(ex.Message, 
                   "An error occurred", 
                   System.Windows.MessageBoxButton.OK, 
                   System.Windows.MessageBoxImage.Error);
            }
        }


        private void playMedia(object sender, 
                System.Windows.RoutedEventArgs e)
        {
            try {
                if (mediaItem.Equals(String.Empty)) {
                    return;
                }
                else {
                    player = new MediaPlayer();
                    player.Open(new Uri(@mediaItem, UriKind.Relative));
                    VideoDrawing aVideoDrawing = new VideoDrawing();
                    aVideoDrawing.Rect = new Rect(60,60, 
                                  imgMM.Height,imgMM.Width);
                    aVideoDrawing.Player = player;
                    player.Play();
                    // create a drawing image to host the VideoDrawing

                    DrawingImage di = new DrawingImage(aVideoDrawing);
                    // freeze DrawingImage for performance

                    di.Freeze();
                    // assign DrawingImage as source of the image

                    imgMM.Source = di;
                    if (mediaType.ToLower().Equals("audio"))
                    {
                        if (!fetchHeights)
                        {
                            oldWidth = imgMM.Width;
                            oldHeight = imgMM.Height;
                            fetchHeights = true;
                            imgMM.Width = 0;
                            imgMM.Height = 0;
                        }
                    }
                    else if (mediaType.ToLower().Equals("video"))
                    {
                        if (fetchHeights)
                        {
                            imgMM.Width = oldWidth;
                            imgMM.Height = oldHeight;
                        }
                    }
                    Uri uri = new Uri(@imgLogo, UriKind.Relative);
                    BitmapImage bitmap = new BitmapImage(uri);
                    imgMediaType.Source = bitmap;
                            txtMediaType1.Text = mediaItemShortName;
                    txtMediaType2.Text = "Thats an " + mediaType + 
                                                 " media item";    
                }
            }
            catch (Exception ex) {
                 System.Windows.MessageBox.Show(ex.Message, 
                     "An error occurred", 
                     System.Windows.MessageBoxButton.OK, 
                     System.Windows.MessageBoxImage.Error);
            }
        }
    }
}

There is also a very simple helper class called mediaChecker.cswhich is as follows:

using System;
using System.Collections.Generic;
using System.Text;
using System.Collections;

namespace XAML_MMedia
{
    public class mediaChecker
    {
        public enum selFileType  {  Audio,Video, Neither  }
        private List<string> allowedVideoExtensions = 
                                   new List<string>();
        private List<string> allowedAudioExtensions = 
                                   new List<string>();

        public mediaChecker()
        {
            allowedVideoExtensions.Add(".wmv");
            allowedAudioExtensions.Add(".wma");
            allowedAudioExtensions.Add(".mp3");
        }

        public selFileType getFileType(String extension)
        {
            if (allowedAudioExtensions.Contains(extension))
            {
                return selFileType.Audio;
            }
            else if (allowedVideoExtensions.Contains(extension))
            {
                return selFileType.Video;
            }
            return selFileType.Neither;

        }
    }
}

What Do You Think ?

Thats it, I would just like to ask, if you liked the article please vote for it.

Conclusion

So now we're done I hope this was useful to you, even if I am not showing you how to code XAML from stratch, I hope I have shown you how to use some of the tools, and what each of the tools gives us, and also that you have learnt some of the key concepts, and what you can acheive with XAML. I have certainly found it to be fun, and at times frustrating, but overall quite cool.

Bugs

There are no bugs, I dont do bugs, I do "features", and there is certainly a "feature", that if one was been synical could construe as a "Bug", it is as follows:

Within the downloadable project, when the user picks a new MultiMedia source and plays it, the currently selected MultiMedia item (if there is one) will also play until completion. I tried to use a player.stop() but this complained about the player being frozen, and not being able to stop a frozen object. I tried to look into this and chased my tail for a bit, and kind of gave up, I am afraid to say.

However, it doesnt really effect what the article is trying to demonstrate, so I hope you will all not be too critical about this one thing. By all means be critical about anything, or even everything (if you are that sort), just not this one thing, cos i've told you about it, I hold my hand up to it.

History

• v2.0 20/12/06 Changed to use Expression Blend BETA 1 screen shots
• v1.0 15/12/06 Initial issue

You must Sign In to use this message board.

FAQ  Noise Tolerance Very HighHighMediumLowVery Low  Search Messages    Layout Expand All MessagesThread ViewNo Javascript (slow)No Javascript Preview    Per page 102550

Msgs 1 to 25 of 48 (Total in Forum: 48) (Refresh) FirstPrevNext

WPF Carousel ctrlnick 13:25 5 Nov '08   Hi Sacha, I am trying to build a WPF Carousel control, Can you please guide me to the best step by step resource , Thank You Happy Programming! Regards, ctrlnick ! Sign In·View Thread·PermaLink Re: WPF Carousel Sacha Barber 23:00 5 Nov '08   How about http://thewpfblog.com/?p=31 http://iltc.wordpress.com/2008/10/11/wpf-elliptical-layout-control-3d/ http://msdn.microsoft.com/en-us/library/aa480174.aspx#fluid%20whitep_topic5 Sacha Barber Microsoft Visual C# MVP 2008 Codeproject MVP 2008 Your best friend is you. I'm my best friend too. We share the same views, and hardly ever argue My Blog : sachabarber.net Sign In·View Thread·PermaLink Beginner question Alexey Vasiliev 2:28 18 Apr '08   Hi Sacha! Thanks for your articles! Step by step I am getting closer to WPF and XAML. In this example you created a lot of similar Timelines/Storyboards. Just for educational purposes I tried to create a button style that has that flipping animation inside. “Tools->Make Button...”. It creates a style, one nesting level deeper -> “Edit template...”. But now comes something that I do not understand. I can get the same behavior of my control by adding <storyboard> in <style.resources> and triggers in <style.triggers> OR by adding <storyboard> in <controltemplate.resources> and triggers in <controltemplate.triggers>. Control has than the same behavior of course. Where is the difference in both cases? Best regards, Alexey Sign In·View Thread·PermaLink Re: Beginner question Sacha Barber 23:01 5 Nov '08   COntrol triggers are for the templated control, and style triggers are used when you set a control to have a particular style. Sacha Barber Microsoft Visual C# MVP 2008 Codeproject MVP 2008 Your best friend is you. I'm my best friend too. We share the same views, and hardly ever argue My Blog : sachabarber.net Sign In·View Thread·PermaLink 5/5 Majid Shahabfar 0:33 1 Aug '07   Nice Article Sacha, I'm looking for an article or a set of APIs by which I become abale to drawing some shape in a design view environmet. somthing like Visio. Do you have any suggestion? Thank you in advance. Sign In·View Thread·PermaLink Re: 5/5 Sacha Barber 1:36 1 Aug '07   You could look at http://www.codeproject.com/useritems/another_graphic_engine.asp Sacha Barber A Modern Geek - I cook, I clean, I drink, I Program. Modern or what? My Blog : sachabarber.net Sign In·View Thread·PermaLink Re: 5/5 Majid Shahabfar 13:57 1 Aug '07   Thank you, but I'm looking for an API which be based on WPF. Sign In·View Thread·PermaLink playing videos donperry 4:38 25 Jul '07   I cant seem to get the media object to play videos, is there something i am missing? (not related to project) Sign In·View Thread·PermaLink Re: playing videos Sacha Barber 5:27 25 Jul '07   For the XAML media element to work you must have Windows Media Player 10 installed as a minimum. Other than that I believe that is the only restriction. Of course you need to have .NET 3.0 framework installed, thats a given. Other than that, it worked for me exactly as you see it. Sacha Barber A Modern Geek - I cook, I clean, I drink, I Program. Modern or what? My Blog : sachabarber.net Sign In·View Thread·PermaLink This is all very well and good, but... Patrick Sears 17:27 22 Jul '07   Where's the "Sacha is awesome" voting link?! Seriously, this has got to be one of the best "Get started with WPF" articles on CP. Along with Josh Smith's articles, it's actually possible to get a handle on this stuff, in particular, your very thorough treatment of how to create animations. I spent 2 hours last night trying to find a simple tutorial on creating WPF animations and the best I could find were examples so complex as to be utterly useless to me. Yours, however, was actually understandable. Thank you so much! The other thing you finally helped me grasp was creating control templates - I have found several examples with really awesome looking control templates, but I had absolutely no idea how they actually created them. Your very, very simple explanation of how they are done made me cheer out loud! I had only one comment: In the section where you mention the Transform to flip the start button vertically, where it shows an image of the Transform section, you're not showing the "Scale" tab on the Transform section; it took me a few minutes to figure out that you accomplish the flip by setting the Y-scale to -1 at the 2-second mark. Did you actually enter that value, or did you accomplish the transform some other way? Anyway Sacha, thanks again - this article and the accompanying project have really really helped me understand some of the basic things I was missing. Sign In·View Thread·PermaLink Re: This is all very well and good, but... Sacha Barber 22:26 22 Jul '07   Partick, I thank you very much. I do try, this article is quite old now, perhaps you would also like some of my others http://www.codeproject.com/WPF/WPF_CustomerControl.asp http://www.codeproject.com/WPF/WPFFlickr.asp http://www.codeproject.com/WPF/Ink1.asp I am also just finishing a WPF/WCF chat application, which amongst one of the finest ones Ive produced I think. BUt ive thought that before, and the article has done badly. But to be honest that doesnt stop me, ill keep writing about these new technologies because I like them and sharing in general. Patrick Sears wrote: I had only one comment: In the section where you mention the Transform to flip the start button vertically, where it shows an image of the Transform section, you're not showing the "Scale" tab on the Transform section; it took me a few minutes to figure out that you accomplish the flip by setting the Y-scale to -1 at the 2-second mark. Did you actually enter that value, or did you accomplish the transform some other way? Ah yes, sorry about that, but yes your guess is correct. Well done, see its all good for you now. As far as WPF goes i just started trying stuff, it seems fairly OK I think, you just get Blend and Visual Studio 2005 (with CIDER) and start to play, and look at the code produced and also buy Adam Nathan and Charles Petzold books and there you have it, instant WPFing Glad to be of service though I really am. Sacha Barber A Modern Geek - I cook, I clean, I drink, I Program. Modern or what? My Blog : sachabarber.net Sign In·View Thread·PermaLink About the events palette.. [modified] Calla 21:13 7 May '07   Thanks for a really good introduction to Expression BLEND. I installed it yesterday and read your article and ran your code and it worked lika a charm. In the section "Playing of multimedia of the users choice" you talk about the Events palette and how easy it was to wire a control event in Expression Interactive Designer and how that is not easily done in Blend. Now, I don't know how this was done in EID (so I'm sorry if I misunderstood this and I'm just stating the obvious right now) but this is quite simple in Blend as well. You just select the control (in this case the button) and click the Properties palette. At the top of this palette there are two buttons (to the right); "Properties" and "Events". Just click the Events button (the one with the flash on it) and you will open up a view similar to the one you get in Visual Studio. Now double click, say the Click event, and the event handling code will open up in VS2005 (if you have it installed - otherwise the code will be copied to the clipboard and you have to paste it yourself in the .xaml.cs file). Just type your code, save and compile. -- modified at 3:06 Tuesday 8th May, 2007 Sign In·View Thread·PermaLink Re: About the events palette.. Sacha Barber 22:14 7 May '07   Calla, I have not been playing with BLEND for a while as I have been doing LINQ stuff, but just the other day I was doing some XLINQ/WPF stuff and actually found the event button by accident. Its very small button. But yes its there alright. The information you lay out here is very useful for those that have not found it by themselves, so thanks. Glad you like the article. I have a new one on WPF / XLINQ that ill be publishing this week, watch out for it. I also have another WPF one that you may like. Respect sacha barber A Modern Geek - I cook, I clean, I drink, I Program. Modern or what? Sign In·View Thread·PermaLink Re: About the events palette.. Calla 22:21 8 May '07   Actually, I didn't find the Event button myself at first but just couldn't understand why they had made it so difficult to add event handlers. Well, good thing we discovered it. I'll make sure to check out the other articles of yours eventhough I'm more into WCF right now (due to work) but now that I got my hands on Blend I just might change focus for awhile . Peace.. Sign In·View Thread·PermaLink What changes with Orcas? nitstheone 19:32 16 Mar '07   You have mentioned the use of Cider, Blend, I have not actually followed .net 3.0, so I was just wondering - Whats up with Orcas? will it combine Cider and Blend? Basically I want to know, If I have to start WPF based development, what all do I need, and what is upcoming - I would be willing to wait if Orcas gives me everything. I havent checked out the pre-releases of Orcas, as it is a VM image and I dont want to download so much. Sign In·View Thread·PermaLink Re: What changes with Orcas? Sacha Barber 0:56 18 Mar '07   Ok what Cider is, is a visual studio 2005 plugin that enables developers to use Visual studio 2005, to produce .net 3.0 WPF applications. Just as Visual Studio 2003 is to .NET v1.0/1.1 and Just as Visual Studio 2005 is to .NET v2.0 They have just given us devs a free add in for Visual Studio 2005 which allows us to produce .net 3.0 WPF applications. So thats that. As far as BLEND goes its really aimed at graphical artists who will produce the pretty screens and hand them back to a developer, who can open the Visual Studio project, as BLEND produces a Visual Studio solution file and standard visual studio project. So you see BLEND is really meant to be used by artists, and then handed back to developers. What ORCAS (full orcas, the BIG BIG download) is, is the next version of Visual Studio, 20XX if you like. That has been written to deal directly (in a native way, no plugins etc etc) to deal with .net 3.0. So its like this Just as Visual Studio 2003 is to .NET v1.0/1.1 and Just as Visual Studio 2005 is to .NET v2.0 and Visual Studio 20xx (Orcas) is to .NET v3.0 In the mean time though if you dont want to download full Orcas (neither do I actually, too too big) you have to use either BLEND, or the CIDER visual studio 2005 plugin, or hand code the XAML. I hope this covers your questions. sacha barber Sign In·View Thread·PermaLink 5.00/5 (2 votes)