XAML

Template-Binding in WinRT

Standard

In XAML, styles are resources which define the appearance of a control. By creating new styles (or modifying existing ones), you can customize how a control looks to have a more creative and beautiful interface. Since styles are resources, you can just create one that suits your needs and apply it to any suitable control you want.

However, when you create (or modify) a style, if you define everything in it explicity, you will be left with a very inflexible control which you can not further customize. For example, assume we have a bubbly button which has many small circles around it that represents the bubbles, like this:

1

I’ve added these bubbles explicitly with white color, so they will stay white no matter what. But what if I decide to use the button with a different background color in different parts of the app?

The circles are barely visible now.

The circles are barely visible now.

A solution to that would be creating a different style for each different color you would use, but that would be tedious and ineffective to say the least. Instead, why don’t we tell the bubbles to have the same color with the Button object’s Foreground property? This way, the style would just add the bubbles without specifying their color and we could set the color of each individual Button object the way we want. Sounds good, right?

Well, what I just described is called template-binding. Within a style or template, you can tell a property to get its value from the object that the template or style is applied to. You can template-bind any compatible properties together to achieve your desired effect.

And in this article, we’ll create a sample project which uses template-binding in order to create… EVIL BUTTONS!!1 *insert evil laugh here*

This is an evil button with horns. Notice that the horns get their fill and border colors from the Button object.

This is an evil button with horns. Notice that the horns get their fill and border colors from the Button object.

➤ If you look at the default style of a control, you’ll see that everything you set on the control is actually template-binded in the style…

Creating a “Page Turning” Effect in Blend – Boredom Challenge Day 29

Standard

Animations, when done properly, are a guaranteed way of increasing the visual appeal of an app. In my previous blog posts, we’ve seen how we can make simple animations in Blend, and later we’ve seen how we can combine these simple animations to make a card flip effect. So, contiuning on in this trend, I’ve set my eyes on the another such frequently used and nice-looking effect: Turning a page.

If you look at the card flip effect example, you can see that we can actually use it for turning a page by changing the center of rotation of the objects. However, this will result in stiff looking rectangle pages which lack the curvy edges of a real page. So, how can we turn that page more realistically?

Unfortunately, we can't make it look as good as this. At least, not easily.

Unfortunately, we can’t make it look as good as this. At least, not easily.

It is not possible to create an effect in Blend like shown in the screenshot. You can, however, create such an effect in code, using bezier curves and whatnot. But it looks quite complicated, and I’ve seen people suggesting to use Direct2D instead of creating such animations in code. Also, while searching, I’ve come across some code examples or custom user controls but they were generally for WPF (I’ve only found one custom control for WinRT, and it wasn’t free).

So our best bet would be animating curves in codebehind, or learning Direct2D. Unfortunately, ain’t nobody got time for that.

If you are muttering to yourself “But.. but, I just wanted to turn a simple page, nothing fancy!”, then you are at the right place. We can play around in Blend a little to make it “sort of” curvy and look just like shown in the video below:

In this article, we’ll create an example app which will have a book where the user can turn the pages with the animation shown above.

➤ Here I am, on the road again.. There I am, up on the stage..

Creating a “Card Flip” Effect with Blend – Boredom Challenge Day 27

Standard

In one of my previous blog posts I’ve talked about how we can make simple animations in Blend and shown how we can move stuff around in our interface. However, our animations would need to be a lot better than moving several elements around or spinning them in order to be visually appealing.

And one of the most widely used effects is, of course, flipping something onscreen like a card. This effect not only looks good, but also can be used as a nice transition animation between several elements in your page. And it is really easy to implement by using Blend. Here are the videos of the example app we will make (source code is at the bottom of the page :)):

My computer is a bit old, so it caused some stuttering when saving the videos. The animations are quite smooth in the app. 🙂

So, if this has grabbed your attention, read on and we will create the example app shown in the videos above.

➤ Bonus points for shouting “I activate my trap card!”

Infinite Scrolling in Windows Store Apps Using ISupportIncrementalLoading – Boredom Challenge Day 26

Standard

In my previous blog post we’ve seen how we can implement pagination in Windows Store Apps by using a FlipView, but that is actually kind of against the design principles of WinRT and that solution may not be always desirable for you. So you may want a GridView or ListView that incrementally loads their items as the user progresses through it, just like your main page in Facebook where you infinitely get the past items as your scroll lower and lower.

For example, my blog incrementally loads 7 posts as you scroll through. If you scroll quickly, you'll see the loading icon in the lower left and then the previous 7 blog posts will appear.

For example, my blog incrementally loads 7 posts as you scroll through. If you scroll quickly, you’ll see the loading icon in the lower left and then the previous 7 blog posts will appear.

Ok then, we want this feature in our Windows Store Apps. One direct approach would be using an ObservableCollection, then constantly checking the how much the GridView is scrolled, and if it is scrolled enough, loading the new items by adding them to the ObservableCollection. However, although that makes sense, trying to implement it manually is not really a good idea, especially when we have an interface made just for this purpose: ISupportIncrementalLoading (lol it’s like saying “I support incremental loading.”… Ok, that was lame).

Anyway, in this article, we’ll create an example app to see how we can use ISupportIncrementalLoading interface to load items incrementally so our user can scroll infinitely.

➤ I’m gonna say it… TO INFINITY AND BEYOND!

Implementing Pagination in Windows Store Apps Using FlipView – Boredom Challenge Day 25

Standard

If you have a large amount of items in a list, it is quite common to divide them into smaller sized lists (pages) in order to display them effectively. This is called pagination, and it is done for several (obvious) reasons: You won’t have to get all of the items at the same time (which may cause quite a performance hit while fetching and displaying the data) and the user won’t have to rummage through thousands of items to find the one s/he wants.

1

In Windows Store Apps, we wouldn’t normally need to implement such a feature due to the design principles (GridView, combined with SemanticZoom can work wonders in this case, check this article if you want to know more). However, this only eliminates the user’s side of the problem: You would still need to get all the items from your database at the same time. And although you can implement infinite scrolling with GridView (more items are incrementally loaded as user scrolls), you may not want the user to scroll at all and wish to display a set number of items where the user can navigate to the next set or the previous set (just like pagination explained above).

So, we want to be able to get a smaller number of items, load them only when the user wishes to view them, and let the user “flip” them like a turning a page. Seems like a job for.. FlipView! Yes, we can use a FlipView control to provide this functionality, by using a custom UserControl in its ItemTemplate and jumping through a few hoops.

A screenshot from the example app we'll make.

A screenshot from the example app we’ll make.

In this article, we’ll create an app that will use a FlipView for pagination. We’ll create it in such a way that in the beginning, we would only need to tell the FlipView how many pages we will have, and then load the items within the UserControl in FlipView’s ItemTemplate when a specific page is selected. Therefore, we will get the items user will view only when they will be used.

➤ Our items will be in a Grid, within a GridView, within a UserControl, within a FlipView… I really wanted to go deeper

Reorderable and Draggable Items in GridView and ListView – Boredom Challenge Day 24

Standard

A cool feature of the GridView and ListView controls is that by setting a few properties, we can allow the user to reorder the items on the GridView by dragging them around, or let the user drag an item from the GridView and drop it on other controls to perform an action. For example, we could let our user rearrange the items in their to-do list, or maybe create a kid’s game where they drag and drop items on correct colors.

An example reorderable to-do list.

An example to-do list while reordering items.

The controls that support reordering and dragging out of the box also come with their own animations, so we when we select an item in a GridView and drag it around, other items will move out of the way, and if we drag the item away, other items will go back to their original positions, which look quite nice and require no effort whatsoever from us.

The animation in GridView while dragging an item.

The animation in GridView while dragging an item.

In this article, we’ll see how we can add this functionality by creating a matching game, where the purpose will be to match the item with its picture.

➤ With a little effort, I bet we could make some nice puzzle games with this

Less Used XAML Controls in WinRT and What They Do – Boredom Challenge Day 22

Standard

I’ve developed apps for desktop (using WPF and Silverlight), Windows Phone and WinRT for about 3 years now, and one thing that I’ve noticed is that there are some XAML controls which I never needed to use and have no idea what they are for. So, today I’ve decided to search around and play with those controls to find out what their purposes are. 🙂

A glance of our Toolbox.

A glance of our Toolbox.

In this article, we’ll look around the Toolbox for controls in WinRT that are not so commonly used and see what they are used for and how they work.

Note: I’m writing this article from my point of view (says Captain Obvious). I mean, some of them may not be “less used” for you; I may not just needed to use them so far.

1) Pointer

You see that at the top of each and every tab in Toolbox, there is an item called Pointer. However, if you try to drag and drop it to the Designer it won’t work, and you can’t just add a Pointer control to the xaml code like <Pointer/>. Well, this is because Pointer isn’t a control. 🙂

Pointer is used in the following scenario: Assume you’re going to add a control to your app, like a Button. You select the Button in the Toolbox, and instead of dragging it to the designer, you wish to click on a location on the designer to add the button there. However, halfway through, you change your mind and wish to select something else on the designer, but you can’t click anywhere or you would add a Button. So, you go to the Toolbox and select Pointer instead, and return to the designer and select whatever you wish.

This is what Pointer is for: It allows you to clear your current Toolbox selection. 🙂

➤ Read on to see the full list of less used controls

Tip: “Path” Control in XAML – Boredom Challenge Day 21

Standard

The default controls in Visual Studio for WPF, Windows Phone and WinRT contain a XAML control called Path, which allows us to display simple shapes and drawings in our apps. The advantage of using it comes from the fact that it uses vectoral graphics, which provides us flexibility in several situations, the most prominent of which is, of course, resizing.

What it does is mix parts of different shapes together via a special markup syntax.

What it does is mixing parts of different shapes together via a special markup syntax.

For example, the above Skype logo is a Path object, which looks like the following in our XAML code:

        <Path Stretch="Uniform" UseLayoutRounding="False" Fill="White" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="145,100,0,0" Data="F1 M 15.364,15.168C 14.9453,15.7707 14.3307,16.2427 13.5267,16.5813C 12.7213,16.9186 11.7707,17.088 10.6693,17.088C 9.35334,17.088 8.26267,16.86 7.4,16.3933C 6.79067,16.06 6.29467,15.612 5.91334,15.0546C 5.52801,14.4973 5.33601,13.9507 5.33601,13.4173C 5.33601,13.1027 5.45467,12.8306 5.68934,12.6066C 5.92533,12.3826 6.228,12.2693 6.58801,12.2693C 6.88267,12.2693 7.13334,12.36 7.33734,12.5333C 7.54134,12.708 7.71334,12.964 7.85334,13.3C 8.02001,13.688 8.20267,14.0133 8.39468,14.276C 8.58801,14.5293 8.86001,14.744 9.21201,14.9133C 9.55868,15.0813 10.02,15.164 10.5973,15.164C 11.388,15.164 12.028,14.9933 12.5173,14.656C 13.008,14.316 13.244,13.9013 13.244,13.4C 13.244,13.0014 13.116,12.684 12.856,12.436C 12.5933,12.1867 12.2533,11.996 11.8307,11.8627C 11.4067,11.728 10.8373,11.5853 10.124,11.436C 9.16801,11.2267 8.36667,10.9827 7.71734,10.704C 7.06667,10.4226 6.55067,10.04 6.16801,9.55463C 5.78268,9.06666 5.592,8.45866 5.592,7.74C 5.592,7.05335 5.79333,6.43732 6.2,5.904C 6.604,5.36933 7.18668,4.95866 7.952,4.672C 8.71334,4.38667 9.60934,4.24403 10.6333,4.24403C 11.4533,4.24403 12.164,4.33866 12.764,4.52799C 13.364,4.72001 13.8613,4.97065 14.2627,5.284C 14.6587,5.60001 14.9493,5.92933 15.1373,6.27869C 15.3227,6.628 15.4133,6.97065 15.4133,7.30134C 15.4133,7.61066 15.2933,7.89066 15.06,8.13734C 14.828,8.38264 14.528,8.508 14.1787,8.508C 13.864,8.508 13.6187,8.43464 13.4453,8.27998C 13.2787,8.13334 13.104,7.896 12.916,7.56666C 12.676,7.10401 12.3907,6.74799 12.0573,6.49198C 11.7307,6.24 11.1947,6.10932 10.452,6.11066C 9.76267,6.11066 9.21201,6.25065 8.79467,6.52665C 8.37467,6.80668 8.17467,7.13065 8.17467,7.51066C 8.17467,7.75065 8.24401,7.95069 8.38267,8.12397C 8.52001,8.29731 8.71734,8.44666 8.96667,8.57331C 9.21734,8.70267 9.47334,8.80399 9.728,8.87333C 9.98934,8.94666 10.4173,9.05335 11.0147,9.19465C 11.7653,9.35465 12.4453,9.53602 13.0573,9.73331C 13.6667,9.92933 14.1867,10.1693 14.616,10.4533C 15.0493,10.736 15.388,11.096 15.6293,11.5333C 15.872,11.9706 15.9947,12.5027 15.9947,13.1307C 15.9947,13.8867 15.7827,14.5667 15.364,15.168 Z M 20.4413,12.2106C 20.52,11.708 20.5613,11.1933 20.5613,10.6667C 20.5613,5.19999 16.132,0.769325 10.664,0.769325C 10.14,0.769325 9.624,0.812019 9.11868,0.890663C 8.20801,0.326668 7.13201,7.62939e-006 5.97867,7.62939e-006C 2.676,7.62939e-006 0,2.67731 0,5.98133C 0,7.13468 0.32534,8.20936 0.890678,9.12269C 0.810669,9.628 0.768005,10.14 0.768005,10.6667C 0.768005,16.1333 5.2,20.564 10.664,20.564C 11.1893,20.564 11.7053,20.524 12.2107,20.444C 13.1213,21.0067 14.1973,21.3333 15.3507,21.3333C 18.656,21.3333 21.3333,18.656 21.3333,15.3533C 21.3333,14.2 21.004,13.1253 20.4413,12.2106 Z "/>

The extremely long string value in the Data property of the Path object is how our shape is defined; meaning, it is the mathematical calculation. We can find many icons and symbols for Path control on the internet (I usually use http://www.thexamlproject.com, which contains hundreds of them). However, if you are interested in how you can create them yourself, Blend can import Adobe Illustrator files, so could draw them in Adobe Illustrator and import them to your project via Blend. And if you wonder how the syntax works, this article might be a good place to start.

Now, you might be saying “Why bother with this when I can just use images?”. Well, there are a few specific situations where using a Path has advantages.

➤ Read on to see when we should use a Path instead of an Image

Making Simple Windows Store Games in XAML – Boredom Challenge Day 19

Standard

If you wish to develop games for Windows 8, you’ll need to learn how to use Direct3D, HTML5 or a game engine that supports Windows 8 (like Unity or Construct2). Since XNA is not supported in Windows Store apps (and also since Microsoft has announced XNA will be discontinued), if you were using only XNA (like me) and you didn’t have enough time to learn the technologies I’ve listed, you may end up wondering how to create a game without you requiring to learn something entirely new.

If that is the case, you’ve found your easy solution. As long as the game is simple (don’t expect to put a physics engine or 3d models in there), we can use XAML’s features (like animations) and add the game logic to the codebehind files for a simple game.

Don't expect something like Angry Birds, but I bet we could make a side-scrolling platformer.

It may not be something like Angry Birds, but I bet we could make something enjoyable.

In this article, we’ll make an example game called… Catch the Cage!, starring Nicolas Cage. 😛 It will be a classic game where you tap the ball on the screen to keep it from falling out of the screen. Here’s a screenshot to whet your appetite. 🙂

2

➤ After this masterpiece, you won’t even bother to look at Angry Birds

Integrating Facebook in Windows Store Apps Part 2 – Boredom Challenge Day 13

Standard

In my previous article, we’ve seen how we can sign in to Facebook, display our user’s data and share status updates in Windows Store apps. In this article, we will take our example app further by reading and displaying the user’s timeline and allowing the user to like/unlike posts, view a post’s comments and also add comments of his/her own.

1

We’ll start with the part 1’s completed app and continue from there. If you wish to go with the article step by step, you can get it here. If you’d rather not, jump to the end of the article for the completed source code. 😉

In this article, we will see how we can create Json classes for Facebook items, how we can read and display our user’s timeline, how we can like/unlike posts and how we can display and add comments. Apparently we have a lot of work to do.

➤ We’re basically making a Facebook client here…