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