Tips and Tricks

Working with Sample Data in Blend

Standard

When you are using external data sources in your app, such as a database on a remote server, one of the most common issues you encounter during development is that you may not have access to the data you’re going to use in the app. The database may not be created or populated yet, you might not have access to the database at this point or you may just want to prepare a mock-up for prototyping or presentation purposes and don’t want to spend time and effort for a database. This situation causes some minor inconveniences for developers and (especially) designers in two areas: When you are designing the app, and when you are running it.

During design time, you see the values of binded objects empty. So if you bind the text of a TextBlock object, it will be blank. To cope with this, designers would usually create the design with some placeholder values and apply the bindings after that. However, this has the following three downsides: You still can’t see how the app will look in design time; you can see what parts of the design needs to be fixed only when the app is running; and to fix the design you have to break the bindings, give placeholder values again, modify the design and then apply the bindings again, which gets annoying quite fast and makes designing process harder. For example, look at the following image from the example WinRT app we’ll create in this article:

The user information (including the picture) is binded to a data source. This is how it looks in runtime.

The user information (including the picture) is binded to a data source. This is how it looks in runtime, in a GridView.

And this is how that GridView's item template looks like in design time. The GridView itself doesn't even show anything in the XAML designer.

And this is how that GridView’s item template looks like in design time. The GridView itself doesn’t even show anything in the XAML designer.

During runtime, you need to create the sample data and set your object’s ItemsSource in the codebehind file. This has the following issues: If you are purely a designer, this requires you to mess with the code so it may be an issue for both you and your project team; you need to enter sample values yourself; and you need to remove the code you’ve added when you are able to connect to the live database.

Fortunately, to overcome these issues, Blend provides us a handy feature called Sample Data which allows us to create a sample data source that generates values based on our specifications and then bind our objects to that sample data source. Considering the benefit of using sample data without writing a single line of code and being able to see the sample values both within runtime and design time, this feature helps us solve the aforementioned problems and simplifies the designing process. And of course, in this article, we’ll create a Windows Store app in Blend that uses a sample data source.

➤ Sample data can be used in WPF, Silverlight, WinRT and Windows Phone…

Advertisement

10 Simple Tips About What Not to Do When Developing Windows Store Apps

Standard

Sometimes, small details can make or break your app in the long run. An extra 10 minutes you spend on a feature can leave a lasting good impression, whereas an extra 10 minutes you don’t spend can make the user deem the app unusable and forget it altogether.

This issue especially important in mobile app development, for two reasons:

1) The attention span of the users is limited in mobile apps. It is quite likely that they won’t stare at the app for hours: They’ll open it when they need it, use it for a few moments and then close it. Therefore the app has to be practical and impress the user in this limited time. If something frustrates the user at this point (especially when running for the first time), the app will probably be put away and never opened again.

2) Nowadays it is possible to create mobile apps in a matter of days. This can cause the developers to rush the development to put the app on the market as soon as possible, either because of time constraints or because of the urge to complete the app now that we’re very close to finishing it.

Well, this may not be the whole issue in WinRT apps since they are used in many devices ranging from tablets to laptops to PCs, but they are still treated as mobile apps and still they are subject to the aforementioned reasons. Combined with the fact that thousands of new apps are pouring into the market daily, you need to pay attention to details and think of the long run as a developer if you wish your apps to excel.

1

First of all, there are many guidelines for WinRT in the Dev Center and taking a look at them could help you a lot. There is a large amount of reading material, but just browsing or looking at the parts that intrigue you can help you make more beautiful and usable apps more quickly. Here are the links for an overview of Windows Store Apps, UX Guidelines for Windows Store apps and Planning Windows Store apps.

So, since I’ve developed and seen my share of WinRT apps in the last 1.5 years, I have come up with a list of some tips about what not to do in your Windows Store apps. Note that if you are familiar with WinRT, chances are you might already know some – most – all of the items I’m going to list here. But still, simple != unimportant, so take a look and see if there is something you haven’t seen or thought before, because these are the things that help increase the quality of your app.

Well then, let’s start the list. Keep in mind that they are not ordered in any way; I’m writing them as they pop up in my head. 🙂

➤ The good thing is, most of these small tips require at most 10 – 15 minutes of effort from you…

Less Used Properties in WinRT – Boredom Challenge Day 23

Standard

In my previous article, I’ve talked about some XAML controls which I never needed to use or learn what they are for. In this article, I’ll continue this concept and write about the Properties in WinRT (or .NET, in general) that I didn’t need to use, not even once in years, and how they work.

A glance of our Properties panel.

A glance of our Properties panel.

1) UIElement.AllowDrop Property

As the name suggests, this property allows our UIElement to be a target of a drag and drop operation. However, this property only defines that it can be a drop target, so we’d need to implement this dragging feature ourselves. (If you would like to learn how we can do this, take a look at this article.)

2) UIElement.CacheMode Property

The definition of CacheMode property says that CacheMode value indicates if rendered content should be cached as a composite bitmap when possible. The practical meaning of this is that, if we set a cache mode, the rendering operations from RenderTransform and Opacity properties will be executed on the GPU.

Apparently, this is an advanced feature for complex UIs to gain performance.

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

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

Tip: Using Code Snippets in Visual Studio – Boredom Challenge Day 20

Standard

Code Snippets feature of Visual Studio allows us to save pieces of code in snippet files, and then easily put them to our projects with the press of a few shortcut keys. This is useful if there is a specific code that you have to use again and again in different projects (for example, the code that handles Facebook login), so instead of writing it each and everytime (or opening another project and then pasting from there) we can just use the code snippet. This is also useful if you are giving presentations about a technical topic since you can prepare the code you’ll use beforehand and don’t bother to write them from scratch during the presentation.

If you have Visual Studio open now, try it yourself: Press Ctrl+K, X; then select a snippet and press enter. The related code will be automatically added to that line.

1

Under “Documents\Visual Studio 2012\Code Snippets” folder, you’ll see that there are folders for different programming languages, each with a My Code Snippets subfolder where you can put your custom code snippets. If you also wish, you can go to Tools -> Code Snippet Manager in Visual Studio and add other code snippet folders.

2

3

➤ Read on if you wish to learn how we can make our own code snippets

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

Http multipart/form-data Upload in Windows Store Apps – Boredom Challenge Day 16

Standard

If a service you want to use does not have an SDK or library for the programming language you are using, chances are you will be using their REST API to interact with the system. REST API works – excluding the technical specifications – by putting our parameters in the http query string and/or the http header and using Http POST, GET, PUT and DELETE methods to tell the API what we wish to do. For example;

This is the code used if we wish to post something in Facebook for .NET SDK:

var postparameters = new
{
    access_token = fbAccessToken,
    message = TextBoxPost.Text
};
dynamic result = await facebookClient.PostTaskAsync("me/feed", postparameters);

Doing the same action RESTfully would be like this:

                       HttpRequestMessage request = new HttpRequestMessage(
                                System.Net.Http.HttpMethod.Post,
                                new Uri(String.Format("https://graph.facebook.com/me/feed?access_token={0}&message={1}", fbAccessToken, WebUtility.HtmlEncode(TextBoxPost.Text))));

                        var response = await client.SendAsync(request);

As you can see, we set our parameters by adding them to the end of our URL. Actually, the former solution wraps the latter one for us, meaning that Facebook for .NET SDK gets the parameters from us and prepares the http requests itself to reduce our work amount.

Anyway, as I’ve said, we usually need to use REST APIs when we don’t have an SDK or library for the service we want to use. Judging from the code example above, it looks easy, right? Well, yes it is. As long as you have the documentation for it, you wouldn’t have any problems. Unless… you wanted to upload a file. Think of it, I said we put the parameters to the URL, but how do we do this with a file?

This is where multipart/form-data comes in, which is a standard way of encoding the files as byte arrays and sending them over with the http request. However, preparing our file as multipart/form-data is far from trivial, because it is very specific and requires you to delve deep into internet standards definitions to understand (if you wonder, try reading it: RFC 2388). And finally, if you wish to use it in Windows Store apps, another difficulty is that since the .NET classes are different for WinRT, the most common solutions on the internet are not usable in Windows Store apps. As of writing this, I was unable to find a working code sample.

Until now, of course. 🙂 In this article, we’ll see how we can prepare an http multipart/form-data request in Windows Store apps and upload a picture to Facebook with this method.

➤ It took me a complete (and very painful) day to put together the working code…

Tip: Passing Multiple Parameters to a New Page in Windows Store Apps – Boredom Challenge Day 8

Standard

Today’s post will be a small tip about how we can pass multiple parameters when navigating to another page in a Windows Store app.

Frame.Navigate() method, which is used for navigating to another page, allows us to send a parameter to the new page like this:

string parameter = "The information that you wish to send to the next page.";
Frame.Navigate(typeof(AnotherPage), parameter);

Then we get the parameter in OnNavigatedTo() function of AnotherPage, like this:

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            string passedParameter = e.Parameter.ToString();
        }

So basically we can send any object we want this way. But what if we want to send more than one parameter (which is quite common)? We can not just do it like this:

string parameter = "The information that you wish to send to the next page.";
int parameter2 = 5;
Frame.Navigate(typeof(AnotherPage), argument, argument2);

In this case, we can use application level global variables (but that isn’t good practice, really), or we can use the following way of navigation instead of Frame.Navigate():

string parameter = "The information that you wish to send to the next page.";
int parameter2 = 5;
Window.Current.Content = new AnotherPage(parameter, parameter2);

        public AnotherPage(string firstArgument, int secondArgument)
        {
            this.InitializeComponent();
        }

If we use Window.Current.Content to change the page, we forgo the navigation support, and if you have more than a few pages in our app, going back and forth becomes very impractical and ineffective since you have to do everything manually.

Therefore, we can create a custom class called AnotherPagePayload instead, set our parameters in it, and send that object:

        public class AnotherPagePayload
        {
            public string parameter1 { get; set; }
            public int parameter2 { get; set; }
        }

AnotherPagePayload payload = new AnotherPagePayload();
payload.parameter1 = "Information you want to send to the next page.";
payload.parameter2 = 5;
Frame.Navigate(typeof(AnotherPage), payload);

And then retrieve it like this, in AnotherPage:

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            AnotherPagePayload passedParameter = e.Parameter as AnotherPagePayload;
            string parameter1 = passedParameter.parameter1;
            int parameter2 = passedParameter.parameter2;
        }

That’s it. It’s a small detail, but if you don’t know how to do it when you start developing your app, correcting it later takes some time.

Thank you for reading.

Using a Public Dropbox File as Data Source for Our Apps – Boredom Challenge Day 5

Standard

If you are an individual developer (and especially a new-grad or a student), chances are you won’t have the resources to have a backend for your app, or maybe you need to just keep a small amount of information that you don’t want to get a server or hosting provider for. In this case, we can use an online storage service (SkyDrive, Dropbox, Google Drive, whatever you wish) to provide read only data for our apps.

1

For example, you want to create a TV app that gets video streams for multiple different TV channels. If you hard-code them into your app, you’ll start getting errors when a TV channel decides to change the address of their stream, and to replace it you have to change the link in your code and publish an update for you application (which will take several days, at least). Instead, you could put the links of the streams in a public file and then read them in your app when your app starts, which will give you the opportunity to change them any time, and your changes will be effective instantly. Heck, don’t just keep the links, keep the name and picture link and any other information you want about that TV channel (you can use XML or Json formatting) and then read all of this data in your app: This way you can instantly add new channels, edit existing ones or remove them whenever you want.

Therefore, if it is not a problem for the file to be publicly visible, this is a free (emphasis on free), quick, easy to use and effective method for providing read only data to our apps. In this article, we’ll use a public Dropbox file and see how we can use this in a Windows Store app.

➤ For bonus points, you can read app settings (like background color) from this file and change it whenever you want… 😛