Tag Archives: windows 8 tutorial

Investigating Toast Notifications

Toast notifications are simple notifications that appear in the upper-right
corner of the screen (upper-left corner for right-to-left languages); when they
appear, they play a default sound. Toast notifications allow apps to
communicate with users even if the user is using another app, on the Start
screen, or on the Windows desktop. Actually, toast notifications are most
useful when the user isn’t working with the app that raised the notifications—
clicking the toast redirects the user back to the app that raised the notification, and optionally (and really should) take the user to the specific part of the
application that needs attention. Toast notifications can originate from a
Windows Store app, from a desktop app, or from the cloud.

Investigating Toast Notifications

Toast notifications can contain text and, optionally, an image. Clicking the
toast returns you to the calling application. You cannot add any other user
interface elements (like buttons)—you can include text and maybe an image,
and that’s it!

Your toast notifications can play a sound as they display, and you can select
the sound from a list of available Windows sounds. The toast appears in the
upper-right corner of the screen, and can be activated, dismissed, or ignored by
the user.

If the user clicks or taps on the toast, Windows launches the associated
application. Users expect that the current view in the newly launched app
corresponds with the information on the toast—if the toast indicates a new
email message, for example, users expect that tapping the toast notification
displays the application with the new email message selected. To make this
possible, you can specify context information in the toast to pass through to the
application to set the context for the newly launched application.

Think of it this way: Toast notifications provide the only means of interrupting
the user’s activity in one app with information from another.

You should only use toast notifications for information that’s of high interest
to the user. Perhaps your application requires some sort of user opt-in: look at
a new email message, or respond to an IM message? These are both common
uses for toast notifications. Remember: because of settings, or because the user
is busy, the user may never see your toast notification.

Different Types of Toast Notifications

Windows 8 provides two distinct types of toasts. The first, the standard toast
notification, remains on the screen for seven seconds, and then disappears.
(The user can click or tap the notification to navigate back to the original app
during the time it’s on screen.) The toast displays a brief sound to alert the
user, although you can alter the sound, or play nothing at all. This type of toast
is best for things like a social media update, or an IM sign-in. Given the two
options, this is the type of toast you should use in most situations. (This is the
default toast type, as well.)

The second type of toast is the long-duration toast. It looks the same as the
standard toast, but it remains on the screen for 25 seconds, unless the user
dismisses it. You can optionally make the long-duration toast stay on screen
longer, and you can loop audio. Imagine that your application connects a VOIP
call, and you need to alert the user that there’s an incoming call. You need the
toast notification to continue ringing, and stay visible, until the caller hangs
up—that may take longer than 25 seconds. Use the long-duration toast
notification when you want to grab the user’s attention because a human is
waiting for the user’s attention.

In addition to the two basic toast types, you can also create scheduled and
recurring toast notifications. Toast notifications can be scheduled to appear at a
specific time, and this usage is helpful for alarms, calendar reminders, and
precise timing-based notifications. You can also display the toast notification
multiple times (although this usage can be irritating)—this increases the user’s
chance of seeing the toast notification. Scheduled toast notifications require
you to specify the date and time at which the toast should appear.



ldn-expertkgetzKen Getz is a Visual Studio expert with over 25 years of experience as a successful developer and consultant. He is a nationally recognized author and speaker, as well as a featured instructor for LearnNowOnline. This post is an excerpt from the online courseware for our Windows 8 Using XAML: Views, Resources, and Toastscourse written by expert Ken Getz.

Working with Image Resources

Although you cannot store images in resource files, they too represent
resources in your application. If you have images that contain text, you can
treat each localized image like a localized resource file, using the same folder
structure and file-naming scheme as you learned about for resource files. The
standard convention for localized images, however, is to place the “default” set
of images in the root Images folder, with localized images stored in subfolders
named for the corresponding language (es-mx, for example, or just es for all
Spanish-speaking locales).

But this isn’t the issue you’ll focus on in this section. Instead, this section
focuses on another issue facing developers when images make up part of the
application: image scaling. Your application must handle appropriately scaled
images for any screen resolution that Windows 8 supports. Visual Studio,
along with the Windows Runtime, makes this extremely easy, but you have to
know the tricks involved.

Most often, you will need to provide multiple versions of images to correctly
support different screen resolutions, which generally range from 1024×768 all
the way up to 2560×1440 or higher. (Imagine Windows 8 spread across four or
more large monitors, in a wall display!) An image that looks fine on a small
tablet will certainly not scale up to look decent at a super-high resolution.

This is just a fact of digital life: Without some sort of image scaling, as the
pixel density of the display device increases, the physical size of images seems
smaller. Windows scales the UI to match the size of the screen, and the scaling
is performed in known increments.

The Figure below, from the Microsoft documentation, demonstrates how different
screen sizes, and different pixels per inch (PPI) display. Clearly, the higherresolution
slate, at the same physical size, displays more pixels per inch and
therefore provides a clearer image.

PixelDensity

The Figure above. Compare pixel density on two displays of the same size.

Because of the differences in screen resolution and pixels per inch, Windows
scales every application for the current screen and its properties. In order to
ensure that images look their best at every screen resolution, you should
always provide three copies of every image in your application, sized three
ways:

  • 100%, when no scaling applied.
  • 140%, for 1920×1080 devices with a minimum dots per inch (DPI) of 174.
  • 180%, for 2560×1440 devices with a minimum DPI of 240.

Yes, this adds a great deal of work for you, but it ensures that your images
don’t appear distorted when Windows scales your applications.


ldn-expertkgetzThis post is an excerpt from the online courseware for ourWindows 8 Using XAML: Views, Resources, and Toastscourse written by expert Ken Getz.

Ken Getz is a Visual Studio expert with over 25 years of experience as a successful developer and consultant. He is a nationally recognized author and speaker, as well as a featured instructor for LearnNowOnline.

Reacting to a Language Change

Although it won’t happen every day, your application may need to react to the
situation in which a user changes the currently active language in Windows,
while your application is running. Although it’s possible to handle the event
that occurs in this situation, it’s important to note that the technique you’ll see
here allows you to programmatically update text—it won’t automatically
refresh user interface elements to which you have bound localized text using
the x:Uid property. (There may be a simple way to make this work, but the
Microsoft documentation certainly doesn’t mention it!)

Your job, then, involves reacting to an event that your application handles in
reaction to the user language changing. In the event handler, your code must
update all the user interface elements that contain localized text.

As mentioned earlier, Windows provides two means of accessing resources
programmatically. You can use the ResourceLoader class, as you have done previously; or you can use the ResourceManager class, which provides more functionality at the “cost” of being more difficult to use. You can certainly use the ResourceManager class to do everything you’ve done so far (for which you previously used the ResourceLoader class).

In order to retrieve a reference to the resource manager for the currently
running application, use the ResourceManager.Current property. You will also need to interact with the ResourceContext class, which encapsulates all the factors that might affect resource selection (such as the selected language, for example). The collection of factors that affect resource selection is an instance of the ResourceQualifiers class, and a ResourceContext’s QualifierValues property retrieves a ResourceQualifiers collection containing information about the context’s resource qualifiers.

The QualifierValues property of a ResourceContext object returns a collection
of type IObservableMap<K,V>, where K represents the type of the key, and V represents the type of values in the collection. This class raises its MapChanged event when any of its members changes, and this occurs when
the language changes. (Remember, the qualifiers represent all the characteristics that help the ResourceManager instance figure out which string to load when you supply a resource name, and the current language is certainly one of those qualifiers!)

Given all this information, your code must trap the MapChanged event of the
QualifierValues property of the ResourceContext object provided by the
DefaultContext property of the current ResourceManager. In other words, you
must handle this event:

That’s quite a mouthful! And, of course, there’s a wrinkle. There’s always a wrinkle. The MapChanged event occurs on a thread other than the user interface thread, and updating the user interface from a separate thread isn’t allowed. This certainly complicates updating the text on the page! You must ensure that the code that updates the page is called from the page’s thread.

In order to ensure the correct thread switch, your code should call the current
page’s Dispatcher.RunAsync method, which guarantees a thread switch to the correct thread. Of course, when using the RunAsync method, you must include the await keyword in the call; when you use the await keyword in the method call, you must modify the procedure declaration to include the async keyword (so the compiler knows to handle this procedure specially).

In addition, you can specify the priority for the asynchronous call to the code that updates the page’s text: The sample uses the CoreDispatcherPriority.Normal parameter in the call to the RunAsync method.

After adding the event handling code, you should call a procedure that you
create to update the text on the current page. Remember that your code runs,
allowing you to manually update text on the screen, but no updates occur
automatically—“bound” resources won’t update.

ldn-expertkgetz

This post is an excerpt from the online courseware for ourWindows 8 Using XAML: Views, Resources, and Toastscourse written by expert Ken Getz.

Ken Getz is a Visual Studio expert with over 25 years of experience as a successful developer and consultant. He is a nationally recognized author and speaker, as well as a featured instructor for LearnNowOnline.

Windows 8: Adding Items from a File System

windowslivewriter_customplacementwithinanitemscontrolinwpf_ee53_image_6

In order to take full advantage of an ItemsControl, you must be able to bind it to an existing collection of data. Most of the time, you won’t add items to an ItemsControl individually. Instead, you’ll most likely bind the ItemsControl to some sort of data source. Any data that can be stored and retrieved as a list or array of items is fair game for display in an ItemsControl.

Data in an ItemsControl can come from any collection of data, such as an inmemory data structure, the results of calling a Web service, or data retrieved from a database. It’s really simple to bind an ItemsControl to any collection of data in memory: You set the ItemsSource property to the collection of data, and the ItemsControl does the rest of the work.

Adding Items from File System

What if you wanted to bind ItemsControl to some real data? The simplest place to get “real” data is from the file system, and you can easily bind an ItemsControl to information from the file system, with a little effort.

Although it’s not difficult to bind to information from the file system, it does require a little more effort than you might expect. In order to retrieve any information, you’ll need to create an instance of the FileInformationFactory class, which provides several use methods:

  • GetFilesAsync: Retrieves a collection of FileInformation objects. The method does its work asynchronously, but returns the full file list.
  • GetVirtualizedFilesVector: Retrieves a virtualized vector of IStorageInformation objects. By virtualizing its results, this method makes it possible for an ItemsControl to effectively display a huge amount of data. Scrolling through the control causes the data source to retrieve more data.
  • GetVirtualizedFoldersVector: Works like the GetVirtualizedFilesVector method, but retrieves only folderinformation.
  • GetVirtualizedItemsVector: Works like the GetVirtualizedFilesVector method, but retrieves both file and folder information.

NOTE: The IStorageInformation class acts as a base class for information about files and folders.

In order to bind to data retrieved from the file system, you will also need to follow these steps:

  1. Optionally, create a QueryOptions object whose properties describe the requested sort order and filtering. If you don’t specify a QueryOptions instance, you will retrieve data in natural order including all the filesand/or folders.
  2. Retrieve a reference to a specific folder, or use a known folder (an item in the KnownFolders class).
  3. Create an instance of the FileQuery class, calling the CreateFileQuery method of a storage folder, optionally supplying the QueryOptions object you created previously.
  4. Create an instance of the FileInformationFactory class, passing the FileQuery you created previously, and optionally, other parameters.
  5. Set the ItemsSource property of an ItemsControl to the results of calling one of the FileInformationFactory’s methods, such as GetVirtualizedFilesVector.


ldn-expertkgetzT
his post is an excerpt from the online courseware for our Windows 8 Using XAML: Views, Resources, and Toasts course written by expert Ken Getz.

Ken Getz is a Visual Studio expert with over 25 years of experience as a successful developer and consultant. He is a nationally recognized author and speaker, as well as a featured instructor for LearnNowOnline.

Windows 8 Using XAML: Choosing a ListView or GridView Control

Windows 8 ListView and GridView controls both allow you to display data, but they display their collections of data differently. The following article takes a look at both controls and how they are used.

Choosing a ListView or GridView

In order to display multiple data items, you can select the ListView or GridView control. Both controls display collections of data, making it easy to present items from a list, or any other bound data source. Both controls provide similar functionality, although they display their data slightly differently. Both controls derive from the base ItemsControl parent class, and both inherit the functionality of the base control. Because both controls inherit from the same base class, they share a large number of properties. As a matter of fact, the controls are so similar, they’re often both referred to using the name ItemsControl (the base class), rather than saying “ListView and GridView controls”.

TIP: To be honest, the ListView and GridView controls are so similar, you can think of them as a single control. The major difference between the two is the manner in which they lay out their items, and it’s easy to change the layout so each control emulates the other.

The ListView control displays its data stacked vertically, much like a standard list box. Use this control to display an ordered list of data, like a list of email messages, a list of contacts, or search results. It’s also useful in master-detail layout scenarios—you can display the list of master items in a ListView control, and the details in some other kind of control. You can control every aspect of the layout of data in this control, including how each data item appears in the list, using templates.

The GridView control displays its data stacked horizontally in rows (although you can alter this behavior and have it displayed in columns first, as well). You use this control when you need more space for rich visualization of each item to be displayed. As with the ListView control, you can use templates to control the layout of each item, displaying the data in any manner you need.

There are several ways to display data in an ItemsControl. You can:

  • Add items directly to the Items collection property, in XAML or in code.
  • Bind the ItemsSource property to a data source.

Applications often use both a ListView and a GridView control bound to the same set of data, so you can alter the view based on the current screen layout. For example, you might use a GridView control in full-screen layout, but a ListView when in Snapped layout. The first Figure below shows a sample application using the GridView control, and the second Figure below shows the same application, in Snapped view. The trick here is to show and hide the two controls, based on the current layout.

using a GridView control

using a ListView control


Thumbnail for 559T
his post is an excerpt from the online courseware for our Windows 8 Using XAML: Views, Resources, and Toasts course written by expert Ken Getz.

Ken Getz is a Visual Studio expert with over 25 years of experience as a successful developer and consultant. He is a nationally recognized author and speaker, as well as a featured instructor for LearnNowOnline.

Windows 8 using XAML: BeginTime Animation Property

If your storyboard contains more than one simultaneous animation, you may need to delay the start of one or more of the animations. To add this behavior,you can set the BeginTime property so that specific animations delay.

Taking the previous examples, imagine that you want the circle to move fromleft to right and back again, and on the second pass, increase the height, and later, the width of the circle as well. Although all three animations exist within the same storyboard, only one of the animations starts immediately—the other two delay for a fixed period of time.

The following markup the BeginTime property to modify the start time for specific animations within the storyboard:>/p>

TIP: If you create a storyboard that contains multiple animations for a single object, you can save some typing by “factoring out” the TargetName property, and applying it to the storyboard rather than to each individual animation.

You may find it worthwhile to investigate the rest of the animation properties, as well—they all play a part in creating interesting and useful animations.

This post is an excerpt from the online courseware for our Windows 8 Using XAML: Bindings, Shapes, and Animation course written by expert Ken Getz.

Thumbnail for 557Ken Getz is a Visual Studio expert with over 25 years of experience as a successful developer and consultant. He is a nationally recognized author and speaker, as well as a featured instructor for LearnNowOnline.

Windows 8 Using XAML: Using the PointAnimation Class

xamllogo_3

Much like the animation class we discussed in a previous article, the PointAnimation class allows you to animate a property that represents a point. For this example, AnimatePoint.xaml, uses a Path element whose Path.Data element contains an EllipseGeometry element. But using this technique, ratherthan using an Ellipse object, the markup can specify a Center property for the path which is a point:

The parent Canvas.Resources element contains the following markup:

This animation moves the shape from its start location (100, 100) to its endinglocation (300, 300) over the course of three seconds. The Figure below shows the moving ball, diagonally bouncing back and forth across the application’s window. Note that the animation goes back and forth, and repeats forever—those are artifacts of the AutoReverse and RepeatBehavior properties of the animation, which you’ll learn about soon.

Figure 1. It’s hard to tell, but the circle is moving!

learnnowonline expert Ken GetzThis post is an excerpt from the online courseware for our Windows 8 Using XAML: Bindings, Shapes, and Animation course written by expert Ken Getz.

Ken Getz is a Visual Studio expert with over 25 years of experience as a successful developer and consultant. He is a nationally recognized author and speaker, as well as a featured instructor for LearnNowOnline.

Windows 8 using XAML: Animation Class and Enabling Animation

url2

In Windows 8, animations are an integral part of the user experience. As you work with various Windows Store applications (or the built in user interface), you’ll find animations at every turn: From the log-in screen, to the Start menu, to any application, animated transitions are everywhere.

Although you’re better off using the built-in theme transitions, there are many reasons why you might want to create your own custom animations. If at all possible, you’ll want to avoid using any more dependent animations than you must (that is, animations that run on the UI thread), but in some cases, that’s the only way to create the necessary

XAML animation revolves around changing the value of a single dependency property over time. You might change the width of a button from 30 to 100 pixels over a period of 10 seconds. Perhaps you might change the position of a gradient stop from 0 to 1 over 5 seconds. It’s all about finding the right property to change, and the correct length of time over which to

The Animation Class

Within the following markup, locate the DoubleAnimation element:

As you might infer from the attributes, this animation element indicates that the animation should take some property from a value of 100 to 200, over a duration of 5 seconds.

This element creates an instance of the DoubleAnimation class, one of theseveral different classes that animate different types of properties. You can choose from multiple types of animation classes:

  • Linear interpolation: The changing property value varies smoothlyand continuously for the duration of the animation. Silverlight includes three such classes, while WPF includes the following commonly usedclasses, plus several others: DoubleAnimation, PointAnimation, andColorAnimation.
  • Key-frame animation: Values can change abruptly and/or they can change using linear interpolation. Silverlight includes four such classes, while WPF includes the following commonly used classes,plus several others: DoubleAnimationUsingKeyFrames, PointAnimationUsingKeyFrames, ColorAnimationUsingKeyFrames,and ObjectAnimationUsingKeyFrames.

The DoubleAnimation instance you’ve seen smoothly and continuously varies the value of a property from 100 to 200 over the course of five seconds. But the markup doesn’t indicate what property to change! That requires another >element—the Storyboard element.

Enabling the Animation

In Windows Store applications, not all animations are allowed to run, by default. If your animation might have an impact on your application (specifically, animations that affect the layout), you must specifically enable the animations—they won’t run, otherwise. To enable the animation, set the Animation.EnableDependentAnimation property to True. Animating some properties, such as Opacity, don’t require setting this property to True, as this animation wouldn’t affect the layout of the application—in general, animating any property that causes an element to move or adjust the layout of the page requires this property to be set to True.

ldn-expertkgetzThis post is an excerpt from the online courseware for our Windows 8 Using XAML: Bindings, Shapes, and Animation course written by expert Ken Getz.

Ken Getz is a Visual Studio expert with over 25 years of experience as a successful developer and consultant. He is a nationally recognized author and speaker, as well as a featured instructor for LearnNowOnline.

Adding Reflection Effects with XAML

ldn-expertkgetz

Besides the obvious transformation effects, you can use transforms to create rich and varied effects in your applications—it’s all about figuring out which transforms provide the effects you want. Imagine that you want to create a reflection effect. This is simple, combining a transform and opacity settings. The Figure below demonstrates the kinds of effects you can create. In this figurefo you see an Image element placed in two Grid cells. The Image in the lower Grid cell has been compressed vertically, flipped vertically, and has its opacity set.

If you examine the markup for ReflectionDemo.xaml, you’ll find the following >features:

  • The page contains a Grid with two rows:

  • The top row contains an image, with its Stretch property set to Uniform so it displays the entire image in the space available:

  • The bottom row contains the same image. You need some way to manually position the image. You could set its coordinates in a container like a Canvas, but in this case, all you need to do is flip it vertically. To flip it in place, you would normally set theRenderTransformOrigin property to (0, 0.5). Because the intent is toscale the “reflection” image so that it’s slightly shorter than the original image (80% of the original size), the markup sets theRenderTransformOrigin property to 0.44 so that the images line up(there was some trial and error involved to get the images set justright):

  • The bottom image also has its opacity set to 0.7, which makes it look slightly “washed out.”
  • Within the Image element, the Image.RenderTransform property contains a ScaleTransform element that specifies a ScaleY property of-0.8. This value both scales the image in the vertical direction to 80% of its original value, and flips the image vertically:

Given the two modifications to the bottom image, you can easily create the illusion of a reflection by displaying the same image twice. RenderTransformOrigin=”0,0.44″ Opacity=”0.7″>

ldn-expertkgetzThis post is an excerpt from the online courseware for our Windows 8 Using XAML: Bindings, Shapes, and Animation course written by expert Ken Getz.

Ken Getz is a Visual Studio expert with over 25 years of experience as a successful developer and consultant. He is a nationally recognized author and speaker, as well as a featured instructor for LearnNowOnline.

Geometry Mini-Language

PathGeometryLines.xaml

Imagine a scenario in which you have a large amount of data, and a correspondingly large amount of markup. Defining each curve, line, arc, and shape individually requires a huge amount of markup, and most of it is redundant. To minimize the amount of markup, at the expense of readability, XAML supports a “mini markup language” that describes geometry. Thisreplacement language is often called the “geometry mini-language” (or Path mini-language”) and although there’s no need for you to be able to create markup using this language—you’re going to use design tools to create complex layout, rather than creating markup manually—it is important to be able to read and understand the intent of the language.

Take, for example, the markup used to create a star shape surrounded by a square (see Figure below):

 

Using the geometry mini-language, the following Path element creates the exact same result (in the page GeometryMiniLanguage.xaml):

Obviously, the first few attributes set up properties for the path just as in the original markup. The difference, of course, lies in the Data attribute (which replaces the Path.Data element in the original):

The path data uses a sequence of commands, indicated by letters:

  • M100,0: Move to 100,0.
  • L160,200: Create a LineSegment to the indicated point.
  • L0,75: Create a LineSegment to the indicated point.
  • L200,77: Create a LineSegment to the indicated point.
  • L40,200: Create a LineSegment to the indicated point.
  • Z: Ends the current PathFigure and sets IsClosed to True. (You only need to use this command if you want to set the IsClosed property to True. Otherwise, you can simply use M to move to a new point.
  • M0,0: Move to point 0,0.
  • H200: Starting at the current point, create a horizontal line to Xcoordinate 200.
  • V200: Starting at the current point, create a vertical line to Ycoordinate 200.
  • H0: Starting at the current point, create a horizontal line to Xcoordinate 0.
  • V0: Starting at the current point, create a vertical line to Y-coordinate 0.

TIP: The command letters are case sensitive. Uppercase letters indicate that the coordinates that follow are absolute; lowercase letters indicate that the coordinates are relative to the previous point.

NOTE: For a full description of the geometry mini-language, see the following documentation page: http://go.appdev.com/?id=8AEA.

As you can see, using the mini-language makes your markup far more concise, at the expense of readability. Again, your best bet is to use dedicated design tools, such as Expression Blend, when creating graphics for use in XAML. You’ll save many hours of frustration.

ldn-expertkgetzThis post is an excerpt from the online courseware for our Windows 8 Using XAML: Bindings, Shapes, and Animation course written by expert Ken Getz.

Ken Getz is a Visual Studio expert with over 25 years of experience as a successful developer and consultant. He is a nationally recognized author and speaker, as well as a featured instructor for LearnNowOnline.