DISCLAIMER: I write this post more for myself because I tend to forget how to do things. There can very well be other proper ways of doing this, but this is the “good enough” solution, at least for me.
I was playing around with WPF again since it’s been a while. I wanted to customize the scrollbar and I found it was quite a task. I finally figured out a simple way of doing it.
The look I wanted was a simple, thin, vertical bar (I guess you could do the same with the horizontal bar.
1. So we start with a ScrollViewer that contains a RichTextBox(or whatever you want)
2. Now we proceed to EditTemplate –> Edit a Copy.
3. You’re probably already familiar with this dialog box. Give your template a Name when you click okay, by default, it’ll add this to your window’s xaml. But if you want to later on reuse this template, choose the option to define it in a Resource dictionary. Later on, all you’ll have to do is add that resource dictionary to your project and you’ll be able to apply the style to your ScrollViewer.
4. We’ll fix the VerticalScrollBar in this sample but you can very well do the same for HorizontalScrollBar. To start, right-click on PART_VerticalScrollBar and click on EditTemplate –> Edit a Copy. Again, you’ll be asked to select a name and where you want to save this style. This time, we’re editing the ScrollBar component (previously was the entire ScrollViewer).
5. If you expand the template that you’re presented with, you’ll see the elements below. In my case, I want to delete the two RepeatButtons since clicking anywhere above and below the Thumb more or less does the same thing.
5a. But lets say you wanted to edit the buttons, what we do, is draw out what we want the button to look like anywhere on the canvas. We’ll delete this later on. Here, we have a Grid that contains our desired button template.
5b. What we’ll do now is right-click on the grid and select Make Into Control. A dialog box will appear that will ask you to select which control you want this grid to magically turn into. You’ll notice above that the buttons for scrolling up and down are RepeatButtons, so we can type into the search box to find the component, click to select and we’ll name it into something we will recognize later on, in my case, ScrollUpButton.
5c. Now we’re editing the RepeatButton template. We can go ahead and delete the automatically generated ContentPresenter since we don’t need any content in our template.
5d. You’ll notice that you can also go into the states tab to edit the look of your button on different states.
5e. Once you’re done editing, you can go back to the Objects and Timeline tab and click on this button that will take you back to the ScrollbarTemplate
5f. Now to apply the style, select the first RepeatButton –> Edit Template –> Apply Resource –> ScrollUpButton (or whatever you named your template)
5g. You’ll now see the button with the style you’ve defined. Now remember to delete that Grid turned Repeat button that we used to create the style or else, it’ll become part of your template/application
6. Like I said, I’m deleting my up and down buttons because I don’t want them. You’ll notice that the grid this ScrollBar was defined in has Rows that hold the buttons and the thumb / track. I’ll need to delete the extra rows since I don’t need them now and I want the thumb and vertical bar to occupy the entire height. I tried deleting this through the designer but it only wreaked havoc (might be a user error) but I found the safest way to do this is to delete from the XAML code. Click on this button in the upper right corner of your design canvas to show the xaml editor. (Now you know why I said XAML typing instead of XAML editing)
7. What I’ll do now is delete the 1st and 3rd row definitions.
8. Now I’ll see my scrollbar occupy the full height.
9. Next, I want to change the look of the ScrollBar’s thumb. You’ll see that the type of component this is is a Thumb. So we can do as we did with the Repeat button to style this. Make into Control only works on single objects so if you have several objects you want to include in your template, just right-click –> Group Into –> Grid to make them one.
10. Now you can follow the steps in 5b but this time, instead of RepeatButton, we select Thumb in the Make Into Control dialog.
11. Now continue with 5f to go back to ScrollBar template editing and apply the template to the Thumb object. You’ll now see our ScrollBar has changed. Again, remember to delete that extra thumb that we used to create the style.
12. One last thing. Maybe you don’t want your ScrollBar to be as thick as this. So using the button in 5e, go back up to the ScrollViewer template. With the PART_VerticalScrollBar selected, go to the Properties tab and scroll down to the Style property. You’ll see that it’s highlighted in green which means it’s being bound to a local resource.
13. Click on Edit Resource
14. You’ll then see our style, and if with it selected, you scroll down the Properties tab to the Width property, again you’ll see that the Width property is bound.
15. Click on the Advanced Options button (that little square) and select Reset. You should then be able to put in whatever width you want.
16. Now when you click on the button in 5e. (Return scope button) it actually takes you to the topmost level which is the window. So you’ll have to do an Edit Template… on the ScrollViewer again to edit the ScrollViewerTemplate. (By the way, I’ve edited my Thumb template to make it look alright with a Width of 5, i.e., change the width of the topmost grid in the template to 5 and fixed the components inside to make it look good).
You’ll notice that the second column in the grid is set to auto-sized so you’ll want to click on that icon till it says pixel sized (locked lock)
17. With the handle selected (that inverted triangle there) you can now set the width property to what fits your template.
Now if you return scope to window, (5e), and run your app, you’ll now see your fully functional and newly styled ScrollViewer.
hmm.. looks like there’s one more property you need to set. With the PART_VerticalScrollbar selected, set the Background property to No brush.
This is the effect you will get. Note, I’ve also set the RichTextBox borders to zero to remove all borders.
I’ve been on an app purchasing spree for a while so I had to update my iTunes account with an SG one. Recently though, MS has released a few apps that are US only: Windows Live Messenger & Bing. So what I did, I created another account with a US country (you can search how to create one without having to input credit card info). Once you have a new account, you can go to settings –> store and logout/login with your new account.
It’s a bit of a hassle though because once you’ve downloaded an app with one account, even if it’s available on both stores, you’ll have to be in the correct store to do an update. If that happens, just delete and re-download (of course, you’ll only want to do this with free apps.
So what to check out? For Windows Live Messenger, apart from the obvious social feed integration and IM, you should also check out the photos application that allows you to apply some basic effects to your photos before posting them onto skydrive, privacy setting settable to everyone or just you. <- new emoticon!
For the Bing app, there’s a new social tab that allows you to integrate with facebook and twitter so when you do a search, it searches your social feed as well.
Another new one is the Camera search. I thought this was really cool, you can search a barcode or cover art using your iPhone camera. I haven’t seen a successful search using the barcode yet since my camera is a bit crap. Perhaps 3GS users will have better luck.
So yes, now I have to figure out how to back up my apps to update to iOS4. //Update: so it’s in iTunes: Right click on iTunes –> transfer purchases. Haven’t tried it yet though, I accidentally hit sync thinking it would prompt me for options on what to sync, now it’s just taking forever to backup. AND no cancel button.
So i was quite excited when i was browsing around the Kindle Facebook page and saw some buzz about how the kindle 2.5.2 update was available for international users. It posted a link to the engadget article who in turn links to the forums. I had a bit of difficulty downloading the files listed on kindleboards so for those having trouble with the files, I’ve uploaded them onto my skydrive. You shouldn’t trust files people put up for you to run on your devices though, it’s a dangerous habit.
DOH i think the skydrive updates are messing with the links.. i guess you’ll have to try getting the links from the forums.
To update your kindle, copy the files one by one to your kindle, trigger an update through the menu -> settings -> menu – update your kindle option
Do this for the files in the following order:
Update …. 2.3.3
Update … 2.3.4
Update_4311…490480060
your kindle may already intermediary updates already (mine was fresh at 2.3) so install the appropriate ones. Okay, I’m off to play with my newly updated kindle!
*For those who want to update, note that this update is for devices with serial numbers starting B003, i.e . the Global Wireless ones.
I stumbled on this when I logged into YouTube using the wrong password and found myself logged into an account where I had no activity/uploads whatsoever, when I distinctly remember adding favorites and uploads on my account. Apparently, this is what happened:
1. A while back I created a YouTube account with the username Foo, and uploaded, and favorited some videos on the site. When I created the account, I had linked it to an email address bar@live.com.sg.
2. At a later time, I created a gmail account Foo@gmail.comwith a different password (password2).
3. At a much later time, I decided to create a YouTube account (by this time I had forgotten I already had one ) using my gmail credentials. When signing up, I had to put in Fuu as Foo was not available as a username, which I probably found strange but forgot about at that time.
4. I went back to using my former password by the time I wanted to login to YouTube again, so I put in login name Foo with the former password (password1) and then started favoriting videos.
5. After a while of YouTube inactivity, I one day decided to log back in, and absentmindedly put in my new password (password2). At first I panicked, I thought my account had been wiped out as there were no favorites nor uploads in my account. Then I noticed my account name Fuu. That’s when I tried logging in with my other password (password1), and sure enough, it took me to the account I was accustomed of using.
6. Just for fun, I changed my Foo (bar@live.com.sg ) password to be the same as my Foo@gmail.com (Fuu) password. Obviously, it goes to the former unless I specify Foo@gmail.com as my login name.
I just tried it out signing up test accounts (though I think I forgot my password after I changed again (or did I?) because I couldn’t login to my test account anymore) and the same thing happens.
The chances of this happening to 2 different people are I guess next to none. I wonder if the same happens with Flickr + Yahoo. Yahoo accounts take longer to sign up so I’m too lazy to test but my guess is yes. If I am right, I wonder what a good solution would be to prevent this from happening. If I’m wrong, I’m interested to find out what the fix is. I’m sure someone’s already figured it out with all these companies buying other companies.
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.
This is more of an Expression Blend exercise to simulate a looping panoramic interface on Windows Phone 7
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.
I was reading through the UI Design and Interaction Guide for Windows Phone 7 Series and found out that there is currently no panoramic application template or control provided as part of the standard application platform. Nothing stops us from creating our own though.
So, let’s start by creating a new Windows Phone Application project in Blend 4.
You’ll be presented with a default layout. Obviously, your panoramic screen design will go outside the bounds of the “phone”. Layout your screen accordingly. This is what I did with mine.
Now that I have all my elements on screen, I’ll create 3 visual states, one for each active session. Let’s go into our States tab and add a state group called Sections. To do that, click on the icon with a green plus sign.
In the Sections state group, let’s add the 3 states and name them accordingly. For each state, let’s also move the Grid along the x-axis.
We can also set the default transition to some built in easing functions to smooth out the user experience.
In my case, I used the back easing function but you can play around with the different functions to see what suits you. You can preview what the transitions look like by clicking on the Turn on transition preview button.
Okay, now we’re all set. The only thing left to do is enable state changing when a user flicks the screen either to the left or to the right. This is where we will be making use of the my WPBehaviorsLibrary. We’ll go into our asset library –> behaviors tab and you’ll find a behavior called GoToNextState and GoToPreviousState:
Drag and drop these two behaviors one by one to the LayoutRoot so that it looks like this:
With one of the behaviors selected, go into the property inspector. You have a few options you can set (Loop & UseTransitions) which are pretty self explanatory.
. You’ll notice there is also a trigger property. The default trigger type is an event trigger. Let’s go ahead and click New to select the FlickGestureTrigger.
When you click ok, you’ll find that the Gesture has a Direction property that you can set. Basically, we’re saying that the GoToPreviousState action gets fired when the user triggers a flick to the Right. Do the same for the GoToNextState behavior but with a flick to the Left.
And that’s it! Press f5 and select Windows Phone 7 Emulator, unless you’re lucky enough to have a Windows Phone 7 Device.
You’ll get something like this:
After reading some more on the UI Guidelines, they’ve mentioned a few things about the title like moving at a different speed from the sections, etc. so I’ve tweaked the animations a bit,and now I have the title outside the overall grid, animating it separately. I also have different easing functions on the first and last page from the middle one. The result is this:
You can get the code for this project as well as the library here. Also, although I’ve only managed to port (i.e. copy paste) the States behavior from the Mix Behavior Pack to a Windows Phone behavior, I’ve recompiled the pack to work with Silverlight 4. It’s in this folder as well.
I’ve been starting to explore iPhone development lately. At first I was taking my time at learning at Objective C which went fine for a while but one of the guys on the project was asking if I could help build some apps for Project Nimbus, translation: build stuff fast. We talked about MonoTouch.NET which is basically a framework that will allow you to code apps with .NET. JOY!!
First a quick intro about Project Nimbus: as Chewy would put it, it’s basically a supermarket for data here in Singapore. The team is hard at work at securing data from all sorts of providers. They currently have Hungry Go Where, Land Transport Authority, National Environment Agency, and National Library Board onboard as data providers, and i know they have quite a few more coming. What this means for developers is that if they have a great idea, they don’t have to go out by themselves with these big agencies and possibly spend tons of money on acquiring the data. If you want to find out more, check out http://projectnimbus.org/about/ for more information. They also very keen on getting input from developers as to what types of data they think would be useful, as well as feedback on the project as well. If you’re interested, the about page has a link to contact them
So back to my application. Right now, I’m figuring out how to actually get the data from the service. Looking at this entry, they actually provide a link to the data that’s returned when you make a call to the service. Check out the post, and towards the end, you’ll find a few links that shows how the data looks like.
First we create a webrequest to the URL that gives me the dataset we want. In this case, we want to get access to the NowcastSet i.e. current weather. The service actually gets authentication from the headers so we add these two keys & values. We then make the request and read it into a string for parsing later on.
Next, if we look at the dataset that’s returned, we see that it makes use of a few namespaces. To make things WHOLE lot easier for us, we’ll use one of the cool features of the .NET Framework which I LOVE called LinqToXML. If you want to find out more, check out http://msdn.microsoft.com/en-us/library/bb387098.aspx.
Let’s first add the System.Xml.Linq namespace in order to use it’s classes.
We can now add a our XNamespaces:
The following stuff is just magic. With just one statement using LinqToXML, we’re able to parse the xml string without having to use xpath or regex, etc. And, if you read the statement, it’s actually pretty descriptive of what it is trying to accomplish.
Given the structure of our sample data, we see that we’re essentially getting elements from entry.content.properties.
Note that the following line is just to make things a bit easier to read.
You can also just do the following and remove the let line, though I find it a bit more confusing to understand at first glance.
It’s an hour after the end of the Mix Keynote. I started watching the video on my Mac partition so I couldn’t download the tools straight away. After it was over, I rebooted, uninstalled my pre-RC bits and installed the tools for Windows Phone 7 Series (which you can find here), fired it up and created a new Windows Phone List Application:
I did make a few tweaks in my code since the original code wasn’t doing downloads asynchronously (which it should, to improve your apps performance and not lock the UI). So how does my code look now?
public void GetWeatherFromNimbusNEA(string AccountKey, string UniqueUserID)
{
WebClient wc = new WebClient();
select new WeatherEntryViewModel()
{
Area = weather.Element(dNS + "Area").Value,
Condition = weather
.Element(dNS + "Condition").Value,
Lat = weather.Element(dNS + "Latitude").Value,
Lon = weather.Element(dNS + "Longitude").Value
});
foreach (var r in results) {
Items.Add(r);
}
}
It’s practically the same code except I switched to the WebClient which Silverlight developers are already familiar with to download the string asynchronously. Once the results are returned, I add them to an observable collection which I have data-bound my UI Elements to.
Items = new ObservableCollection<WeatherEntryViewModel>();
The result is a basic list like application that displays weather information:
I’m excited about the WP7 platform and it’s definitely going to be a focus in my upcoming TechFriday posts! Next thing on my learning list is to share code between my two application platforms, iPhone and WP7. One thing is for sure though, I’m very happy with Project Nimbus as well because it provides a lot of data that I can already start playing around with. Kudos to the team!
I started out with two problems, the insanely low audio quality + this strange red light emitted from my headphone jack, and not being able to update to Bootcamp 3.1. I’ve been wrestling the internets to find out how to fix both these problems and it turns out, the former can be solved if you get the latter. I then found the thread on http://discussions.apple.com/thread.jspa?threadID=2326188&tstart=0 that says the Bootcamp Update has issues when you have remote viewing software. The advice was to remove any additional graphics adapters apart from your actual graphics adapter.
You can do this by going to the start menu, right-clicking on Computer -> Manage.
grr.. so print screen button in MBP is Fn+Shift+F11 (thanks F
You can right click on the extra display adapter and uninstall for now. You’ll probably need to reinstall your remote viewing software after the update.
After you uninstall, you should be able to install the Bootcamp 3.1 update with the Apple Software Update. I’m not sure whether that alone did the trick to fix the red light problem and the poor audio quality, but I had previously downloaded and installed the latest Realtek drivers for Windows 7 from their site cause I saw folks mentioning this solved their problem though this didn’t fix it for me before the 3.1 update.
Now I can get back to coding with some good background music. Yey Sunday!
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 have a good feeling about 2010. I think this year is going to be a year of change. I just realized that this year I’ll be turning 27 and that to me is just a bit scary. I still have a lot that I want to do and if I don’t start putting my mind to it, it’ll never happen. When I first thought of coming to Singapore, I had a plan in mind: That I would do SG for 1 or 2 years, then AUS, then the US. Somewhere along the way, I got a bit sidetracked What can I say, Singapore is definitely a great place to work. Here everything just works AND you feel safe at all times. I realized though that I’m getting a biiit too comfortable with the way things are around here. I’m just scared that before I know it, I might be permanently trapped in this comfort zone and forget that I should be moving around while I still can. So this year will probably be the year I start exploring again. It was supposed to be last year but I guess we all know the world wasn’t in that great a shape. Hopefully, this year will be different. I’m looking forward to new things in my life. People back home are experiencing lots of new things from a different aspect in life. I can’t have that just yet, but I would also want something to be excited about. Hopefully this year will be the year.
You’re probably wondering where the new year’s resolutions are. Well, there aren’t going to be any this year. As per experience, they just don’t work. :p But one thing’s for sure, 2010 sounds like a great year. And I’m looking forward to making it so.
<- new emoticon!
AND no cancel button. 
) using my gmail credentials. When signing up, I had to put in Fuu as Foo was not available as a username, which I probably found strange but forgot about at that time.
but my guess is yes. If I am right, I wonder what a good solution would be to prevent this from happening. If I’m wrong, I’m interested to find out what the fix is. I’m sure someone’s already figured it out with all these companies buying other companies.
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. 
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.
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.