Month: March 2013

Making Simple Animations with Blend in Windows Store Apps

Standard

When making an application, using animations is a good way to impress the user and make your application look better. Either for making a more lively menu with sliding buttons or adding some visual effects to the background, animations come as a very simple yet powerful tool for good looking applications. In this article we will be developing a Windows Store application that contains several different animations which show several different features.

I will explain how animations work as we build our application, so we will start with opening up Visual Studio and creating a new Windows Store app.

1

In the MainPage.xaml, add a button which will be used to start the animation.

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Button x:Name="startAnimationButton" Content="Let the show begin" HorizontalAlignment="Left" Margin="100,100,0,0" VerticalAlignment="Top"/>
    </Grid>

Then, right-click MainPage.xaml and select “Open in Blend”.

2

➤ Let’s see what we can make with animations…

Advertisement

Using and Debugging Background Tasks in Windows Store Apps

Standard

When we are developing a Windows Store app, we may need to do something even if our application is suspended or closed; such as updating our live tile, showing a tile notification, syncing data or performing another specific action. Since Windows 8 is an operating system that emphasizes on power saving, we are not allowed to keep our application working in the background. Therefore, to have this functionality Windows 8 supports a background task system which allows us to define a background task (basically, our own lines of code) that will be executed periodically or when certain conditions are met. An example for this would be the Store application on the start screen, which periodically checks if there are updates to our installed apps, but does so when we have an internet connection.

1

Before moving on to developing our application, there are a few key points we need to know about background tasks. Background tasks have CPU and network constraints, we can not execute code that takes a long time to complete in our background tasks. The network constraint is active only when the device is on battery, and it is not calculated in terms of bandwidth but the amount of battery used by the connection. The limits of these constraints change depending on the type of the background task used.

If it is an application that needs to be frequently updated (such as a mail or VOIP app), the app will need to placed on the lockscreen but the background task will have a more relaxed resource management (2 seconds of CPU time). The catch is that the maximum number of apps that can be on the lockscreen at the same time is 7, so your user will need to add your app to the lockscreen in order your background task to work. If the application does not need to be updated that frequently, however, we can use a maintenance task, which doesn’t require the app to be on lockscreen and will be triggered based on certain conditions, but has a more restrict resource management (1 second of CPU time).

2

➤ Let’s see how background tasks work…

Using Microsoft Translator in Windows Store Apps

Standard

Microsoft Translator is a translation portal by Microsoft as part of Bing services that can provide a machine-translation of texts or entire web pages in (currently) 40 different languages. Microsoft Translator also provides a set of web service APIs (that can be called via an HTTP REST service, an AJAX callable service, or a SOAP service) for developers who wish to use Microsoft Translator in their applications. In this article we will develop a Windows Store application that uses the SOAP service of Microsoft Translator to translate text between languages, and if supported, speak the translated text.

Microsoft Translator is available on Windows Azure Marketplace and is licensed monthly based on the number of characters sent to the translation service. However, it is free up to 2.000.000 characters each month, so we can just sign up and start using it for free.

We will start by going to Windows Azure Marketplace and signing in with our Live ID. If you don’t have a Windows Azure Marketplace account associated with the Live ID you used to sign in, you will simply create one by entering your name, surname, country (and optionally your organization).

1

2

After your registration is complete, either search for “Microsoft Translator” on Windows Azure Marketplace or click here to go to Microsoft Translator page, and click Sign Up at the bottom offer (2.000.000 characters).

3

➤ Let’s see how we can use Microsoft Translator…

Using IValueConverter in Windows Store Apps

Standard

When using data binding, we may sometimes want to alter the data before presenting it to user, or we may want to change the appearance of something based on the value of the data. For example, assuming we are binding a date value, we may want to change its formatting, or we may want to change the background color based on whether the date is before or after the current date, or even show something special on certain dates (such as flowers on February 14th).

When we bind a list of items to a control (such as GridView or ListView), we can not edit individual templates of the items. We may also be getting our data from another source, such as a webservice, so we may not have control over the data we receive. So, in order to implement the features I’ve explained on the previous paragraph, we will need to use IValueConverter interface, which provides exactly what we need. In this article, we will be developing a Windows Store application that uses the IValueConverter interface.

We’ll start by opening Visual Studio and creating a new Windows Store Blank App project. I’m naming the project IValueConverterApp.

1

For this example, we will have a list of students. Our students will have a grade between 0 and 100. Our application will display these students, but their grades will need to be in letters (between FF and AA), the item color will be different based on the grade (100 – 80 will be green, 79 – 60 will be orange, and 59 – 0 will be red), and if the grade is 100 we will put a star next to the student’s name.

➤ Let’s see how we can use IValueConverter…

Windows 8 GridView GroupedHeaders with Semantic Zoom

Standard

Hi everyone,

In Windows Store applications, GridView control provides us a visually attractive, flexible and customizable way of presenting our data to the users. Although we can edit the ItemTemplate to show each item the way we want, there may be situations where we need to use more advanced features of the GridView. One of these situations is when we wish to group our data (dynamically), and put headers on top of the groups. Here’s an example, grouped by their month and year:

1

As you can see, this functionality can come in handy in many situations. However, before going on to explain how we can do this, there is another issue we should think of. What if we have a lot of items in our GridView, or the user wishes to look at an item at last group (in the previous example, the earliest date)? In that case, the user would need to do a good amount of scrolling, and that reduces the usability for our application. To prevent this in our Windows Store apps, we can use semantic zoom.

2

Semantic zoom allows the user to see the categories of the items with a pinch move (or with ctrl + mousewheel), and then select them to go directly to that group. In the example, you can see that items are grouped by their month and years. We can add semantic zoom to our grouped gridview so the users can select and go directly to their desired group.

➤ Let’s see how we can use grouped headers and semantic zoom…

New posts in English

Standard

Hi everyone,

I’ve decided to write my articles mainly in English from now on. I feel they will be more useful since more people will be able to read and understand them.

Let’s see how this will work out. 🙂