W8 – An Introduction
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Alternative Title |
| |
| Title of Series | ||
| Number of Parts | 150 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/51458 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
NDC Oslo 201382 / 150
3
4
5
6
8
11
12
15
17
22
26
27
31
32
39
40
41
42
44
47
51
53
56
57
59
60
61
63
64
66
67
68
69
71
72
79
80
81
82
83
85
87
89
90
93
94
95
97
98
99
100
101
102
103
106
108
109
110
114
118
119
120
122
125
126
130
132
133
134
135
136
137
138
139
140
141
142
145
00:00
AdditionMobile appVirtual machineLevel (video gaming)Design by contractCartesian coordinate systemForcing (mathematics)ForestUniform resource locatorWindowForm (programming)User interfaceFormal languageSoftware developerPattern languageSet (mathematics)Menu (computing)Proof theoryGraphical user interfaceAsynchronous Transfer ModeVertex (graph theory)Data structureMobile appData storage deviceQuicksortGame controllerCASE <Informatik>Sign (mathematics)System callInterface (computing)State of matter.NET FrameworkProduct (business)Category of beingFacebookPlastikkarteBitInformation technology consultingWordCodeBuildingWeb applicationTouchscreenContent (media)Slide ruleDemo (music)Zoom lensDifferent (Kate Ryan album)Disk read-and-write headEmailTouch typingApplication service providerWeb 2.0Twitter2 (number)Semantics (computer science)XMLUMLComputer animation
07:15
Product (business)Cartesian coordinate systemContent (media)Right angleTouchscreenWindowGraphical user interfaceData storage deviceGreatest elementElectronic mailing listGroup actionKnotEndliche ModelltheorieCASE <Informatik>Form factor (electronics)Asynchronous Transfer ModeDifferent (Kate Ryan album)Crash (computing)LaptopData managementTablet computerMultiplication signCategory of beingWeb pageArithmetic meanLevel (video gaming)Context awarenessPrincipal idealSemantics (computer science)Game controllerTouch typingShooting methodPlastikkarteBitOvalEmailSelectivity (electronic)Computer clusterState of matterZoom lensModule (mathematics)NavigationWeb 2.0Row (database)Link (knot theory)Mobile appTraffic reportingComputer animation
14:26
RootMoment (mathematics)MereologyCartesian coordinate systemWindowDesign by contractPhysical systemFunctional (mathematics)PlastikkarteReading (process)InformationCodeEmailContext awarenessTwitterFacebookInternetworkingProduct (business)Type theoryMobile appMultiplication signElectronic mailing listNeuroinformatikShared memoryTouchscreenWeb pageRight angleGoodness of fitUniform resource locatorPresentation of a groupPoint (geometry)Medical imagingQuicksortDevice driverGreen's functionCASE <Informatik>Computer animation
20:22
View (database)Cartesian coordinate systemTouch typingMarginal distributionGame controllerCuboidFunctional (mathematics)Event horizonElectronic mailing list1 (number)Digital photographyRight angleWindowData storage deviceComputer animation
21:56
Hill differential equationSynchronizationMIDIProgrammable read-only memoryDynamic random-access memoryLemma (mathematics)Computer iconQuicksortAreaMereologyWeb pageSource codeOrder (biology)Category of beingSemantics (computer science)Cartesian coordinate systemExtension (kinesiology)Projective planeWindowClient (computing)Electronic mailing listProduct (business)Service (economics)WordKey (cryptography)Endliche ModelltheorieDemosceneMedical imagingGroup actionProxy serverCodeSystem callDirected graphMultiplication signComplete metric spaceView (database)CompilerCodeServer (computing)GodEvent horizonCASE <Informatik>Computer programmingData storage deviceSampling (statistics)Computer fileTemplate (C++)Keyboard shortcutCuboidForcing (mathematics)Thread (computing)Zoom lensLibrary catalogLatent heatState observerBitGoodness of fitComputer animation
29:36
Clique-widthExecution unitDrum memoryMotion blurLocal GroupTendonConvex hullOvalCellular automatonMaxima and minimaPiData storage deviceMobile appGroup actionEvent horizonView (database)Source codeProduct (business)Window1 (number)Asynchronous Transfer ModeCartesian coordinate systemRotationComputer fileTouchscreenPublic key certificateCodeSoftware frameworkDesign by contractWordRemote procedure callCategory of beingService (economics)Semantics (computer science)Electronic mailing listCuboidPlastikkarteLibrary catalogAreaMereologyWeb pageMedical imagingCASE <Informatik>Descriptive statisticsTemplate (C++)Human migrationBitStandard deviationQuicksortUniform resource locatorSampling (statistics)Automatic differentiationGame controller2 (number)Inheritance (object-oriented programming)Zoom lensObject (grammar)Ocean currentSet (mathematics)Arrow of timeTheory of relativityComputer animation
37:15
Core dumpEntropie <Informationstheorie>Normed vector spaceOvalGame theoryVoltmeterExecution unitKeyboard shortcutMultiplicationClique-widthView (database)Data managementWeb pageCodeEndliche ModelltheorieSocial classVisualization (computer graphics)State of matterUser interfaceCodeGame controllerElectronic mailing listProduct (business)Group actionWindowData storage deviceAsynchronous Transfer ModeCartesian coordinate systemRight angleBitEmail1 (number)Slide ruleMereologyMathematicsEvent horizonInstance (computer science)System callContext awarenessSpeech synthesisQuicksortInheritance (object-oriented programming)Uniform resource locatorFilm editingChannel capacityWater vaporSampling (statistics)Closed setComputer animation
42:13
Sheaf (mathematics)Web pageContent (media)File formatGame theoryPhysical systemDirected setLink (knot theory)Motion blurComputer wormQuantumSchmelze <Betrieb>Execution unitSheaf (mathematics)Web pageGreatest elementCategory of beingType theoryParameter (computer programming)Product (business)Set (mathematics)ArmGame controllerCartesian coordinate systemDemosceneDeclarative programmingCASE <Informatik>Electronic mailing listWindowComputer fileObservational studySoftware developerMereologyLevel (video gaming)QuicksortDesign by contractPhysical systemHierarchySelectivity (electronic)Group actionView (database)Event horizonBitMobile appDefault (computer science)Optical disc driveFrame problemAsynchronous Transfer ModeShared memoryPersonal identification numberData storage deviceCodeComputer animation
49:28
Mobile appColor managementBit rateMaizePrinciple of maximum entropyOvalMenu (computing)SynchronizationPoint (geometry)Electronic mailing listCartesian coordinate systemQuery languageParameter (computer programming)Slide ruleWindowResultantComputer fileMereologyBitCodeView (database)Different (Kate Ryan album)Message passingMobile appService (economics)Event horizonPhysical systemProduct (business)Design by contractShared memoryWeb pageTerm (mathematics)State of matterCASE <Informatik>Frame problemValue-added networkComputer animation
54:58
Event horizonService-oriented architectureSource codeSystem callMobile appLink (knot theory)Digital filterContent (media)Execution unitOvalProduct (business)IRIS-TCartesian coordinate systemEvent horizonData transmissionTesselationWindowTouchscreenProduct (business)Data managementCategory of beingService-oriented architectureDependent and independent variablesObject (grammar)Mobile appSource codeShared memorySocial classExtension (kinesiology)Parameter (computer programming)Ocean currentService (economics)Web pageWrapper (data mining)RandomizationMereologyCodePlastikkarteSystem callPhysical systemQuicksortCASE <Informatik>Descriptive statisticsVideo gameSampling (statistics)Function (mathematics)Speech synthesisData storage deviceOrder (biology)Type theoryCombinational logicMultiplication signDialectForm (programming)DatabaseMappingPoint (geometry)SurgeryComputer animation
01:00:29
XMLUML
Transcript: English(auto-generated)
00:06
Can everyone understand me? Yeah? Okay. Welcome to this session. It's a Windows 8 introduction session, so let me first quickly set the stage so everyone knows what to expect. As this is an introductory session, I am going to walk you through a Windows 8 application.
00:24
Look at some of the trades that make up a good Windows 8 application, like semantic zooming and snapping and stuff like that. And after that, I am going to show you in code how that's done. So it is an introductory session, but it does require a little bit of XAML and C-sharp knowledge.
00:43
Otherwise, it might be a bit hard to follow. Okay. So with that out of the way, let me start by introducing myself. My name is Kevin. I am a technical consultant at RealDolmen. I have worked here for about nine years now, I think. And I actually started off building WinForms
01:02
applications, after which I went to web applications. So I did quite a bit of ASP.NET web forms, C-sharp. And at a certain time, Silverlight came about. So all of a sudden, there was this new stateful web-like thingy from Microsoft.
01:20
So I threw myself into that. And after that, well, the XAML was kind of a given. So Windows Store applications came about. And due to the XAML knowledge I already had from Silverlight, I kind of rolled into building Windows Store applications. And that's what I do now.
01:42
I mainly build Windows Store applications for my company and still some ASP.NET MVC stuff. If you want to contact me, the easiest way by far is probably Twitter. You can find my handle on there. Or you can also drop me a mail if you want. By the way, I also have an app in the Windows
02:04
Store. It's a bit of a Facebook app, so if you're looking for that, you might want to check this one out. Anyway, what are we going to talk about today? Well, as I said, I'm going to guide you through a Windows Store application. It's one I built. And we're going to look at what makes
02:23
up a great Windows Store application. And then we're going to go into all this stuff. And we're going to look into each of them one by one to see how it's done. So we'll start by how we can lay out our data and how we can group our data. There's a few controls built into Windows
02:40
Store SDK for that. Now we're going to look into semantic zooming. Of course, I'm going to explain to you what it is first. And then we'll look into how we can enable that in our application, which is actually terribly easy. Then we'll look at how we can snap our app or what we have to do when we're developing an application to ensure our app is snappable,
03:03
because Windows 8 applications do have to be snappable if you want to make sure they're approved for Windows Store. We'll also look into a few navigation patterns, different ways you can navigate through your application. Maybe a quick question. I don't really see all of you, but have
03:20
you guys worked with Windows 8 already? Yeah, a few of you have. A few of you haven't. For those who have, don't come as a surprise, but for those who haven't, Windows 8 applications and the way they behave, the Microsoft design style is quite different from what we're probably used to building WinForms, WPF,
03:40
Silverlight, or web applications. So there's new design language, and that new design language comes with a few things we, even as developers, have to keep in mind. Navigation patterns, one of those. We'll also look into how we can add a command bar, and then we're going to go into, well, as far as I'm concerned, one of the more interesting
04:01
things about these applications, and that is the contracts, being searching settings and sharing data, because as far as Microsoft is concerned and the new Microsoft design style is concerned, your application isn't on its own anymore. If a user has a bunch of applications on his machine, on his tablet, whatever, why
04:22
not let these applications work together? And that's what these contracts are for. So we will see how we can make our application leverage features from another application. And I will also look into how we can build a nice live tile, which is what you see on the metro or Windows store design style start screen.
04:43
Of course, that's not all there is. I have one hour, so I can just more or less touch the beginning of what's there. So I'll quickly go over a few other things that might be worth looking into. And I hope I have a few minutes left for Q&A at the end. This, by the way, makes up for about 40
05:03
slides. Don't worry, I'm not going to show all of them, but I did put them in the slide deck so you can have them as reference afterwards. You can just download the code and the slide deck afterwards. So, as I promised, I'm going to show Windows 8 application first.
05:22
I have one up and running here. Does anyone remember Woodgrove? No? That was actually a demo used by Microsoft a few years ago once they started with Silverlight. It's a banking application. So the general idea is this application shows you the products that are available in a bank.
05:43
So what we've got here is our bank name and our products grouped by category. Category credit cards, a bunch of credit cards. And like that, you can go to the other products this bank might have. Now, the first thing you might notice here is, well, the first thing I notice at least,
06:05
there's no clutter. There's no menu bar. There's no status bar. There's none of that. That's the design principle, and that's called content before Chrome. That's actually very important because it goes through all the principles of building a Windows 8 application.
06:21
In general, it means don't clutter your user interface with commands. Don't clutter your user interface with menu bars. Simply don't clutter your user interface, but give preference to the content. When the user looks at your application, he's probably more interested in the content and where he is now than what he can do with the content
06:40
because that are commands he only needs when he wants to effectively do something and to where he can go. So that's the first thing. You'll immediately notice content before Chrome. It comes back everywhere. The second thing I've already shown you is horizontal scrolling thing. That's also something that's very common in Windows 8 applications.
07:02
Working landscape mode, and they typically scroll horizontally versus regular applications that might scroll vertically. It's not necessary, but it's kind of a nice touch in my head. Now, you might see this page as a bit of a hub page. The user comes into the page. The user comes into the application.
07:23
This page is the first thing he sees. It has group data, but there might be quite a lot of data on this screen. In this case, I have five groups, I think. Credit cards with a bunch of them, housing loans, investment products, up to services.
07:43
That's still okay if you've got five categories, but imagine there are 20 categories and each category has 20 products of its own. If the user wants to go to a certain category, that might become very, very annoying. So how do you actually navigate to a category like that? Well, that's why a principle called semantic zoom was introduced in Windows applications.
08:05
Semantic zooming is what you get when you do this. I use control and mouse scroll to zoom out of my data. If you're on a tablet or something touch-enabled, you can just pinch to zoom out. Semantic zooming allows you to get an upper view, let's say, of your data.
08:26
In this case, I zoom out, and I zoom out to the category level. Once I click or tap one of these items, I'm immediately more or less at the group I wanted to go to.
08:42
So that's actually a pretty nice way of navigating through your data. You just zoom out on the data, you tap, and you're zoomed in again right where you want to be. Important, by the way, if you're using semantic zoom is the context. So you're zooming out on data, you're not supposed to end up in some completely other kind of data.
09:03
Just to give a bad example, if I'm on this page and I have a bunch of banking products and I zoom out, I do not all of a sudden want to be on an employee management page, just to say something. Right, so that's for navigating in your data on the same screen. But obviously there must be other ways of navigating.
09:23
And one of the ways of navigating, there's actually two that are used nicely together. One of the ways is just on-screen commands. And this is very, very common, and users are very used to this because it's more or less how links on the web tend to work. You just tap a group header in this case, and all of a sudden I'm in the investment products category,
09:46
and I can tap even further, and I'm at the detail page of one product. If I want to navigate back, I simply have a back button here. So that's on-canvas commands for navigating. Now, there are of course other ways of navigating.
10:03
You might have an application that consists of different modules. For example, this banking product module might also have a banking application, might have a banking products module, but it might also have a reporting module or an employee management module. To navigate to those, Microsoft introduced something called navigation bar.
10:25
And you get it by right-clicking or just swiping from the top of your screen down. And that's actually just a bar in which you can put some buttons. In my case, my app has exactly one module, so it's quite easy.
10:41
So that's another way of navigating. And when I was talking in the beginning about content before Chrome, well, you might wonder what if I want to do something with one of these products. Let's click one. Let's say I want to pin this to my start screen or whatever.
11:00
Then you need some kind of way to have a command on this product. And commands, they go not on screen, but they go in the command bar. Yup, that's the wrong click. Here we go. In command bar, that's the bar at the bottom of your screen. So navigation bar on top, command bar at the bottom, in which commands related to that screen should go.
11:22
Now, that's a simple example. You can also have context-sensitive commands in your command bar. For example, a list of products, and you want to delete each of them. You just select all four of them. The command bar pops up, and once an item has been selected, you can have a delete button right there.
11:40
So the delete button goes in the command bar, and not, as you can have in a typical web or WinForms application, right next to each record. Why? Well, again, this principle comes from the content before Chrome. Content on your screen, Chrome only when you need it.
12:00
Now, these are design principles. You will see applications in which there are commands on the screen. A good example of this might be, well, imagine you have a shopping application, and your user wants to check out, or you have these baskets of shopping items.
12:22
Well, that's typically a command that could go on screen, because it's very essential to the application. But most of the commands, sorting, deleting, selecting, should go in the command bar. Now, I'm telling you all of this, and mostly when I do stuff like this,
12:42
I start seeing very weird faces from the audience. I'm going to say, like, how the hell is my user supposed to know all this? Because the user is new to Windows 8 as well. Well, it's a bit chicken or egg thing. If you're one of the first people to build an application like this,
13:02
well, probably your user is going to have some trouble adapting to it. But if all applications for Windows 8 adhere to the same design principles, it will work in your benefit afterwards, because the user will already be used to finding the commands in the command bar navigation on top from other applications.
13:21
So after a while, the user will know where to find the commands and where to and how to work with a Windows store application. That's why it's quite important to keep to these principles. But, well, if you're one of the first, you will probably have to answer a lot of mail about where can I find commands to delete a credit card or something like that.
13:44
Anyway, as you know, these Windows applications, they don't just run on laptops or desktops anymore. They also run on tablets, and they also run on a lot of form factors. So one of the things you can do when you're running on a tablet, for example,
14:03
is running two applications at the same time. And to enable that, you have something called snap mode for your application. And snapping an application, that's this. So I now just snapped my Windows store application to the left of my screen.
14:22
And this enables my user to run another application right next to it. In this case, I am running my Woodgrove application on the left, and I am running my desktop, which is... I'll just look at it as an application which can do more or less everything. That's the easiest way to explain this. Well, to my mom at least, so she understands.
14:45
And when you're snapping, this effectively allows the user to work with two metro Windows store applications at the same time. Also important here is to not confuse the user. So when you snap, you just use the same data, and you keep in the same context.
15:03
So I snapped the application, and it's still banking products on the left. It's not all of a sudden, well, employees or something. So that's important to stay in the same context. By the way, interesting thing. You might know Windows 8.1 is coming up. One of the things that will be possible there is
15:21
you will have a lot more possibilities as far as snapping is concerned. You will be able to run different applications next to each other instead of to, I think, like four or something. And you will be able to make them bigger and smaller just as you wish. Okay, that's snapping an application.
15:41
And then there's the, in my head, most interesting part and last part of this piece of the presentation. And that's how these applications can work with the Windows system on one hand and with other applications on the other hand. And that's done through contracts. For example, imagine I want to search through this application.
16:03
That's pretty common use case, search through the data in my application. What would typically happen? Well, you would probably make a search page and you have some filters, et cetera, et cetera, et cetera. There's a better way to do this now. And that's through the search contract.
16:21
Because Windows 8 has on the right of your screen the charms bar, which contain a few common commands, common functionalities a lot of applications might have. And the general idea is that if you want, in this case, search in your application, you should direct your user to the search charm.
16:42
And like that, you have a common way of searching through all the applications on your Windows system. The nice thing is my application here is now the current one, so the active one. So if I start typing and I press enter, I will search through my application. As you can see, I have a list of other applications here.
17:03
I have quite a lot of applications. I have a list of other applications here. These are installed applications on my computer that I've told Windows. Hello, Windows. I'm also searchable. So the nice thing is that I can just, from the search screen on any part of Windows with any app active,
17:22
I can just start searching through the active app, but I can also start searching through any other app. So that's actually pretty nice. Your user doesn't even have to have your application up and running or active to be able to search through it. You can just type in something, gold. It's typed correctly.
17:41
Well, the Woodgrove banking app is selected now, but I can just select any other one to start searching for gold through Facebook or Bing or whatever. I'm not going to do that. I haven't got the internet connected here. So I start searching, and do I have any?
18:00
Yeah, I have a gold credit card. I wish I had a gold credit card, but the application has a gold credit card, so I found that one. So as far as searching is concerned, I also said something about leveraging functionality from another application, and that's a really nice one. So imagine I'm reading about this gold credit card thing.
18:22
And I'm thinking, well, I can't afford this, but maybe one of my friends can, and he can buy me lunch because I told him where he could find it. So I say, well, I want to share this information with one of my friends. And then you can use another charm, namely the chair charm.
18:41
That's too many S's in one sentence. And what will happen here is I have set to Windows, hello, Windows, my application can share this data. This data can be a URI, an image, text, HTML, whatever. What Windows is going to do then,
19:01
it's going to look through all the other applications installed on my system, and it's going to look and going to search for applications which have set to Windows, hello, Windows, I can handle that type of data. And the thing is, from the moment on, I tap one of these other applications,
19:23
the other application will take over. So that means that I no longer, I as an application developer, I no longer have to write code to share this on Facebook or on SkyDrive or on Twitter. I can just rely on the fact that if a user wants to share something on Facebook or on Twitter
19:43
or through mail, he will probably have a Facebook app or a Twitter app or a mail app. So I can just leverage that instead of writing it myself. It's actually a pretty nifty way of applications working together. And it's quite easy to do. I will show you how it's done.
20:01
And it makes it very easy to have extra functionality in your app without having to really write a lot of code. Okay, so I think I more or less went through all I wanted to say here. There's more, of course, but I can't show everything. So let's go to the first part, and that's laying out and grouping data.
20:25
Well, I told you there are a few controls in Windows Store applications built in, which enable you to show your data nicely. There's actually three big ones, and they all inherit from ListView base.
20:41
So they all have more or less the same base functionality. That's a ListView, the first one you see here. As you can see, it's typically for vertical scrolling. That's the one you saw when I snapped my application. That was a ListView. Then there's the GridView. That's for the horizontal scrolling. And the third one here is the FlipView. And the FlipView is what you get when you want to start showing your data one by one,
21:05
so the user can just flip through a bunch of photos, for example. Now, both ListView and GridView support grouping out of the box, which is exactly what I'm going to show you. But you might wonder, if you come from WPF or Silverlight,
21:22
well, where's my ListBox? Why is this all of a sudden a ListView, not a ListBox? Well, the ListBox is still in there as well, and you can still use it. But I would advise you not to, because the ListView is more optimized for touch. It has bigger margins and padding out of the box.
21:40
It actually supports a few extra events you can subscribe to, touch-enabled events. So if you can, I'd advise you to use the new controls and not the old ones, even though the old ones you're used to from WPF are still there. Right. So let's have a look at that. And I'm going to be in code for a while now,
22:01
just going to show you how a few things are done. Can everyone read this, or should I put it a bit bigger? It's okay? Yeah, okay. Good. Let me quickly start by explaining how the application is set up.
22:22
It's actually a very, very simple one. I have a service layer, which I reused from another project demo. That's actually one simple WCF service with an entity model behind it, going through a database, of course.
22:43
What does this service contain? I'm just quickly going to show you to see what's happening. But it's not that important in this case. The service actually just contains a few methods to get the categories, to get the image, and to get the images related to the category.
23:01
And these two I don't even use. So mainly what we're going to use is the getCategories method, and this method will give me back a bunch of categories, and for each category, a bunch of child items. So that's a pretty common, very simple service layer. So that's where my Windows Store application gets its data from.
23:24
The notification extensions project here, that's from the Windows Store SDK. I'll talk about that later on. It's to make it a bit easier to work with live tiles. Well, that's for later in the session. So the important one here is my woodgrove.client. That's a Windows Store application. You get that file, new Windows Store application template.
23:45
And as most XAML applications, this consists of a bunch of views, which are the things you've already seen. The product group page was my main page. Products category by category, and detail,
24:01
well, that's the detail page of one banking product. So it consists of a bunch of views, which contain my XAML code to describe my UI, and a bunch of view models, which are responsible for translating my model into properties my UI can bind to, more or less.
24:22
That's all pretty basic. I'm guessing most of you will know about this. So let's immediately go into Windows 8 specifics. So, first thing I should probably show you is how did I get my data in my application.
24:41
Well, that is logically, in this case, going to be in the view model. So let me quickly show you. It's a very easy one, probably not the best programming principles applied here. So what's happening here?
25:00
I've added the service reference to my catalog service, and I call the getCategories method, which will return me a bunch of categories with their child items in there. Now, this is pretty regular code for most of you, I think, were it not for the whole async-await thingy.
25:24
Anyone know that, the async-await? Yeah, I see some of you do, some of you don't. There's a lot to say about this. Well, I have a session tomorrow in which I'm going to tell you a few things more about that.
25:41
For now, it's probably most important to know that this await keyword, this actually tells my compiler to stop with the method execution until this async method has returned from the server with its data. So what you used to write would be
26:04
proxyClient.getCategoriesAsync or getCategories, and you would typically have a completed event handler on your proxy client for the return of this method. And in the completed event handler, you would get your categories back. Well, this await keyword actually ensures that the execution of my method is awaited
26:21
until this async call has been executed and is back. So that's actually pretty nice, because that means at the same time, other threads might run and other code can run. This does not block your application anymore. And what does the async keyword here mean? Well, it actually just means that my method can be awaited,
26:45
can contain code that awaits other methods. So with that out of the way, we now know that the getCategoriesAsync method will return me a bunch of categories which in turn contain all these banking products. And then I simply take that list,
27:04
I order them by title, and I put them in an observable collection of catalog category. This observable collection grouped and ordered categories is then made available as a property on my view model so I can bind to this in my view.
27:26
Okay, so far so good. This is actually an already grouped list. I get a bunch of categories back with a bunch of items in them, so they're already grouped by category.
27:40
So we know how our data gets to our application. Now, how is this shown in the old XML? Let's look at that. So logically, I should find a grouped and ordered collection somewhere in this. Well, let's first have a look at the grid view itself.
28:02
So the grid view, that's what's showing my horizontal items. And ignore the semantic zooming thing for now. We'll look into this. As you can see here, this grid view somehow gets its data from something called the grouped items view source.
28:22
Okay, so we're not there yet. That means I must somewhere have a collection view source named grouped items view source on my page. And that's more or less where a part of the magic already starts to happen. Because I have just declared a collection view source on my XML page named grouped items view source.
28:42
So that's what's used on my grid view. So now we know that. And here we find the grouped and ordered categories property from my view model. So somehow this collection view source gets its data from the view model. The collection view source, you can see that as a view over my data.
29:01
So I have my data coming back from my service and the collection view source offers me a view over this data, which can be filtered and sorted, by the way. But the thing why I use it here is because it can also be grouped. And that's one of the nice things. As I said, the grid view supports grouping out of the box. And how does it support that?
29:20
Well, if you bind it to a collection view source, you can state on that collection view source that it is grouped. Simply by setting the isSourceGroup property to true. And by telling it where it can find the child items. So in short, what does this code mean?
29:40
This code means that there's a collection view source named grouped items view source, which contains six categories, grouped by category in this case, and it can find the child items in catalog products. So just by stating this little bit of code,
30:00
my grid view will automatically group these items. So I actually thought that was a pretty easy way to get grouping in your application. Now, as far as the rest is concerned, that's pretty much standard XAML. Of course, I have to declare how my...
30:22
Let's see, let's start with this one. I have to declare how one product will look like. So in this case, we have an image, which is what you've already seen, and it's overlaid with a nice looking background with a title and description.
30:42
So that's one of the products you see here. And then of course, I have to declare the group template as well. So this is one item template. Now I have to declare how a group template looks. And that's even easier, because that's simply the title of my catalog category.
31:01
And the chevron glyph here, that's the nice arrow. So this here gives me this. And the thing I just showed you, that's one of these items. Okay. Of course, all these properties,
31:21
these are effectively properties of what I get back from my service. My category has title, but I'm guessing that's probably obvious. Okay. So now we already have a nicely grouped grid view,
31:40
and we know how we get our data in our application. So the next thing on the list was the semantic zooming. So zooming out of this grid view. And I think the code on screen kind of gives it away already, because I have just put a semantic zoom control built into Windows Store Framework around my grid view.
32:02
And in the zoomed in view, I have put the grid view I've just shown you. And in the zoomed out view, there's another grid view, which I will immediately show you. Now this is effectively all that is needed to enable zooming in and out. Just put a semantic zoom control around your grid view.
32:25
Now of course, I somehow have to declare how one of these items in the grid view, when zoomed out, looks like, and where it gets its data from. So that's where the zoomed out view comes into play. So that's this one.
32:41
I somehow need to say, well, where do you get this data from? And as we can see, it looks a lot like the previous one. I simply have a template for one of the items. But the thing that is missing here,
33:00
I don't know if you see it, there's the item sources and sets. So this is a grid view, if you look at it like this, that doesn't know where its items come from. And the second thing that's a bit weird is that all of a sudden I have a group property. I don't have any group property. I have an image, I have a title,
33:22
I have a description, but there's no group property in my data object. So one, how do we get the data? And two, where does this group property come from? Well, let's have a look at that.
33:40
This is actually all that's needed for this. Again, this is why I'm using the collection view source. So what I do here is I find my collection view source on my page, which is, as I've shown you, the grouped items view source.
34:03
I find the current view of it, which is my grouped view. And then I go to the property collection groups. And this collection groups property, well, that simply contains the groups from my underlying data. So the collection groups,
34:21
that will contain my categories. The only thing I have to do then is to make sure that my zoomed out view gets the correct item source. So I simply take the zoomed out view, cast it to a list view base. As I said before, the zoomed out view inherits from list view base. And I set its item source
34:42
to the groups from my collection view source. And immediately, that is also where the group property comes from. So the group property you see here, this one, that's implicit. You get that when you use the collection view source's groups property.
35:06
And as far as all the rest is concerned, so the automatic snapping to the correct part of your page, like this. Housing loan goes to credit cards. I'm automatically back at the credit cards part of my grid view.
35:20
You get that for free. So you just get that out of the box by writing the code I just showed you. So there's no need to catch any events for that or something. Okay. Next up, snapping. So, as I quickly talked about,
35:44
your Windows Store application should support snapping if you want it to be able to go to the Windows Store certification. So if you want your app to be in the Windows Store, it should support snapping. There's another mode as well. That's portrait mode. It's what you get when you turn your screen around.
36:02
Your app should not support that one. But I'm just saying, it gives nice extras, but you're not obliged to do that. Now how can you say that you want to support one mode or the other? Well, each Windows Store application also has an app manifest file. We'll get back to that later on,
36:20
but I'm going to show you already. Because this app manifest file, here you can say which rotations are supported. I haven't checked any of them, so I support all. But if you do not want to support portrait mode,
36:41
or you do not want to support a certain flip mode, you can simply check the only ones you want to support. Okay, but snapping must be supported. And they're a bit related here. Because how do you... Well, there's actually two things we need.
37:02
One, how does my application know how to snap? And two, where do I define how it looks when my application is snapped? The first one is the easy one. So let me just stop this.
37:23
And going to codes. So if you've worked with XAML... XAML... ah, there we go. If you've worked with XAML, you know about something called the visual state manager.
37:42
That's typically used to go through the different states of a certain control. For example, if you have a button, this button will use its visual state manager instance to go to hover state, or to go to clicked state. Now the same goes for all my views. So on each of these views, I have a visual state manager.
38:03
And this visual state manager... Let's have a look at it. This is the one that takes care of ensuring the right controls are shown in the right mode.
38:22
So that's what we'll immediately look into. First thing I still need to tell you is how does my application know when it snapped? And that's really very easy because it doesn't require any codes on your behalf. You just need to make sure that the base page you're inheriting from... So this is my view, product group page,
38:41
is a layout-aware page. When you make new Windows Store application, that class is included. So that layout-aware page, that's a base class, and that will take care of triggering the visual state manager. So, no code for that.
39:01
So the only thing that's left is showing you how I can enable or disable certain parts of my user interface when we go to another mode. So what I'm going to look into is called the snapped state.
39:21
So let's have a look at what happens here. Well, apparently in this visual state the storyboard is defined. And that storyboard will change the back button, button on top left, the back button style to a snapped back button style, will change the page title to a snapped page header text style.
39:42
These are actually just the same buttons but a bit smaller, same text but a bit smaller. And it is going to look for an item list view and set its visibility to visible. And it's going to look for the item grid view. And set that one's visibility to collapsed.
40:00
So this is actually all that happens. I define a few storyboards. I define a storyboard containing a few animations. And these animations will take certain parts of my user interface and make them visible or invisible, change their styles or do other things with them. This of course means that my item grid view, which is
40:23
this one, the one that shows all the horizontal stuff, is effectively replaced by a list view named item list view. And that's this one. What is this list view? That's the one you see on the left when I snap. And the nice thing here is that
40:41
it is bound to exactly the same data. So as far as code behind or code in your view model is concerned, that typically doesn't require extra code. It's typically bound to the exact same items as your grid view is bound. Except that it's showing your data vertically instead of horizontally.
41:01
Sometimes a bit less data as well. But supporting snap mode is more a matter of changing some XAML around in your view than changing code behind or C sharp code. So that's all that happens actually. My list view is made visible.
41:21
My item grid view is made collapsed. You might wonder, by the way, doesn't this have an impact on performance, et cetera? Well, if a control is collapsed in XAML, it's effectively not rendered. So there's no code executed for it or whatever. Do watch out, because if you just put the opacity to zero,
41:41
which also makes it invisible, then all the events will fire, and then it is rendered. So just choose collapsed, and it will definitely not have any... should not have any performance impact anymore. Okay.
42:01
So I told you I was going to skip a few slides and just tell it into code. Tell it in code, which is exactly what I did. But I do want to say a few things about navigation. There's two modes of navigation I already talked about a bit. Let's look at that in a bit more detail. There's hierarchical navigation.
42:22
It's very common, also on web pages. Typically you would have a hub page, the main entry page of your app. You click on that one, we call that a section page, and you click one level deeper and you call that a detail page. Why do I want to show you this? Well, simply to be able to say that, again, these are guidelines,
42:41
but it is a good idea not to hide pages deeper in your hierarchy than four levels. I don't know the studies anymore, but there's been a bunch of studies on that. The odds of you effectively using that page or finding that page, if it's very deeper than four levels, are probably not worth
43:02
the development costs of it. So that's pretty important to know. And then, of course, there's the flat navigation, which is effectively done by the navigation bar on top. So you just tap on and you go to another part of your app. Obviously, both are used in most applications.
43:25
Now, maybe I should show you how this is done. So let's have a look at that. And there's not a lot of code to that either. So I have a feeling I'm kind of repeating myself
43:42
that there's not a lot of code to that, but that's because introduction really is, it is quite easy to get started with something like this. So let's have a look at the navigation bar on top. First, how do I define that one? Well, every view has a page.topAppBar property.
44:05
You can simply set that to one of your own controls. In my case, I am setting that to something named the navigation bar. Why do I do this? Well, because I can easily reuse this navigation bar control on each page.
44:20
Okay. So the navigation bar, I have to look that one up. Let's see here. And there we go, our navigation bar. What is this? It's a type AppBar. Maybe a bit important. And it simply contains my one button,
44:43
which you've already seen, the big home button. And when I click that one, I simply use the application's root frame to navigate to another page. This is a bit different from what you might be used to because instead of accepting a string,
45:05
the navigate method effectively accepts a type. So you use type of products group page, which is my view. And yes, you can pass in parameters if you want. So just the next parameter in this method will allow you to pass in data to another view.
45:24
And well, that's effectively how you navigate. There's not a lot more to it. In the page you navigate to, you will have onNavigatedTo and onNavigatingFrom methods, which is where you end up in once a user goes to that page. And you can catch that event or subscribe to that event
45:44
to do whatever you need to do when a user navigates to a certain page. Okay. So this was the navigation bar. But that's kind of like related to the command bar.
46:02
So as I've said, commands should typically go into the command bar. Now how do you get a command bar? Where do you put that one? Well, let's have a look. If you remember... Maybe I should start it up again.
46:27
If you remember, I had a dummy command bar button on one of the detail pages. So here, this pin button. So somehow this page has a command bar. Now let's have a look at how this works.
46:42
And that's the details page. Let's make it a bit bigger. And as you could have guessed, I guess, you don't only have a top ad bar property on your page. You also have a bottom ad bar property on your page. In this case, I define the application bar on the page itself
47:04
because, well, command bars typically differ from page to page. You can also reuse another one of your own controls. Typically the commands are page sensitive, so create it like this.
47:20
And you can, of course, depending on whether or not the user has selected something on that page, you see these are simple example controls. So you can reference them, you can hide them, you can show them depending on when the user clicks something or selects something. So the main thing here was the command bar goes in the bottom ad bar property.
47:51
All right, now we come to the most interesting part. And this is the searching and the contracts and the sharing.
48:04
I definitely wanted to get that in this session because it's something that really makes Windows Store applications stand apart from other systems I have seen. And that is effectively using the Windows system as a go-between between your app and other applications.
48:21
So let's start with searching. As I said, you can make your application searchable from anywhere in Windows, even from inside other applications, or at least that's how it looks. But that means that we somehow need to be able to tell Windows that my application is searchable. That's the first thing. So how do I do that? Well, back to that application manifest file
48:42
I just shown you. There's a declarations tab here. And in the declarations tab you can see what your application supports or what it should support. As you can see, lots of stuff to do, lots of stuff your application can do.
49:01
In our case, it's of course the searching that's important. So I simply added a search declaration. Now you don't effectively have to fill in any of these things unless you want to overwrite the defaults. I'm just simply using the defaults. And this is literally everything you need to do
49:22
to ensure that your application will end up in the list of searchable applications. So end up in this list. Now, okay, easy enough. How do you really search now? I mean, I've just told Windows I can search,
49:42
I can be searched, but I haven't written any code yet for effectively searching. Well, the main entry point of our application, the app.xaml, contains a bunch of methods you can overwrite. And one of the methods you can overwrite, that's the one that will be executed and that's the way your application will be started
50:03
when a user starts searching from anywhere in Windows. So let's look at that one. That's in the app.xaml. Let me find it. Let's do it like this.
50:27
There we go. So, what I've done here, let's make it a bit bigger.
50:42
I state when my window is created, so this is when the application starts up, application window is created. I look for the search pane. SearchPane.getForCurrentView. You can get that from anywhere, by the way. And I state, well, handle the query submitted event.
51:03
And when a query is submitted, execute the onQuerySubmitted method, which is this one. So once a user starts searching your application, when your application is already active, this is by the way, once a user starts searching your application and your application is active,
51:22
this is where you'll end up in, in the onQuerySubmitted method, which contains a bunch of arguments and the important argument here, let's see, oops, probably better stop.
51:44
That's the query text argument. So this query text argument, that is what contains search term your user pushed in, in the search pane. And after that, I just, I have everything in my application that I need to get from the Windows system.
52:01
I know the user wanted to search all the rest is just your own code or my own code. In this case, I simply navigate to the search results page and I'm sending a message, using MVVM Lite, by the way, I'm just sending a message that it needs to search, which will in turn go to my service layer,
52:22
search and return me the results. The important part here is that you end up in the onQuerySubmitted method and you get, through your arguments, the text you wanted to search for. Now, I specifically said, this is where you end up in when your application is active, when your application is running.
52:41
There's another way to end up in an application when the user starts searching. And that is if your application isn't running. That can happen as well. I'm in another application and I want to search a banking product and I use my application to search for it. Well, then of course, I haven't gone through the onWindowCreated method and I don't have an event handler here.
53:02
Because my application isn't running, my application hasn't even started yet, maybe. Where do I end up in then? I end up in the onSearchActivated method. So Windows will start my application and will execute the onSearchActivated method, after which I can continue just as I did before.
53:25
So what I have to do here is, all the code I use to normally start my application up, I create a frame, I go to the correct view. And after that, again, I send a message to refresh my search,
53:41
which contains the query text the user typed in. So that's probably the most important part here. Your user can activate your application, which isn't even running yet, through the search pane. And then you'll end up here. So you have to handle that differently than when the application is already active. Right, that's one way.
54:00
So that's one way of a search contract in which you say to Windows, I can be searched. So you might remember there's another way, and that's the exact other way around, being the sharing. So my application is active,
54:21
and I'm sending some data to another application to handle. That works a bit differently. In this case, I do not have to say to Windows that I can handle data from another application. So I don't need to add that in my manifest file.
54:41
I just need to write a bit of code that will send the data from my application to whatever application that can handle it. So in fact, I'm sending it to Windows. And there's one pretty nice slide on this that shows you how this works.
55:02
So the first thing I do, source application. That's me. I need to register with the data transfer manager. Again, this is an object you can access from anywhere in your Windows store application, just like the search pane. I register with the data transfer manager, and at a certain point,
55:20
the user selects the chair charm. So what happens then is me, as the active application, gets an event. Well, an event is triggered. And that event is triggered. I go to the event handler, and in that event handler, I have to create the package of data that will be shared.
55:42
In my case, the banking product. Some explanation about product and an image, if I'm correct. So I have to create a data package. Data packages can have multiple formats, can be URIs, bitmaps, combinations, texts. Even your own types, if you only wish to share between your own company's applications.
56:02
So I'm actually going to receive this event. I'm going to fill the data package. And after that, my call is completed, and I'm actually done, as far as my application is concerned. The share broker, which is a part of Windows, takes over. And the share broker is going to look for applications
56:21
that can handle it. The user then selects something, and automatically that application is activated. And the code in that other application is executed, which will handle the sharing of my package of data. So, as you can see here, as far as our app is concerned, the only thing that needs to happen
56:41
is that on the left. If you're a shared target, it's more or less the same as it was with searching. So you have events you can override, methods you can override Okay, so that's the other way around. Let's see how that works.
57:03
Let's go to the details page. That's where I put it. That's where I've shown it to you. So, first thing we needed to do, and that's this here. I do this when I navigate to my page.
57:21
I need to get the current data transfer manager, which is just the same as the search pane. So, get for current view, you'll get the current live data manager in your application. Share data requested event. So I say, well, once a user clicks share, this is the event that will be executed,
57:41
and share data requested is the method I will use to handle it. Let's go to that one. There we go. And the important thing here is filling that data package. What is that data package? Well, that's actually just the event arguments
58:01
that contain a request property which contains a data property. And in this data property, you fill in all things you want to share. In my case, I give its title, a description, and I pass in an image. And after that, this method is done,
58:23
and Windows takes over again, and this data package I have just created is sent to the other application. I do not get notified of this anymore, by the way. So there's no way to handle share, okay, or whatever, because it's now the responsibility
58:41
of the other application, not my application anymore. Okay, so that's sharing. And there's one more thing I'd like to show you, and that's live tiles. As you can see on the start screen, these are all just make your application quite vivid,
59:02
the tiles on my start screen here. It's always nice to have your application have one as well. This is the one from my application, Woodgrove Banking, and it doesn't just show the logo from the application. It actually shows me the gold credit card I've been using all along.
59:21
So how do we create a live tile? Well, that's where the notification extensions come into play. To create a live tile, what you actually have to do is create a bunch of XML and use a tile update manager to send that to your Windows system, which will then show it as a live tile.
59:42
To help us with that, so to ensure we do not have to create all the XML ourselves, I use a notification extension, which is actually just a wrapper around all that XML, so we now have nice classes we can work with. So let's see how we do that.
01:00:01
Let's go to the right one. I think I put it here. Yep. Create random tile methods. So what do I do? I get the first one of my products I just fetched from my service. That's what I do here.
01:00:21
And then I use the classes from my notification extensions to create a tile.