Just a quick note:  I’m sure MS will be providing controls to this interface in the future so we don’t have to spend too much time building these controls ourselves This post, as with the previous one, was meant more as an Expression Blend Exercise for myself to be explore the features [...]]]>

Just a quick note:  I’m sure MS will be providing controls to this interface in the future so we don’t have to spend too much time building these controls ourselves This post, as with the previous one, was meant more as an Expression Blend Exercise for myself to be explore the features of Silverlight / Windows Phone 7 and Expression Blend to see how much can be done with what we have today.

There’s one annoying thing that I can’t figure out though: on the first scroll, you’ll notice from the video that the screen flickers. There’s probably something I’m doing wrong here but I just can’t figure it out yet

So I had set out to accomplish two things: Simulate the looping background and sections in the panoramic interface on windows phone and instead of flicking, let the user touch and drag the controls from left to right before switching. I was able to accomplish the two, but like I mentioned, there’s an annoying thing that happens on the first transition from state one to state two. Another thing that’s wrong with this sample is that, I shouldn’t be switching states right away on a drag to left or drag to right. You should be able to pan a bit and the screen holds to that position till you pan to a certain threshold before the interface snaps to the next section. But yeah, maybe next time.

The first challenge was implementing the drag to next state instead of the flick. I couldn’t really isolate this into either a trigger or an action as it’s actually a combination of both, therefore a behavior. Basically, depending on the sum of the left and right value of the users drag motion, I trigger either GoToNextState() or GoToPreviousState(). Code for these two were modified from http://gallery.expression.microsoft.com/en-us/MIXBehaviorPack.

So I built a PanoramicPanningBehavior that has a few properties I can set.

First there are  the BackgroundElement, SectionsElement, TitleElement. I want them to be grouped so when it’s time for me to handle the drags, they don’t necessarily have to move at the same pace. That’s when the BackgroundMovementFactor and TitleMovementFactor come to play. Intstead of translating the background and title according to the value of the drag, I multiply it by the specified factor first. I’ve also let myself specify the StateGroup that has the states of our sections as described in my previous post, just in case you have other stategroups in the scene (though I haven’t tested this yet ^_^)

Now that I have the essential parts of my UI identified, I can now define what I want to do with them in my behavior when I start handling the events ManipulationDelta and ManipulationCompleted.

First for ManipulationDelta, I first check to see whether the parts are not null, and then based on the input factors, I apply them to the Translation.X property of the DeltaManipulation, or basically the change in the touch points and assign the value to the TranslateX properties of the CompositeTransform of the elements that have been identified through the properties. I think it’s better to read the code  

void RootVisual_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
     {
         if (!e.IsInertial)
         {
             if (BackgroundElement != null) {
                 var BG = getElement(BackgroundElement).RenderTransform as CompositeTransform;
                 BG.TranslateX += e.DeltaManipulation.Translation.X * BackgroundMovementFactor;

             }
             if (SectionsElement != null) {
                 var SE = getElement(SectionsElement).RenderTransform as CompositeTransform;
                 SE.TranslateX += e.DeltaManipulation.Translation.X;

             }
             if (TitleElement != null) {
                 var TE = getElement(TitleElement).RenderTransform as CompositeTransform;
                 TE.TranslateX += e.DeltaManipulation.Translation.X* TitleMovementFactor;
             }

         };
     }

If I wanted to run the project at this point, I’ll have to create a stateGroup and the section states in order for this not to go haywire. When I recreated the project, I actually added the panning behavior last. Next we’ll see the reason why I say this is meant more as an exercise for myself (and maybe for building demo apps) than production code. I think from this screenshot you can more or less figure out what I did.

Okay, so seeing as how you’re able to, from the leftmost part of your UI, be able to pan even more to the left to peek and even transit into the rightmost section, there had to be something there. And since I didn’t want to duplicate all the controls, I wanted to use WPF’s VisualBrush. Sadly, this isn’t available for Silverlight, however, I did find this: http://dotneteers.net/blogs/vbandi/archive/2009/03/26/discovering-silverlight-3-poor-man-s-visualbrush-behavior.aspx When I tested it out, it wasn’t as performant as WPF’s visual brush, but since I only needed to draw the UI once, I thought this would do.If we had the PathListBox in WP7, that would have been a better option too.

If you look at my visual tree, I basically created a brush for the background image(image), the TitleGrid and the ContentGrid (which you won’t see since I collapsed it because there were more stuff inside. Next, you’ll notice that these elements are inside a stack and before and after each of them is a Rectangle. Basically, I created identically sized rectangles that use as brushes the PoorMansVisualBrush.

To do this, after adding a reference to the PoorMansVisualBrush (which I’ve made a WP version of ), I select the Rectangle and temporarily choose, TileBrush, click on Advanced Options in the Fill property and select Convert to New Resource… This will prompt me with a dialog to create a new brush resource and I’ll name it accordingly. In this Case, I have BackgroundBrush.

Next, with the behavior selected, I set the properties accordingly. Most important to note is to set the UpdateIntervalDuration to 00:00:00 so that the behavior doesn’t waste resources by repainting the brush. Next, you’ll want to go to each of the rectangles and assign their fill properties to the BrushResources you created. Also remember to set the Stroke to No brush especially if you have background images that are supposed to seamlessly merge the leftmost and rightmost portions. Now the tedious part is doing this for all the rectangles.  

The last, and yet another tricky part is setting up the states. What you’re seeing here is pretty much the same as the last post where I have 3 states, to show my 3 sections. Note that when you position the states, you’ll want to position the actual to the middle/actual objects. It’ll probably be too difficult to set up using the rectangles with the brushes anyway since they don’t render at design time ^_^. Here, you’ll notice I’ve added custom transitions for when Section1State goes to Section3State and vice versa.

To do this, I’ll click on add transition button and select Section1State –> Section3State

In order to see what I’m doing better, I’ll switch to the Animation Workspace by pressing the function key [F6]. I’ve also minimized the stacks back so it’s easier to manage. With the transition to Section3State selected I’ll record a keyframe at the start, and end of the .5s transition.

When I record a key frame at the end, it’ll actually default to moving to the right most part of the actual controls which I changed to the one below. I’ve highlighted the outlines of the rectangles that mimic the actual controls.

Do the same for transitioning Section3State->Section1State. What will happen here is the application will play this custom transition animation to showing the visual brushes and when the transition is done, it’ll switch to the destination state where the real controls are visible.

Run the app to test and that’s it!

Again, not an ideal solution for production but at least I got to learn a few more useful things in Blend that might be useful in the future.

I’ve uploaded the code here so if you want to test it out, download the zip file, rightclick –> properties –> Unblock to avoid getting those dll not found / inaccessible errors.

Introducing iPadding v1! It’s basically a WPF application that allows you to drag and drop shortcuts onto the screen and save it for when it’s presentation time. My desktop is constantly cluttered and as [...]]]> With the whole iPad buzz going around last week, I decided to build last friday’s TechFriday app around the theme.

Introducing iPadding v1! It’s basically a WPF application that allows you to drag and drop shortcuts onto the screen and save it for when it’s presentation time. My desktop is constantly cluttered and as much as I’d like to use the hide desktop icons features, I do want some shortcuts readily available. Even with the pinning feature of Windows 7, I just end up with a cluttered task bark instead What I’ve been doing till now is creating a folder with the shortcuts of everything I want to show so i just have that pinned (or open by default) onto my taskbar.

So for TechFriday, I decided to make this little app that will store shortcuts in a window that looks like the iPad (or should i say P88?).

Version 1 includes the following features:

• Drag & Drop items onto the screen
• Click and Delete shortcuts that you want removed
• Double-clicking to start an application
• ClickOnce deployment enabling ease of deployment and distributing updates
• and of course, clicking the button formerly know as the start button to save your shortcuts and shut down

You can check out the application at http://bit.ly/b7893s and explore the source code here.

How I did it?

iPadding States

If you open up the project you’ll find the following state groups. (The third state is currently not supported in this release )

The iPadLoading state simple sets the opacity of a canvas with the “broken window” logo to 100% while the iPadLoaded state does the reverse.

iPadding Components

For this version, we only have two major components to the app: icApps and btnStart

Let’s start with the btnStart as it is the easiest. This control is basically a styled button.

1. Start by adding a button onto the screen, then right-clicking, Edit Template –> Edit a Copy

You’ll then be prompted with a dialog box that will allow you to specify properties of this style. First is the Name, second is where you want to define the style in. The default is set to This Document which means the style will only be visible in this screen/page/usercontrol. Application will allow the style to be visible to the other pages/windows/usercontrols in the application. You can also select Resource dictionary to put the style in a separate file altogether and allow you to import the Resource Dictionary along with all the styles defined in it in other projects and applications.

For this button style, I made use of images to for 2 of the different button states: MouseOver and Normal.

The default style of the button contains the chrome and a ContentPresenter. The ContentPresenter is basically where Button.Content will be displayed. If you’ve been playing with WPF/Silverlight, you’ll know that you can not only assign text to as button contents, but images, videos and other controls as well.

In this case, I just want a simple image, so I can go ahead and delete the default contents and replace it with a grid that contains my button images. In this case, I added 2 images, one to depict the button in Normal state, and another on MouseOver state.

When you click on a state, you’ll notice the state recording turns on.Once this is so, you can start changing properties of your design elements to reflect your desired look.

Now we’re pretty much done with the StartButton design. Let’s put in a stub where our developer can plug in the code to make the app function as it is supposed to. To do this, let’s first return to the Window Scope

Next, while the button is selected, go to the properties tab an click on events.

Once the tab is activated, you can type in the method name you want called on the Click event

Doing this will activate the XAML editor in Blend and automatically insert the method stub for you or your developer to fill in once you are ready to start filling in the application logic. Let’s leave this for now and go on to the next component.

The next control is icApps is a styled ItemsControl that will contain all the apps that you drag and drop into the window. Let’s first go to our Asset Library and drop in the ItemsControl onto our Window. You might want to drop it into a Grid to fix the layout.

Next, we need to think about how we want to layout the items in our control. If you look at the iPhone, the apps are actually lined up in a 4 x 5 grid. However, since in the future, I’d like to be able to resize the screen and have the apps line up depending on the space, I’ll use a WrapPanel to manage the layout. To do this, I’ll right-click on the ItemsControl –> Edit Additional Templates –> Edit Layout of Items – >Edit a Copy. Again this will bring you a dialog box that will allow you to name and specify where you want your style created.

You’ll notice that the default layout is a StackPanel, but we’ll go ahead and change this into a WrapPanel.

You might also want to ensure that the ScrollBarVisibilities are properly set. I’ll be disabling scrolling for this version till I figure out how I want to page / scroll through my items.

Now that we have the layout set, we’ll now take a look at the template for generated items. So same as before, right-click on the ItemsControl -> Edit Additional Templates –> Edit Generated Items –> Edit a Copy. If you’re wondering why it’s “Edit a Copy”, WPF controls come with default templates that developers and designers can easily replace but because Blend needs to have a fall back in cases of new controls, the default templates are stored somewhere and are read-only for us. But we can always create our own style and set it as a default for all the controls in our project by selecting Apply to All in the Create Style Resource dialog.

I want the Apps to be visualize as buttons that can get focus when clicked so that the users can delete them if he chooses to, and launch the application when double clicked. I don’t want to recreate a control as the Button control can pretty much do what I need it to do. So what I’ll do in my data template is add a 120×120 grid to constrain the button size, and put a button inside and style it as I want and for this I’ve created a style called AppButton style. that has the following:

You’ll notice that since I’m styling a button, the template already comes with the common button states such as MouseOver and FocusStates. This will make it much easier for me to fix my controls visuals through states instead of having to code it all up myself.

If you look at the object tree, I have an image will I will later on show how I tie up to the Icon of whatever shortcut is dragged into my app. I have a text block that will also display the name of that shortcut, and two rectangles that will basically be my MouseOverVisual and FocusVisual. Both these visuals have an opacity of 0% by default, and I simply edit the corresponding states to set the opacity to 100%.

I mentioned that for the image and text block, I wanted it to be bound to whatever the icon and name was used in the shortcut dragged into the app. Later on we’ll be using the ShellObject defined in the http://code.msdn.microsoft.com/WindowsAPICodePack The ShellObject data object has quite a number of properties but the one I’m intersted in would be Thumbnail, which is an Icon object which in turn has a MediumBitmapSource (medium because we’re looking at displaying bigger icons than the ones we see in details view of explorer) and Name, which will hold the filename on the shortcut.

As a designer, all I care about would be that those two properties of the data object will be present when the time comes. I can use data binding to link the properties of the data object with properties in my UI.

First off is the TextBlock. With the the TextBlock selected, I’ll head over to the properties panel and look for the text property since this is what I want to bind to the Name property of the data object. I can do so by clicking on the button right beside the Text textbox.

I’ll then select Data Binding.

You can data bind this the Text property to virtually anything as you’ll see in the dialog box that pops up, from data fields, to other elements properties. In this case, since we don’t have access to our data objects just yet, I’ll go straight to Explicit Data Context and tick the “Use a custom path expression” and put in the Name property. Again as a designer, I don’t have to care where that value comes from but i know that whatever data object is bound to this button, I’ll get access to a property called Name that will hold the name of the application or shortcut of the app I want to run.

I’ll do the same for the img object with the source property. This time, I’m binding it to “Thumbnail.MediumBitmapSource” since my developer tells me, there’s an existing object that we can use and that property is going to give me the filename of the icon i can use in my button.

Now that’s done, let’s help out our developer a little bit.We’ve decided that the behavior of this app is such that if a button is clicked, it’ll bring focus to that button. This is already the default behavior of a button and since we’ve only styled a button and not made our own, we won’t have to worry about building that behavior. The next behavior is that when double clicked, it runs the application associated with it. To do this, let’s exit scope one level up to the AppButton. We can either do as we did previously by clicking on the up arrow or by clicking AppButton on the bread crumb bar at the top of the XAML designer page:  

With the AppButton selected, we’ll go to the events tab on the Properties page, go to MouseDoubleClick and type in a name of method that will hold the code to run the shortcut associated to the button. Once we press enter, we’ll be brought to the code behind and we can write a little note to our developer to put in that piece of code here. If as a designer, later on you feel that it’ll be better to have the application run at a different event, you can simply move that method name to another event in the events list, and your developer won’t have to change their code.

Once that’s done, we can exit again till we’re all the way up on the window level. What we have done is basically create an ItemsControl with our custom style that displays a square button and a text block (as well as some visuals for mouse over and focus states). We’ve styled these buttons in such a way that the images and textblocks are bound to properties Name and Thumbnail.MediumBitmapSource. The idea here is that our developer will eventually bind this ItemsControl with a list of ShellObjects which we are told have those properties. Each shell object will be bound to a generated item with the template we defined. We’ve also created a method for our developer to implement that runs the associated application when the button is double clicked.

Next post will cover the developer portion of this application. For now, you can download and try out the application on http://www.badgorilla.net/ipadding

I was listening to some Christmas music today and the holiday spirit got the best of me. I managed to make a customizable e-greeting card using Silverlight 4. Since MS has only released a developer beta and no go-live license, users will have to manually download the Silverlight 4 beta plugin. I modified [...]]]>

I was listening to some Christmas music today and the holiday spirit got the best of me. I managed to make a customizable e-greeting card using Silverlight 4. Since MS has only released a developer beta and no go-live license, users will have to manually download the Silverlight 4 beta plugin. I modified the html code that the Silverlight SDK spits out to show this image and redirect it straight to the Silverlight Tools Page:

I didn’t want to reinvent the wheel so I used some code that was already out there:

http://www.wintellect.com/CS/blogs/jprosise/archive/2009/07/17/fun-with-savefiledialog-and-writeablebitmap.aspx

- Code to encode an image to PNG and save to local hard drive

http://channel9.msdn.com/learn/courses/Silverlight4/MagicMirror/MagicMirror/

- Silverlight 4 code to capture images from a Web Camera and Print

Tools I used:

Visual Studio 2010 Beta 2 

Microsoft Expression Design

Microsoft Expression Blend Preview for .NET 4

And here’s the app! And yes, this qualifies for a TechFriday cause Christmas is on a— FRIDAY!

As promised in my previous post, I’ll be talking about how to create jumplist integrated single instance applications, much like how Outlook, Windows Media Player.

At first, i thought it would need to involve a bit of windows messaging but then I found this blog post that details how to create single instance [...]]]>

As promised in my previous post, I’ll be talking about how to create jumplist integrated single instance applications, much like how Outlook, Windows Media Player.

At first, i thought it would need to involve a bit of windows messaging but then I found this blog post that details how to create single instance WPF applications. I rewrote our sample from the previous post to adopt this model. I based my code on the post so I recommend reading that post first to have a better understanding of how we are creating this single instance application.

Explaining a bit what is going on here, we basically have 3 major classes:

The SingleInstanceManager, as the name implies, manages the instances of your application. If you take a look at the code, basically it creates an instance of your application if it is an initial startup. When a next instance is triggered to start up, it activates the the MainWindow through Win7Application and processes any arguments passed in the triggering of the subsequent instances.

Win7Application is basically our replacement for App.xaml because we want to be able to control when we activate the MainWindow of our application. We also process any arguments of our application in this class.

  public void ProcessArgs(string[] args, bool isFirstInstance)
        {
            if (args.Length > 0)
            {
                if (isFirstInstance)
                    AppWindow.initState = args[0];
                else
                    AppWindow.updateState(args[0]);
            }

        }

If you look at the ProcessArgs method in the sample attached, we’re basically setting an initial state (initState) property to the value of the argument as this is expected from the jumplists we have defined in my previous post. If this is not the first instance, we call the updateState() method which I have exposed as a public method in the MainWindow class. 

These are basically the changes I made to MainWindow.xaml.cs:

        private void Window_Loaded(object sender, System.Windows.RoutedEventArgs e)
        {

            WindowJumpList = JumpList.CreateJumpList();
            initializeJumplist();
            if (initState != null)
                updateState(initState);

        }

        public  void updateState(string state)
        {
            ExtendedVisualStateManager.GoToElementState(LayoutRoot, state, true);

        }

You can download the source here:

We’re having our Singapore launch of Windows 7 this November and in honor of that, I’ll be devoting my upcoming (and long overdue) TechFridays to everything Windows 7. For this post, I’ll be talking about how you can use the Visual State Manager for WPF to manage the different screen states in your [...]]]>

We’re having our Singapore launch of Windows 7 this November and in honor of that, I’ll be devoting my upcoming (and long overdue) TechFridays to everything Windows 7. For this post, I’ll be talking about how you can use the Visual State Manager for WPF to manage the different screen states in your application in conjunction with your Windows 7 Jumplists.

Before we start, make sure you have the following downloaded:

1. WPF Toolkit – This enables VSM support in current WPF projects

2. http://code.msdn.microsoft.com/WindowsAPICodePack – provides managed wrappers that allow you to easily incorporate Windows 7 JumpLists into your application

* make sure you add references to the above binaries and your set to go.

If you’re not familiar with the Visual State Manager, you can read http://windowsclient.net/wpf/wpf35/wpf-35sp1-toolkit-visual-state-manager-overview.aspx for a brief overview.

What I have is an application with several screens grouped into panels. I also have a visual state group “ScreenStates” where i have 3 states, one for each screen.

This should make for easier screen management. You can make use of Blend behaviors to activate these states on the click of the corresponding navigation button / link. If you open up the Behaviors tab in the asset library, you’ll find the GoToStateAction that you can click and drag onto the appropriate control that you want to trigger the state activation.

In the screen below, I added the behavior to my GalleryButton. On the properties panel, you’ll see that you can set the StateName you want to activate on the trigger, in this case, the GalleryButton’s Click event.

Next we we want to enable Windows 7 Jumplists in our application. Windows 7 is all about helping users become more efficient and one of the features that enable this is the jumplist. Below is a screenshot of Outlook’s jumplists. The application basically exposes tasks that would normally take a few clicks to get to so instead of having to spend the time starting the app and clicking the appropriate menus/options, you jump straight into the screen you want.

Below is one way you can integrate jumplists into the app we are building. First, you’ll need to define and initialize a few variables we will be needing to manage the jumplist: the Jumplist itself, and the folder where the assembly is executing.

        private JumpList WindowJumpList;
        string executableFolder;

	private void Window_Loaded(object sender, System.Windows.RoutedEventArgs e)
	{
			// TODO: Add event handler implementation here.
            WindowJumpList = JumpList.CreateJumpList();
            executableFolder = System.IO.Path.GetDirectoryName(Assembly.GetEntryAssembly().Location);

            initializeJumplist();
            string[] arguments = Environment.GetCommandLineArgs();
            if (arguments.Length > 1)
            {
                ProcessArguments(arguments[1]);
            }
	}

The following code then initializes the jumplist. Note that the tasks are shell links to the application executable, with the state names of our screens as the arguments. This will make it easier later on to process the arguments and activate the appropriate screen.

The last method is the ProcessArguments method. There is a slight kink in the VisualStateManager that won’t allow you to “go to state” as you normally would unless the target is a UserControl. In this case, we had to use a work around which i found here

when you compile and run your app, you’ll see the following jumplist tasks and will be able to activate the corresponding screens straight from the jumplist.

You can download and try out the code here:

This version launches a new instance every time you click on a task on the jumplist. In my next post, I’ll post a sample on how to create jumplist enabled single instance WPF applications. Till next time!

Everybody’s excited about Windows 7 and there might be a few of you guys out there wanting to take advantage of some of the new features of the OS in your applications. In this post, I’ll show you how you can quickly add Jumplist support to your existing application (Yes, even WinForms applications)

In [...]]]>

Everybody’s excited about Windows 7 and there might be a few of you guys out there wanting to take advantage of some of the new features of the OS in your applications. In this post, I’ll show you how you can quickly add Jumplist support to your existing application (Yes, even WinForms applications)

In order to keep things simple, let’s just make the assumption that this existing application of mine has 3 very useful screens: Default, Green Mode and Red Mode ( I’m a developer, I’m not very creative )

Because I want to save my user some additional clicks to get into green / red mode, I can take advantage of a new feature of Windows 7 called Jumplists: when a user right-clicks on my app’s icon on the Windows 7 task bar, this menu pops up and gives him access to tasks that we expect him to frequent. There are a lot of tutorials out there that teach how to add Recent/Frequent documents to this list. The samples included in the library we’ll be using will show you how.

.

For this example, we’ll learn how to use our applications existing custom functions (and icons) with Windows 7 jumplists but first, download the Windows 7 Taskbar Developer Resource

For this example, I have a very simple Hello Windows 7 application. In the application, I have a menu bar that loads up additional screens. In this case, it’s just the same screen and switching the colors, but it could easily be a function that will load up another UserControl with different functions. Productivity is key, so I’d like to allow my user to go straight to these screens on startup.

In order to enable this, I’ve made a method that will allow the application to switch between user screens based on command line arguments when launching the application.

private void ProcessArguments()
{
    string[] args = Environment.GetCommandLineArgs();

    if (args.Length > 1)
    {
        if (args[1].Equals("/r"))
        {
            LoadRedScreen();
        }
        else if (args[1].Equals("/g"))
        {
            LoadGreenScreen();
        }

    }
}

In this piece of code, I’m basically checking that IF there are arguments passed when running the application, I’ll be calling a method to load the appropriate UserControl (We’ve already seen that this is the same method invoked by the menu item in our Menubar).

Now we start using the libraries provided for us to make it easier to integrate with the Windows 7 Taskbar. But first let’s import the namespace of the library, plus some additional ones we will be using along the way

using Windows7.DesktopIntegration;
using System.IO;
using System.Reflection;

Next we add the following properties to the form:

string appID = "Hello Windows 7";
JumpListManager jlm;
    

The key thing here is the JumpListManager but if you want more information on the appID and all the goodness it brings, visit http://windowsteamblog.com/blogs/developers/archive/2009/06/18/developing-for-the-windows-7-taskbar-application-id.aspx. The next thing I have to do is override

protected override void WndProc(ref Message m)
{
    base.WndProc(ref m);
}

Before we start jumping into adding jumplists, we want to remember that since this is an existing application meant to be run in existing versions of Windows, we’d like to make sure that we’ll only execute the additional code IF the application is running in Windows 7, otherwise, operate as usual. To do this, we check whether the OS version is 6.1 or greater (RC builds still register Major version as 6) with this code:

OperatingSystem os = Environment.OSVersion;
if ((os.Version.Major == 6 && os.Version.Minor >= 1) || os.Version.Major > 6)
{
    //some code
}

Now for the fun part. The OS message that we want to lookout for is the message that tells us that the taskbar button has been created. Then we can start adding the Jumplist items to the button.

if (m.Msg == Windows7Taskbar.TaskbarButtonCreatedMessage)
{
    try
    {

        jlm = new JumpListManager(appID);
        jlm.UserRemovedItems += delegate { };

        string strAppDir = Path.GetDirectoryName(Assembly.GetEntryAssembly().Location);
        string app = Assembly.GetEntryAssembly().GetName().Name + ".exe";

        jlm.AddUserTask(new ShellLink
        {
            Title = "Color it Red!",
            Path = Path.Combine(strAppDir, app),
            Arguments = "/r",
            IconLocation = Path.Combine(strAppDir, @"ico\Red.ico")

        });

        jlm.AddUserTask(new ShellLink
        {
            Title = "Color it Green!",
            Path = Path.Combine(strAppDir, app),
            Arguments = "/g",
            IconLocation = Path.Combine(strAppDir, @"ico\green.ico")
        });
        jlm.Refresh();

        ProcessArguments();
    }
    catch (Exception)
    {

    }

Let’s break this down.

We start by creating a new instance of the JumpListManager passing the appID we’ve assigned to our app. Next we register to the UserRemovedItems event as this is required if we want to refresh the JumpList after adding items to it. In this case, we do nothing when any items are removed.

Here, we get the directory where the application is running as well as the app name itself, so we can tell the JumpList link what to invoke when it is clicked. Basically it’s emulating running your app from a command prompt and passing the arguments (if any). Now we can proceed to adding our JumpList items.

I’ve mentioned we can add a few other things such as Recent Documents & Frequent Documents  but you’ll find lots of resources on this on the net as well as the samples for the library. In this case, we’re adding a new User Task to the jumplist which results in having these links under a “Tasks” header as below:

Path, Arguments, and IconLocation are pretty self explanatory.

I need to make sure my icons are available to my application so here I’ve placed all my custom icons in one directory and set the property so the IDE knows to copy these files to the output directory.

After defining my JumpList links, I can call a Refresh on the JumpListManager so it loads up all my new links. After this, I make a call to my ProcessArguments method. This will make sure it runs the additional code if any arguments were passed when running the application. Of course, if you see that your users may want to run your app from a command line and pass arguments manually, you might want to put this call outside of the if statement or anywhere before your first form completes loading.

It’s that easy! If you got lost on the way, here’s the source to this project. If you manage to get your JumpLists going, feel free post a link to your app!

RESOURCES:

Windows 7 RC Training Kit for Developers

Managed APIs in this sample 

• Windows 7 Taskbar – http://code.msdn.microsoft.com/Windows7Taskbar

Other Managed APIs available:

• Windows API Code Pack for Microsoft .NET Framework – http://code.msdn.microsoft.com/WindowsAPICodePack
• Windows 7 Taskbar Extensions – http://windows7taskbarext.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=22682

Okay, I missed Tech Friday, so I decided to make it Tech Weekend instead. I attended the June Mix-It-Up: Re-MIX last Thursday and was able to catch up a bit on the new technologies. I have been busy with a few other things at work and I am ashamed to say, I have [...]]]>

Okay, I missed Tech Friday, so I decided to make it Tech Weekend instead. I attended the June Mix-It-Up: Re-MIX last Thursday and was able to catch up a bit on the new technologies. I have been busy with a few other things at work and I am ashamed to say, I have been lagging behind!

One of the things that interested me is behaviors in Silverlight 3. If you do a bit of searching you’ll find quite a few articles on behaviors. Basically, it’s the ability to encapsulate “behaviors” that you can reuse on different UIElements that developers can write and have their designers use (with drag and drop of course) to earn brownie points. Expression Blend 3 comes with a few behaviors out of the box. They’re the ones listed in the screen shot below, apart from the first one which is the behavior I created:

My favorite, I would have to say is the MouseDragElementBehavior. To use it, all you have to do is drag and drop it to any element in your app to enable drag and drop capabilities. There’s just so much you can do for interactivity with that behavior alone. I remember this being one of the things I use to code time and time again with previous projects I used to tinker with.

Another behavior that I’ve always wished I could encapsulate was the “bring to front” behavior. Say you have a bunch of UI elements scattered in a pile on the screen, you sometimes want it to behave in such a way that an element you click on gets floated to the top. This is probably a behavior that you would like to use in several scenarios/apps so it makes sense to build a behavior for it, and reuse it across different projects.

WARNING: I think I’m using a different build of Blend so I won’t get into the details of where to get which assemblies. I’ll update this post once Blend 3 is out, but I think what’s more important is understanding how building a behavior would be like more or less.

Basically what I did was build a Silverlight Class Library that inherited from the Behavior generic:

public class BringToTopBehavior : Behavior<Canvas>
{

//some code here


}

When creating your own behaviors, Canvas would be the object you would like to apply your behavior to. Next thing to do is override the onAttached() method:

protected override void OnAttached()
{
    base.OnAttached();

    AssociatedObject.Loaded += new RoutedEventHandler(AssociatedObject_Loaded);

}

AssociatedObject would be the the actual instance to which the behavior is attached. What I did here is add an event handler to the Loaded event because I wanted to attach another event handler to each of the objects that gets loaded into the canvas. I can only get the children once the UI element has finished loading. My Loaded handler looks something like this:

void AssociatedObject_Loaded(object sender, RoutedEventArgs e)
 {

     foreach (var child in AssociatedObject.Children)
     {
         child.MouseLeftButtonUp += child_MouseLeftButtonUp;
     }
 }

What I’m doing is attaching a handler to the MouseLeftButtonUp event for each of the objects contained in the Canvas in question. This handler is defined as:

void child_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    BringToTop(sender);
}

I created a few private methods to handle sorting the z-orders of the elements contained in the Canvas:

private void BringToTop(object element)
 {

     Canvas p = (Canvas)((FrameworkElement)element).Parent;
     int z = getHighestValue(p);
     for (int i = 0; i < p.Children.Count; i++)
     {
         var child = p.Children[i];
         if (element.Equals(child))
         {
             child.SetValue(Canvas.ZIndexProperty, z);
         }
     }
 }

 private int getHighestValue(Canvas p)
 {
     int highest = 0;
     foreach (var child in p.Children)
     {
         var val = (int)child.GetValue(Canvas.ZIndexProperty);
         if ( val > highest) {
             highest = val;
         }
         child.SetValue(Canvas.ZIndexProperty, val - 1);
     }
     return highest;
 }

This probably isn’t the best implementation of this behavior but it gets the job done

USING THE BEHAVIOR

Once you’ve finished writing your behavior you can compile the code and reference that dll into any of your existing projects and start using the behaviors. Right-click on references, click Add Reference, and navigate to the compiled dll of your custom behavior.

Once you’re done, you should be able to make use of this behavior through blend. In my case, I can click and drag BringToTopBehavior to my chosen Canvas and I would see the following:

Now you’ll notice, however, when I try to drag and drop the behavior to the Grid panel, it tells me that it’s not a valid drop target.

This is because, in my definition of my behavior, I’d specified that this behavior can be applied only to Canvases. But now, I realize the same behavior can apply to any Panel object. What I can do now is update my behavior definition to, instead of Canvas, have it apply to Panel instead:

public class BringToTopBehavior : Behavior<Panel>
  {
      //somecode
      private void BringToTop(object element)
      {

          Panel p = (Panel)((FrameworkElement)element).Parent;
          //some code
      }
      private int getHighestValue(Panel p)
      {
          //some code
      }
  }

With this change, I should be able to apply the behavior to any UIElement inheriting from Panel. I’ve zipped up and uploaded the code for this project. Feel free to download and explore here: Update: I realized that the file I uploaded wasn’t working. I updated the file, you can download it from the expression gallery on http://gallery.expression.microsoft.com/en-us/BringToFrontBehavior

Want to contribute to the gallery? Visit http://gallery.expression.microsoft.com/en-us/site/create

To see a sample application, check out http://www.badgorilla.net/behaviors

For more about the greatness of behaviors, check out this Mix Video: http://videos.visitmix.com/MIX09/C27M and of course the link to the behavior pack used in the demo: http://gallery.expression.microsoft.com/en-us/MIXBehaviorPack

Not the most techie thing to do but hey, today isn’t the greatest day to be using much of my brain as most of it is concentrating on agonizing on pain. I was browsing around the blogs I monitor and found a post by Long Zheng talking about a little experiment that showed [...]]]>

Not the most techie thing to do but hey, today isn’t the greatest day to be using much of my brain as most of it is concentrating on agonizing on pain. I was browsing around the blogs I monitor and found a post by Long Zheng talking about a little experiment that showed how much branding had an impact on peoples perceptions about search engines. Check out his post if you want to know more. Down the comments, I found someone saying that he wanted to make it his default browser search and saw that he created a search provider. I tried installing it but I am guessing it only works for Firefox. So I went ahead and created my own which I found was quite easy for IE8, especially with the tools that they have out there.

1. Go to http://www.microsoft.com/windows/ie/searchguide/en-en/default.mspx where they already have a list of popular search providers. They also have a custom-search-provider-generatorer if you want to create one of your own

2. Go to the search page that you would like to create a provider for and search for TEST (all caps). When the results page come, paste the URL in the text box provided and name your custom search provider

3. Now you can choose to install the provider straight from the page, but if you’d like to share it on your blog/web page, what you do next is click on View XML. It should take you to a page similar to the one below:

4. Next step is to go to File->Save As and save the page to your local drive as anything-you-want.xml and upload it to your webserver, skydrive, or anywhere visible to the internet at large.

5. Now on the page where you want to share your provider, you’ll need a link that will point to the following code "javascript:window.external.AddSearchProvider(‘http://www.aimeegurl.com/blindsearch.xml’);". In my case, i have this page:

with the following code to the Add Blind Search link:

And it’s that simple

I know, I owe a super tech friday next week… especially since I skipped last week! ^_^

I was thinking of an app to build for tech Friday and I remember running in to @willyfoo the other day. He mentioned he needed an application that would read in EXIF data from photographs and rotate them based on the orientation meta tag. It was quite a good exercise cause it allowed [...]]]>

I was thinking of an app to build for tech Friday and I remember running in to @willyfoo the other day. He mentioned he needed an application that would read in EXIF data from photographs and rotate them based on the orientation meta tag. It was quite a good exercise cause it allowed me to play around with a few things.

Problem 1: EXIF what?

Although I play around with photography once in a while (I bought a camera last year and I haven’t put any serious effort into it just yet), there are a few concepts which I have yet to understand. So apparently, cameras have a way of storing meta data into the photos you take. Some cameras store what its orientation is when you take a picture. So today, I brought my camera to work and took a few photographs as test photos. I found an existing library on CodeProject that will allow you to read EXIF data from photos called ExifLib.

So now, I can extract the data. The next step was understanding what code means what. http://www.impulseadventure.com/photo/exif-orientation.html gives a graphical explanation for the values of the Orientation metadata.

Problem 2: UI

To be honest, this is something that really needs to be thought through. I am guessing traditional applications would have a UI such as this that will allow you to select a file you want to “fix”. But then I thought, what if I wanted to do a batch job? I guess I could then select a directory. And then I remembered the challenge I had when I dealt with photos when uploading to facebook where my photos aren’t always in the same directory.

I then remembered a tweet by @MSExpression pointing to a blog post by kirupa where he talks about how you can enable drag & drop onto WPF components. So that is settled, Drag & Drop. I built a simple UI with a ListBox where you can drag your files to and an Image component where you can preview the rotated image.

There might be cases when the application messes up the auto orienting and you’d rather do it yourself manually. The UI allows you to select/de-select the files you want to save changes to. I have to say, it’s not the prettiest or most intuitive way to do it but I am not creative so this will have to do.

Problem 3: Preserving EXIF Data

I had originally thought it would be as easy as

but I was wrong. First, I realized that although it would successfully rotate the image, it would also bloat up the file (as it was saved without compression) plus, it would lose all the EXIF data the photos had. I don’t think this is something that @willyfoo would have wanted ^_^. So I dug around and found this post that showed you how to resize and manipulate jpegs while preserving the metadata. I did a bit of trimming as the code had stuff to resize the image, which I didn’t want to do for this round. One issue though, is because it encodes the bitmap using some parameters that i can’t figure out just yet (am just lazy too :p) It bloats the file up by a bit.

Problem 4: Saving Changes

Because my UI shows a preview of the image that was rotated, I got some errors where “the file is being used by a process” once I loaded them up into the application and tried to rename/delete them. This post on the msdn forum showed the fix for this.

You can download the code here:

Issues:

The application is functional but there is definitely a lot of room for improvement

1. Design – I think this application can be a lot nicer looking if I actually spend time on it. There’s a lot the WPF platform can do to “jazz up” the look and feel of the UI. I think my biggest challenge right now is coming up with a concept that would be cool looking enough :p

2. I’m not sure what happens if I drag&drop none images into the application. This line was supposed to take care of that:

But for some reason, files I drag&drop into the app don’t get recognized as a Bitmap. I had to use DataFormats.FileDrop instead.

3. Bloating of image. As I mentioned in problem 3, I’m not very familiar with how encoding works so the app actually bloats the image size quite a bit. I think the following lines take care of the encoding, but when I try to step down on the encParm, it makes the image size smaller than the source. I figured, bigger is better.

That’s it for now, until next Tech Friday!