We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

Introduction to XAML in Windows 8/Metro

00:00

Formale Metadaten

Titel
Introduction to XAML in Windows 8/Metro
Serientitel
Anzahl der Teile
110
Autor
Lizenz
CC-Namensnennung - keine kommerzielle Nutzung - Weitergabe unter gleichen Bedingungen 3.0 Unported:
Sie dürfen das Werk bzw. den Inhalt zu jedem legalen und nicht-kommerziellen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen und das Werk bzw. diesen Inhalt auch in veränderter Form nur unter den Bedingungen dieser Lizenz weitergeben
Identifikatoren
Herausgeber
Erscheinungsjahr
Sprache

Inhaltliche Metadaten

Fachgebiet
Genre
Abstract
XAML is a first class citizen in Windows 8, and while many of the concepts are the same as XAML in WPF and Silverlight, there is a long list of major differences too. This session will summarize the similarities with earlier platforms and then discuss the most important new capabilities, including some of the new controls. This isn’t just for experienced XAML developers – hints and strategies for those who know little or no XAML are also included.
App <Programm>SystemplattformSoftwareentwicklerAppletGeometrische FrustrationSkriptspracheBitZahlenbereichKraftGebäude <Mathematik>StichprobenumfangHauptreihe <Mathematik>MAPPunktKalkülNetzbetriebssystemMinkowski-MetrikBenutzeroberflächeEnergiedichteLaufzeitfehlerKartesische KoordinatenLaufzeitsystemBrowserMicrosoft dot netSoftwareentwicklerGreen-FunktionServerReelle ZahlGewicht <Ausgleichsrechnung>ProgrammbibliothekBildschirmfensterMultiplikationsoperatorp-BlockRechter WinkelStützpunkt <Mathematik>Nabel <Mathematik>SystemplattformDifferenteDiagrammDienst <Informatik>VersionsverwaltungNeunzehnKlasse <Mathematik>HardwarePhysikalisches SystemCodierungAdditionPlug inBasis <Mathematik>Kernel <Informatik>KonzentrizitätGüte der AnpassungComputeranimation
Visuelles SystemWidgetSoftwareentwicklerTemplateKlasse <Mathematik>Kategorie <Mathematik>TemplateMereologieApp <Programm>PunktKartesische KoordinatenServerVisualisierungPhysikalisches SystemWasserdampftafelProgrammierungLeistung <Physik>Arithmetisches MittelDifferenteBildschirmfensterProgramm/Quellcode
SummierbarkeitSoftwareentwicklerGruppenkeimMaschinenschreibenKartesische KoordinatenVisualisierungSichtenkonzeptProjektive EbeneApp <Programm>Bildgebendes VerfahrenPunktGraphiktablettPhysikalisches SystemSchnelltasteDatensichtgerätTemplateKategorie <Mathematik>TouchscreenEinsARM <Computerarchitektur>ComputeranimationProgramm/Quellcode
KorrelationWidgetTemplateKlasse <Mathematik>Visuelles SystemKategorie <Mathematik>SoftwareentwicklerKategorie <Mathematik>VisualisierungBildgebendes VerfahrenARM <Computerarchitektur>VererbungshierarchieMomentenproblemBildschirmfensterBildschirmmaskeDifferenteTermArithmetischer AusdruckDatenverwaltungAggregatzustandBitTexteditorKartesische KoordinatenThumbnailVersionsverwaltungQuaderTropfenStrömungswiderstandComputeranimationProgramm/Quellcode
SoftwareentwicklerDynamisches RAMSichtenkonzeptInklusion <Mathematik>Elektronischer DatenaustauschStatistikInnerer PunktFächer <Mathematik>Gleitendes MittelDiskrete-Elemente-MethodeRechter WinkelAggregatzustandBildschirmfensterKlasse <Mathematik>GruppenoperationKategorie <Mathematik>TemplateStandardabweichungWeb-SeiteMaßerweiterungBitProgrammbibliothekFramework <Informatik>Kontextbezogenes SystemImplementierungEinsARM <Computerarchitektur>Projektive EbeneTransformation <Mathematik>MultiplikationsoperatorElement <Gruppentheorie>Kartesische KoordinatenZeichenvorratProjektivitätSpannweite <Stochastik>Mailing-ListeQuaderCASE <Informatik>VererbungshierarchieArithmetischer AusdruckMAPStichprobenumfangWeb SiteMomentenproblemZahlenbereichMathematische LogikProdukt <Mathematik>VisualisierungWort <Informatik>URLObjekt <Kategorie>Elektronische PublikationLoginProgramm/QuellcodeComputeranimation
TemplateKlasse <Mathematik>Visuelles SystemSoftwareentwicklerFeldgleichungWidgetApp <Programm>Lokales NetzSystemplattformDienst <Informatik>App <Programm>Web-SeiteHeegaard-ZerlegungRechter WinkelDatensichtgerätMailing-ListeTemplateMereologieBildgebendes VerfahrenQuaderKlasse <Mathematik>TypentheorieKomplex <Algebra>BestimmtheitsmaßComputeranimation
SoftwareentwicklerSichtenkonzeptMailing-ListeKorrelationVisuelles SystemWidgetTemplateKontextbezogenes SystemZahlenbereichTemplateMereologieApp <Programm>ImplementierungTouchscreenSichtenkonzeptDifferenteQuaderBoolesche AlgebraKeller <Informatik>Mailing-ListeGamecontrollerSchnelltasteStichprobenumfangt-Testp-BlockProgramm/QuellcodeComputeranimation
SoftwareentwicklerGerade ZahlElektronischer DatenaustauschUnternehmensarchitekturVIC 20MIDI <Musikelektronik>AusgleichsrechnungLokales MinimumWechselseitige InformationVisuelles SystemDiskrete-Elemente-MethodeWurzel <Mathematik>Gleitendes MittelApp <Programm>TaupunktStellenringGesetz <Physik>Projektive EbeneVersionsverwaltungQuaderStichprobenumfangMailing-ListePunktKontextbezogenes SystemVererbungshierarchieDatensatzSystemaufrufQuick-SortProzess <Informatik>SchnelltasteKategorie <Mathematik>TemplateRoutingCodeKartesische KoordinatenTreiber <Programm>Lie-GruppeUmsetzung <Informatik>MomentenproblemDatensichtgerätGraphfärbungBitAbgeschlossene MengeRandverteilungZählenTouchscreenBildschirmfensterReelle ZahlCliquenweitep-BlockDifferenzkernElektronische PublikationFontGüte der AnpassungComputeranimationProgramm/Quellcode
SoftwareentwicklerDateiformatWellenlehreQuaderGruppenoperationMailing-ListeTemplateQuellcodeWort <Informatik>MomentenproblemEndliche ModelltheorieStichprobenumfangTermKontextbezogenes SystemGamecontrollerSchnelltasteBildschirmfensterComputeranimationProgramm/Quellcode
SoftwareentwicklerSichtenkonzeptMailing-ListeSchnelltastep-V-DiagrammTemplateVisuelles SystemWidgetTopologieMessage-PassingMailing-ListeEndliche ModelltheorieQuaderEinsBildschirmfensterTemplateSchnelltasteGüte der AnpassungShape <Informatik>App <Programm>TopologieMenütechnikGamecontrollerMessage-PassingKontextbezogenes SystemFunktionalSichtenkonzeptSchnittmengeWärmeübergangModallogikTouchscreenMomentenproblemElement <Gruppentheorie>Uniformer RaumCodeMultiplikationsoperatorSoftwareentwicklerTypentheorieWiederkehrender ZustandARM <Computerarchitektur>MaschinenschreibenWort <Informatik>Nichtlinearer OperatorSystemaufrufProgramm/QuellcodeComputeranimation
SoftwareentwicklerQuellcodeAliasingSpeicherabzugDiskrete-Elemente-MethodeRechenwerkCodeEreignishorizontGüte der AnpassungKartesische KoordinatenVisualisierungStichprobenumfangRechenschieberDifferenteTermKategorie <Mathematik>Web-SeiteBildschirmfensterWurzel <Mathematik>Element <Gruppentheorie>TouchscreenCliquenweiteRechter WinkelQuaderFormale SpracheNichtlinearer OperatorGenerator <Informatik>MathematikMessage-Passingsinc-FunktionSoftwareentwicklerZahlenbereichUltraviolett-PhotoelektronenspektroskopieEinsRoutingBildverstehenTotal <Mathematik>Wort <Informatik>DefaultComputeranimationProgramm/Quellcode
Softwareentwicklerp-V-DiagrammSichtenkonzeptVisuelles SystemWidgetMessage-PassingTemplateMessage-PassingQuaderARM <Computerarchitektur>BildschirmfensterGraphiktablettComputeranimation
SoftwareentwicklerQuaderMehrrechnersystemZeichenketteInhalt <Mathematik>DatensichtgerätWasserdampftafelCliquenweiteGüte der AnpassungObjektorientierte ProgrammierspracheRechter WinkelBitComputeranimation
SoftwareentwicklerDiskrete-Elemente-MethodeTrigonometrische FunktionWechselseitige InformationEinfügungsdämpfungProzess <Informatik>MereologieDefaultBildschirmfensterGraphiktablettSchnittmengeApp <Programm>Peripheres GerätTypentheorieComputeranimation
RechenwerkSoftwareentwicklerSichtenkonzeptVisuelles SystemTemplatep-V-DiagrammWidgetDiskrete-Elemente-MethodeArithmetische FolgeIndexberechnungApp <Programm>ZweiEinfacher RingCodeComputeranimation
SoftwareentwicklerSichtenkonzeptp-V-DiagrammVisuelles SystemWidgetTemplateMessage-PassingSchnittmengeKategorie <Mathematik>Schreib-Lese-KopfSchnelltasteSoftwareentwicklerZweiBildschirmfensterPeer-to-Peer-NetzQuaderGamecontrollerSichtenkonzeptLesen <Datenverarbeitung>MatchingPufferüberlaufAdditionVersionsverwaltungBildgebendes VerfahrenDatensichtgerätBenutzeroberflächep-BlockBildschirmmaskeApp <Programm>BijektionEndliche ModelltheorieComputeranimation
SoftwareentwicklerCookie <Internet>Diskrete-Elemente-MethodeElektronischer ProgrammführerMailing-ListeTemplateQuaderMaschinenschreibenApp <Programm>BitVersionsverwaltungSichtenkonzeptCASE <Informatik>DifferenteDatensichtgerätComputeranimation
RADAR <Automatisierungssystem>QuellcodeSoftwareentwicklerOvalKonvexe HülleZählenElektronisches ForumMulti-Tier-ArchitekturPrimzahlzwillingeMailing-ListeDefaultDifferenteSichtenkonzeptIndexberechnungQuaderTemplateKategorie <Mathematik>GamecontrollerComputeranimation
UnternehmensarchitekturSoftwareentwicklerMailing-ListeSicherungskopieQuaderGamecontrollerMultiplikationsoperatorKartesische KoordinatenARM <Computerarchitektur>IndexberechnungDifferenzkernÄußere Algebra eines ModulsMaschinenschreibenSichtenkonzeptGewicht <Ausgleichsrechnung>Computeranimation
SoftwareentwicklerSichtenkonzeptKorrelationWidgetMaschinenschreibenEreignishorizontApp <Programm>BitGamecontrollerÄquivalenzklasseMaschinenschreibenMehrwertnetzARM <Computerarchitektur>Rechter WinkelArithmetisches MittelKontextbezogenes SystemMenütechnikMathematikEreignishorizontMusterspracheBildschirmfensterWort <Informatik>Schreiben <Datenverarbeitung>Quick-SortSichtenkonzeptKreisbogenOrdnung <Mathematik>Mailing-ListeDifferenteMultiplikationsoperatorComputeranimation
PrimzahlzwillingeFamilie <Mathematik>Demo <Programm>SoftwareentwicklerDiskrete-Elemente-MethodeLokales MinimumAliasingEreignishorizontRechter WinkelCASE <Informatik>Programm/QuellcodeComputeranimation
EreignishorizontApp <Programm>MaschinenschreibenSoftwareentwicklerInterface <Schaltung>TemplateDefaultp-BlockElektronische PublikationCASE <Informatik>GeradeFlächeninhaltFontPunktGeometrische FrustrationStrategisches SpielFramework <Informatik>Web-SeiteZahlenbereichObjekt <Kategorie>Gesetz <Physik>Message-PassingDifferenteMinkowski-MetrikPen <Datentechnik>Güte der AnpassungEin-AusgabeApp <Programm>GenerizitätFehlermeldungServerARM <Computerarchitektur>Wort <Informatik>Figurierte ZahlHook <Programmierung>MultiplikationsoperatorTemplateSichtenkonzeptVorzeichen <Mathematik>ZählenMereologieProgrammierungKomplex <Algebra>Projektive EbeneElektronische UnterschriftAusnahmebehandlungUmsetzung <Informatik>MaschinenschreibenInterface <Schaltung>EreignishorizontProzess <Informatik>ParametersystemOffice-PaketStichprobenumfangVarietät <Mathematik>DefaultVisualisierungRechter WinkelFächer <Mathematik>CodeAbstraktionsebenePhysikalischer Effektp-BlockBildschirmfensterLastTypentheorie
SoftwareentwicklerWeb-SeiteTemplateMereologiePunktRechter WinkelStrategisches SpielGeradeComputeranimation
SoftwareentwicklerApp <Programm>SystemplattformWidgetSichtenkonzeptp-V-DiagrammVIC 20HIP <Kommunikationsprotokoll>MaschinenschreibenKorrelationSummierbarkeitTOEWiederherstellung <Informatik>Chatten <Kommunikation>Spezielle unitäre GruppeDienst <Informatik>Vorzeichen <Mathematik>Laurent-ReiheApp <Programm>Strategisches SpielGeradeGenerator <Informatik>ZweiGemeinsamer SpeicherServerDefaultKartesische KoordinatenBildschirmfensterDifferenteDesign by ContractResultanteInformationsspeicherungPunktKonfiguration <Informatik>Große VereinheitlichungSynchronisierungTouchscreenEinfache GenauigkeitQuellcodeGrenzschichtablösungElektronische PublikationStichprobenumfangCASE <Informatik>SoftwaretestWort <Informatik>Rechter WinkelWeb-SeiteNetzbetriebssystemGruppenoperationComputeranimation
ViewerSoftwareentwicklerDiskrete-Elemente-MethodeWurm <Informatik>BildschirmsymbolWeb-SeiteRechter WinkelTemplateLokales MinimumBildschirmfensterVersionsverwaltungApp <Programm>Familie <Mathematik>MultiplikationsoperatorFramework <Informatik>MereologieObjekt <Kategorie>Metropolitan area networkSchedulingSoftwaretestTermSicherungskopieStichprobenumfangResultanteEinsFormale SpracheZahlenbereichBildschirmmaskePunktInformationsspeicherungKartesische KoordinatenEDV-BeratungSoftwareentwicklerSystemidentifikationNichtlinearer OperatorProzess <Informatik>Globale OptimierungARM <Computerarchitektur>Überlagerung <Mathematik>ServerComputeranimation
Transkript: Englisch(automatisch erzeugt)
All right, good afternoon. Welcome back after lunch. This is the worst time to present Or teach or I used to teach Calculus in graduate school, I would rather teach at 730 in the morning Than right after lunch, but and in addition to that somebody I mean you've seen me speak before previous NDCs
Now see you think you think I got lots of energy. I'm jet-lagged today really badly so Well, we'll see if I can muster enough energy to get through today, but I will not have my usual amount of jokes and such Partially because I have so much to cover This is a one-hour session to introduce what ought to be introduced in perhaps three or four hours
But I'll try to give you enough of a feel For the subject to help you in your early explorations on your own. Maybe reduce your frustrations a little bit Now we're going to talk about XAML and Windows 8 if you've seen this diagram more time so many times it makes you sick. Hang on I'm not going to show it for long. There are a couple of points about it
I need to make and then we'll get into what I really want to talk about Which is how to do XAML applications in Windows 8 based on XAML Understanding from earlier platforms now, I need to understand a little bit about the audience So I know a little bit about pace how many of you have done
Either WPF or Silverlight development for a real application That's good. How many of you have never done any XAML development of any sort? Okay, that's that's a small number and I hope you will indulge me here
I must pitch this session to the folks who know something about XAML. It's been around for a while So I will do a little bit at the beginning to set the stage Talking about how XAML from earlier platforms works Just fine in Windows 8 and I will do a fairly detailed example about that in a six or seven minutes
And then from then on we'll concentrate mostly on the differences between XAML and Windows 8 and XAML in the platforms that you have used in the past WPF Silverlight and Silverlight on the phone Let's make my my point about this and move on
Windows 8 puts in place an entirely new foundation for the operating system. It's time the old Windows API Was created in 1995 the Windows 32 API and it was based on older 16-bit stuff from the 1980s and
modern hardware and modern systems needed something that was a quite a bit more suitable to modern times So we now have Windows kernel services as our basis older desktop applications all the stuff you're producing now Still run on top of there and kind of think of it as a shell for the desktop
I guess in which the old Windows 32 API still runs, but for Applications in the metro space Windows 32 is not present. It is not loaded It is not used that means that WPF applications Which run on the dotnet framework 4.5 on?
Top of the one does API do not work in in the green side they work in the blue side But not in the green side Silverlight applications, which are based on a plug-in in the browser are allowed and will work on the the the blue side But plugins to the browser are not allowed on the green side therefore your Silverlight applications do not work over there either
however your expertise in those technologies does go forward because XAML is a first-class citizen in the way you can do UI you can see the various ways that user interfaces can be constructed HTML and JavaScript have gotten a lot of the attention up to now
Because Microsoft would like to attract other people into Windows But when I was at the MVP summit on campus at Microsoft a couple of months ago I can tell you that the emphasis on XAML was much much higher than it was at the build conference in September
XAML is very much at the forefront of what Microsoft is doing on Windows 8 So if you have expertise in in XAML in either WPF or Silverlight it goes forward pretty naturally So it is your coding there is a version of the dotnet runtime of the dotnet CLR run the runtime engine that runs in the green block
But it runs against different Libraries and that means that when you move to XAML in the Windows 8 world Not all of the dotnet framework is available to you. Most of what you need is there There are a small number of omissions some things have changed and this session will talk about that
Questions then before I proceed I Didn't have PowerPoint on this system and I was going to load it and then I thought why should I do that? Why don't I just write a program? To show the bullet points that I want to show So this is a metro program that will go through the things that I would like to to talk to you about today
Starting with the fact that in the Windows 8 world Visual Studio 2012 has some significant differences You will start in the Windows 8 world with some new Application templates where WPF had nothing but really blank application templates Silverlight had the navigation app template you remember that one
That you could install if you were if you wanted to use some of the extra parts of Silverlight Now that has been taken forward in a in a greater spirit to application templates for a couple of common
application designs and What these templates do is give you? already available theming That is when the application starts up When when you produce the very first screen out of the out of Visual Studio with it It looks and acts like a metro application. Let's see that. Let's get a brand new Visual Studio here
So if we for example select this grid application here
And we just say this is NDC By doing nothing else, but selecting that application template I now have a running application That has certain kinds of
navigation built in So it has for example some spoofed up data, so I can move among these these tiles and If I pick one I get to go to the detail for that with the The flip views and the other things that allow me to do the touch navigation for that
I don't know if those over you there can see this is actually a touch system even though It's a big think pad. I've actually got a touch Screen on it, so I'm able to use one does eight natively This is I bought it specifically because I knew one does it was going to need it about a year ago So that Navigation is already there with spoofed up data
You are able then to do nothing more than attach to your own data and display it and change the bindings the data bindings for the templates to To to access your own properties instead of their spoofed up ones And then you have an application that runs with data including images and things like that if you happen to have it
So that's the starting point to application templates that are built in
Now along with that. I'm going to show you in just a moment there are some new folders that will will come along that that contain some of the base classes that are used in these themes and some of the Image assets that are needed. There's also a new property window in Visual Studio What do you think of that designer that they gave us in Visual Studio 2010 for example?
Up thumb or down thumb down down Anybody want to say up because I don't know very many who go that way this was
this was a Hey, I don't want to say conflict That's too strong a term a difference of opinion that I had with the team that produced that from the day They started work. They were trying to get a Windows forms experience Imposed on XAML, and I told them that will never work, and they tried at it twice and then I had
Lunch with him about a year ago, and they said we are throwing in the towel You know that English term We give up. We can't make it act like Windows forms that designer is gone. It's thrown away The new designer is based on the engine in expression blend
So I presume most of you use blend or at least have seen it and you're aware of the expression blend designer It now becomes the the designer and the strip down way in Visual Studio It does not include some of the things for all Visual state manager fancy editing and such turns out that because of some of the new things you don't need that as much
But the properties window for example and the drag-and-drop experience will resemble the the expression blend Editor quite a bit more than what you've used in the past, and I think that's definitely a step up We'll see that new property window here in just a moment and then as you saw the basic
Navigation works just right out of the box, so let's see let's go take a look at that Application that we just created whoops right here You see some of the stuff that was created remember all I did Was was declare a template and go and all of these things were filled in for me
We see we've got various assets that go along with the themes pngs in this case For and for various things because there are there's a dark gray theme and a light gray theme you might guess it The expression team has their light and dark themes and a lot of that carried over to one to say We've got a lot of classes here
That you will need to understand at some level because these classes drive Some of the things that happen inside these these Application templates in other words the application templates could not be based only on the framework libraries They there were some think of them as base classes that were needed for these
These templates that the framework did not supply so there is a folder of those kind of of base classes Over there for example layout aware page if you see that right there as a class
That's got quite a bit of implementation in it Then when you look at the main group detail page You will see that it is in fact a layout aware page you see the top right there So let's get rid of you. Oh, yeah, you're running. That's the reason why let's uh, let's shut it down so we can actually
See things a little better So there you can see that that the main page that the application used to start with is in fact one of these layout aware pages and not some page that is
It's not some class that is formed inside the library So you do need to become familiar to a certain extent and you also have the ability to work with some of those and customize Them you want to be very careful and cautious about that You will you will cause the application to do various things that don't fit well with windows 8
If you're not careful in changing some of those classes also if if if you're if you want to change this Some of the styles that go with the standard template. They're right there in this This file called standard styles dot XAML including things like various
Styles for rich text and you see if you get further down some of the templates that are used. Let's see if I do the 350 template No, it's or is it 320. I've forgotten the numbers now. There are some hot there are some templates that are hard hard
Hard-coded to certain size in some of these the 150 one all right, maybe I think it's in the other top of that the um, not the grid app, but the The the other template that I'm gonna show you in just a moment So you see there's there's a lot of styles in there now if you've done production work in XAML
You know that a lot of your logic ends up in styles and you're accustomed to the idea That you have to manage those so you'll be wanting from time to time to change some of the things in there But you do want to be cautious They are set up those styles are set up to to match certain things about the windows 8 experience
So that's what you get out of Visual Studio when you first start as I mentioned you've got a properties one down here That's going to look quite a bit more like the the one in blend so that if I pick an Object here like a button. That's that button up there
Then I've got a lot of things that I don't have today. I've got these these Tabs that blend has but Visual Studio does not such as the transform tab. You've seen this before right? It's just reskinned from from expression This is basically the same experience that you get over there so that I can put in and rotate
That that particular button if I need to so all of those Things that you you had to go to blend to do or you had to write XAML or I should say the most common ones things like Transformation including if you if you're from the WPF world, by the way, but we do have projection transformations here
Which we did not have in WPF only Silverlight had those so the 3d Projections are now available to us as one of the things we can do with our elements so um so that as you can see that looks a lot like the the blend a property window it does not have a Log is out that they've added that since the last time I saw it
They have added the arrange by name so you can get back to just the alphabetical listing And of course you have the usual search box to get down to individual Individual properties, so that's a little bit about the experience in Visual Studio That's changing that you do have the new property window and quite a bit of new assets in the the the templates that you get
Let's can then get back to I want to mention yeah basic evanation Navigation works right away. You saw the grid app the split app is what this app right here is based on
The split app has the ability to have this main page with potentially more than one thing down the side there The the image is not a part of the template I just put that in because I needed to show it and then when you touch one of those you get a
Master detail Capability so that you can pick an item there and just and display details about it So that is the other type of navigation that is available right out of the box that you have the grid app and the split app if you prefer and
I think I'm probably going to be doing this fairly often you can build up from an empty Project with with no none of those templates and special special classes Why would you want to do that? Because as we'll see later, there's a fair amount of complexity involved in what they've got built in for example
They've got some stuff in the app the way they put it in place They're expecting The data context up here. This is act. They're actually they've actually got some portion of MVVM that they're trying to put that in as as part of the basic template and
I'm sure that number one a lot of people will have a one a different implementation of the way MVVM is going to work And secondly some people especially for small apps may not want to use it at all When I'm only doing a handful of screens, I typically do not for example
now Don't worry about the stuff. You're used to it's all there text block text box button check box radio button I guess I should have made that thing rap shouldn't I? Sorry about that on the bigger size before I reduce the the size here it worked just fine
We've got three of the most cut the three most commonly used panels by far are back and available grid Stack panel and canvas are there for you List box combo box and list view all with data templates are
available and they work pretty much the way you've expected them to in the past the data binding works about the same and the Usual styles and control templates to work the way you it you would expect them to Let's do about five or six minutes and just give you that reassurance that all that stuff you expect from the usual XAML experience works Here in this world too to do that. I go back to desktop don't I? Yeah
To do that. I've got an empty Project. Well, I built it up from an empty project. Let me show you what it is that when it runs Whoops. No, that's that's sorry. That's the that's the full version. I thought I had the empty version, but I apparently don't
I Hope that's the blank. I think it is
Yeah, so you see there I've I have a starting point that just puts up a list box with with some records that I Often use this and by the way I took pretty much all of the stuff for this the XAML and the code for the data items and everything and put it
Right into this project and it all worked without any changing So there are some aspects that do now when you get to real projects as you see in a few moments There are some things that will come over that I pretty much guarantee you will not work Value converters for example have to be fixed and you folks that are along the back there There are there are seats here I will not be the least bit offended if you come up and take some of these seats or some over there on the
side too, so please don't Please don't stand up on my account just because you're trying to keep from interrupting me here. So That XAML is going to look about like you would expect To say I started with an empty project
So you can see that what I've got in my project to start with I started with an empty project And I put some data items in there such as a contact record and a customer record and a collection of contacts and a collection Of customers and then I declared some XAML that allowed me to have some starting data
So there's a customer named big bucks incorporated with some various properties set including the logo, and I have the logos in a Well, did I put the logos in a file or not? I did not did I I'll have to get the logos and put them in place
and also, there's a property of the customer call contacts so that you can see a Parent-child relationship there. There are multiple contacts for each customer. So right now I have a list box that would look just like you would expect it to in WPF I copied it right over and I didn't change a thing that it's bound to that list and it's got a display member path of
Customer name which means it displays the customer name Well, let's see if we can't make this a little bit nicer for XAML. First of all, let's get the background to be Transparent so we let those theme colors come through. Let's get the margin up to be something pretty big like maybe 150
comma 50 something like that get in the closer to the middle of the screen and Of course if we're going to do a real application We're going to want to have some kind of a data template, aren't we? So let's tell the list box Hey, I need you to get have an item template property it needs to be a data template and It needs to have the usual kind of layout in it the same stuff you would do today
So you could put a grid in there. You could put some columns in that grid You let's say let's put one that's um Star width Whoops star and let's put one more that is an extra character in there this uh
The touchpad drivers in Windows 8 seems to be a little Sensitive I keep I keep pressing something and it pops into the middle of the document somewhere takes it as a tap I haven't found out where to turn that off in Windows 8 yet
Um Column definition with equal. I don't know. Let's make it a hundred see there it went Something like that and then that first column we could put a stack panel to some of the stuff about the customer
Like their name with using a good old text block Let's uh, let's bump the font size font size up a little bit though font size equal 16 text equal and the same sort of data bindings you're used to With what you already have and then we also have the ability to do runs the same way we do today
So we can put the we could put something like a run that says that where the the text is bound to
the count of the contacts collection and then put another run next to it that says I yes, well we have That many contacts available I
Presume a lot of you know about that Maybe some of you might not some of you that do XAML already that might not realize that you can do stuff like that so now we're starting to see that we've got the ability to Format and template the way the stuff comes out exactly the way we do in In XAML today
See did I thought I made that list box Transparent I think the list box item has to be as well. So That's probably enough for you to get the idea that you don't have any any difficulty at all in In just using all the stuff that you already know how to do to create data
Templates and do data binding and get list controls working and all of that Knowledge that you have there also You is is available to you in some new panels that we'll talk about in a moment In other words one of the most important things that you carry forward
Into Windows 8 is that understanding you have of the XAML? Composition model do you understand what I mean when I use that term the way things fit inside other things? For example, some of you may not realize you can do this
Even in WPF and Silverlight, but if I wanted to list of the contacts I Can actually put a list box? inside the data template of another list box with its item source by bound
to the contacts collection whoops and I can tell that list box to please have an item template Which is a data template? With whatever I want to put in there such as the context name
So there we see there's a list of contacts inside each item now
I can you know do borders and various other things to kind of set the items off But that composition model that ability to put things inside other things carries forward all the data templating and data binding stuff that you know Can be used to create items in these new containers that are available
Because list box combo box Are not are not the only ones in fact not even necessarily the most common Containers that you will use in the windows 8 world, so let's get back to my app there
questions about that now so see you've got stuff going forward you're in good shape and Now we're ready to talk about some of the new things that are available to you Because first of all let's get the bad news out of the way first some of the things that you
May have grown accustomed to are not there missing or maybe changed Tree view for example isn't there we are ways of creating something that looks like a tree view And I think that we probably will eventually get one, but tree views tree views are kind of up a mouse driven metaphor for how things are used on the screen where you expand and collapse nodes and
That doesn't transfer over as well to touch So I think there's still some thinking about how that should be done and as a consequence tree view was Included in the initial set that of controls that came out some of the panels aren't there
dock panel wrap panel uniform grid are not in the set of I said And some of the elements that that you would expect to be there context menu is not neither is message box Fortunately many of these things have some replacements Let's talk about those
so Context menu for example is replaced by a new control called pop-up menu that has the same functionality, but a somewhat different API and Is more suitable for touch? So context menu isn't there per se But the function that it that it has is is taken up by pop-up menu the same thing is true of message dialogue
Because see you'll probably probably do like I did the first time I went to You do this in development all the time Don't you you put an event routine somewhere? And then you put a message box dot show in there to make sure that you see when you got to it
Well, I did that and I started to type message box and there wasn't one Man, I haven't been without message box for 20 almost 20 years So that that was a moment of panic there until I did the research to discover that yes We still have a replacement for that. Why did they take it away because?
Modal stuff that ties everything up is contrary to the spirit of the way things are done in Windows 8 So they replaced it with something that is friendlier to asynchronous operations In particular they replaced it with something called message dialogue
Let's uh let's see how that works, and I'm gonna grab the code from something else because I don't want to Risk getting it wrong. No, that's not the wrong one
So let's get a brand new Visual Studio and show that this guy works fine But he has differences from the way things the way you've done things in the past blank application here show might expect oh
Like I should mention one thing while while we're while we're here and in terms of the differences, and I don't think I put this one on the slide but to change the startup page
In WPF that was done with startup URI in Silverlight. It was done by setting the root visual property in The startup this is where it is done typically There are some other ways to do it, but but you don't just show things you navigate to them
There are reasons for why that is done in Windows 8 and so if you want to change to a different startup Screen a different element that is the place you would go to do it And isn't necessarily obvious is it so I do mention first page right there So to main page, which is nice and empty and so let's put a button
It'll be centered. We'll just give it a height and width so that I don't have to worry about Touching it really easily and so there's a there the the I guess it's set to be
To the side automatically which is another difference because we're accustomed to things being done Being centered by default and if we go to the usual click event there
Then we just pick a new event handler fill that in saying what we have to do instead of message The message box show is create one of these message dialogues and for whatever reason we don't have the using or imports for that either
It's in windows.ui.popups, so we have to put that in place And I'm not going to do this but normally what you would do and because you'll get a warning if you don't is that you What you want to use the await operator To make the windows.ui operate smoothly. Await is one of the most important
language changes in the next generation because it facilitates various things about Asynchronous operation since I'm not really here to talk about code I'm not going to talk about await But I will tell you that if you're going to do any significant XAML development in that world that one of the first Language things you need to become comfortable with is the await
Keyword and there are there are quite a quite a number of good samples out there for you to do that So I said right tab, but I just do it. I'm clicked I think I was doing it right tab before so that's what our
Message dialog looks like okay, so don't panic When message box.show is not there you'll be alright without it Other things um
You need to be familiar with the toggle switch that is Considered the standard way of turning things on and off more so than a check box You don't check boxes is not used nearly as much in Windows 8. This was taken. How many of you have iPads? You know the little thing the little thing you slide between on and off and an iPad
That's a toggle switch in XAML here. Let me show you one
Toggle switch in there, and you basically need to set two kinds of content normally you you probably think of Things like button and checkbox and radio button you set content to a single string
That that is the string that displays with it with the toggle switch you actually set an on content and an off content
Whatever whatever you need it to be Again, I don't want to talk about layout right now, so I'm going to give it some some good height and width those guys
Yeah, I see them all right Oops need to make them a little bit wider Takes the designer a while to catch up, but oops I still I still have not Oh, I think it's because of that that first I don't know. I'm not sure why it's so small. I thought I made it bigger than that you see it
It's it's going over there, but now I can't get to it So let me see if I can't find out why I thought I made it plenty plenty broad enough Just take the width out let it be but auto-size itself, maybe it'll be a little smarter. Did you get that?
Start up now. Yeah, so now you can see that it looks a whole lot like Those things that you would do you would do on the app on the iPad So that should be your default way of especially for settings type dialogues of turning things on and off not with checkboxes
So and by the way the session is that after this in this room in fact is going to talk about some of the Windows 8 guidelines design guidelines Lauren are you here?
So if you're interested in purely what the design suggestions are I'm not really talking about that except Peripherally in the along the way of talking about something else because there's a session devoted to that So I'm trying to leave that out for the most part of my own of my own stuff
Progress indicators You've got the app bar and you've also got a new thing called the progress ring. It's pretty nice I should show that just because it's cute it's just It's just amazing what turns on users sometimes the stuff that takes you 30 seconds excites somebody more than the stuff that takes you three weeks
So if I put in the very middle of this thing a progress ring
And let's make it big enough so you can see it easily and you have to set it to be active before it actually shows Normally you would do that in code, but I'm just going to show it here
Well, you might bind it you might have that you might have the is active property bound to something else So you can get yourself a nice little Animation there with no no trouble at all You too can look like a pro Windows 8 developer in only seconds
The I'm not going to talk about I'm not going to show the rich edit box rich text block Rich text block overflow. I need to fix that wrapping there again This is providing you with a certain amount of the same experience that you get with the document model in WPF
Silverlight doesn't really have as much of this stuff. It does have some of it but if The the ability to have a read-only container for richly formatted stuff is a nice addition I actually like it a lot the rich text block will allow you to to display things with
Images and the text flowing around it and stuff like that So you've got a fair amount more formatting capability when you move to the rich Controls there and I'm really happy about the fact that they did change the name rich edit box
Because we don't have a rich text box It's the replacement for it. And I thought the rich text box name in in WPF and Silverlight was bad anyway, because It made you think it was like the Windows form rich text box and it isn't not very much So here we've that they've they've been very aggressive here about
Renaming things to emphasize the fact that they're different So when you go to look for something and it's not there don't assume that there isn't anything like it they've been pretty open to the idea of Changing names to avoid confusion, which I think is good if we see rich edit box
We understand that's not supposed to be a one-to-one match for rich text box It's just supposed to fill the same general niche in our user interfaces And then there's grid view and flip view and I'm gonna show you those real quickly Cuz they're they're uh, they're pretty nice. I did I did a version of that app you saw earlier
Is this it? It's probably it see if this is the right one. Yeah So here you can see I did a version of that app where I did a little bit more on getting the the templating right etc and
All I did besides get the template better was to change the list box For a different container and get this nice and I've copied a bunch more data in there, too So that I would have something to to move around but all you all I had to do to get that nice touch Capability was to switch out
the list box for a new container called the grid view and As you can see the grid view has an item template the same way that That that a list box would But it's made for that. Let's display things in columns and allow the users to
Flip back and forth without going to the trouble of you know We had to put a rat panel in as the items panel or something That it's understood that we're going to be doing a lot of this Horizontal work with users and in many cases they're going to want to use gestures to do it
so there is a did you notice that there was a Scroll bar down there, but it's almost incidental. It only shows when you're in the act of actually trying to move To a different thing notice the scroll bar is down there and and you can actually get down there and use it
the funny thing about it to me is But you have to you have to see my hand to see this okay to see how weird this is So I'm touching oops. I'm touching out here on the scroll bar now. I'm gonna move the scroll bar this The scroll that see that That the items move the way my finger moves, but it was really weird that the scroll bar moves the other way
So it's really just kind of an indicator about where you are in the list More than anything else so so that is the grid view it's In there by default and then there's another
Cousin of that that is also available as a container. Let me put that one in place I'm just gonna comment out the grid view And you can see down. There's the original list box that I commented out to my comment this out and show you the flip view
which is again, it's just an items control, it's just got a Data template on it and and we set the properties a little different, but not very much and Then when we were using the flip view instead. This is what we get
The items come up one at a time With a little indicator that there are more items and the swish capability to go with it So that's going back and forth from item to item and that's all that's just there. That's just built in So some of the stuff we would do with panoramas and things like that we've got
An interesting somewhat more flexible alternative here that That when you get to the It showed originally there's there are some oh, yeah We can move the mouse you can see it that there are some buttons there to net to navigate
And we don't see the animations if we use those But those are there as the backup to the to the touch capability So that container is called that that items container is called the flip view So flip view and grid view are
The more most commonly used Along with list box list box is still used fairly often, but in the WPF applications I used to write probably did about 70 or 80 percent of my item controls were list boxes and now
flip views grid views list boxes are kind of The third in thirds, they're roughly equal Equal in importance and usage in this flavor of XAML. Okay, so
So that's a little bit about some of the new controls that you've got Yeah, I put them up there and I was going to go into detail there a grid view kind of Is like a touch-enabled rap panel so to speak. It's kind of that axe, isn't it?
As If you were putting a rap panel as the items panel inside of a of a an items control now other things that you need to be aware of as you go to the to the to the XAML in the windows 8 arena is Some of the new events that come up and some of the changes to the event arcs and things like that
There's a very rich API that is mostly around touch who has done touch in WPF Okay, so, you know the manipulation events and all things we've got those But it turns out that you don't need to use them too often because they're abstracted into the controls a lot But there are certain events that we worry about when people do particular gestures
That are associated with the touch API and they're all pretty obvious except for one Tapped of course is a whole lot like the touch equivalent of click, right? And Holding yeah, you touch and hold
Double tapped means that you tap twice but right tap doesn't mean what it sounds like When I saw that in the API list the first time I went How do I how do I write tap Do I use a different finger? What? Now it just it really just means tap and hold and why they didn't name it that I don't know
Except that it does kind of remind you of the fact that it is basically the replacement for a right-click in The touch world that if you're going to supply a context menu, for example You normally do that Bound to this event that this is the event that that causes that well, it's not a context menu is is it?
It's a pop-up menu, but we let's still call it a context menu from a pattern standpoint It's that the control we use for it is pop-up menu Then you would use this particular event the the right tapped in order to do that. That's what I was doing before with that
Button guy there. Let's see if I can manage to get him to do something If we go back to that button right now, we've got the click and we can also do the
Right. Whoops if I could spell right tapped event In which case get a right tapped event, let's just basically copy our stuff down there Show I'm right tapped, but that would normally be where you do something having to do with
whoops What did you not like that? Oh, I'm not sure what I did wrong there I left it that worked when I was doing my practicing earlier, but you could say I got the event So I'm doing something wrong on the async there
It's maybe because I've got twat maybe because I've got two so that's that's So what about the touch API that by the way, you you may be interested on occasion when you handle some of these events It's very possible for the events to be more to be
generated by different kinds of input That is they might have touched the thing or they might have clicked it with the mouse or they might have used the stylus To do something and it is conceivable in some user experience Scenarios that you might need to know which that they chose the event arts will tell you that
Even when a mouse event gets promoted to a touch event you can still find out in the touch event that it was actually the mouse that did it and Sometimes that's that's uh, that's useful We do of course have all the manipulation events. I mentioned that earlier You don't have to worry about those to start with if you happen to know about them though from the manipulation
Events are things like manipulation Delta manipulation starting manipulation ending That's the rawest kind of touch events that you can get And in WPF it was necessary to handle a lot of those because there wasn't really an abstracted API on top of that
Some people wrote some behaviors that abstracted that a little bit But in this case we've got them but we don't need them very often And then there are a lot of things that will annoy you So let's kind of go through those and let you be prepared for your frustrations and one of them I forgot to list on here. I just thought of it as I was mentioning
There are no behaviors supported in Windows 8 XAML at this point Which I think is a rather major hole because if you are doing framework he kind of stuff how many of your written behaviors for your framework you stuff a shockingly low number Well here my assignment for you people who do XAML today is to go back to your office tomorrow and learn about behaviors
Because they are enormously useful for a wide variety of framework things I don't I don't know how I'm gonna get by in Windows 8 without behaviors They are so incredibly useful So behaviors aren't there and then there are the little things that really get in your way
The I value converter interface has changed the art the the methods are the same We still have convert and convert back But the the signature of the methods has changed the arguments have changed There are now three instead of four and they're not all the same once now
You know what that means if I take a value converter From an old project and I put it in a Windows 8 project The code will all work fine except for the fact that the method signatures are all wrong, and I have to manually fix those Or if I've got tons of a converters. I might write me some
intelligent conversion program that would fix them but but just be prepared for that and and Who is there anybody else that's the big value converter fan besides me? I use them all over the place who else is kind of nutty about value converters Yeah, see you got dozens of them. Don't you I do well No, we got to go fix them all. So that's an annoyance
Nothing, really very sophisticated from a conceptual standpoint, but it's annoying annoying I found the built-in templates to be quite complicated. I Eventually figured out mostly what they were doing But don't assume that because they're they do something very quickly when you start up that
Therefore you can turn around in an hour and hook your data into them It'll probably take longer than that just for you to figure out what all the moving parts do And where the various places are there's a fair amount of complexity in those templates Now they've mostly done it in a reasonably good way one of their big
um Priorities in doing those built-in templates was to facilitate design time data I don't know if you noticed but in that thing I did where I was building a template my design time Experience wasn't nearly as good because I wasn't using some of the the stuff that they have done with
They've got a collection view set up to do some things and there's there's various other things going on in those templates That mean that you get a pretty good design time experience visually if you hook your data up the way they expect you to
The same way they did But it'll take you a while to figure out how to do that without breaking something. I Don't I've lost count of the number of times. I broke some Some of the Some of the the stuff that goes on in the background that you work on the error messages aren't as good as they should be
You get the you'll get the dreaded Page didn't load message, you know Silverlight gets a lot has a lot of generic doesn't really tell you what's wrong just you try to run a Silverlight app and you've done something and it comes up and says Nope, I can't sorry
Well, you get that on Windows 8 too On fairly fairly minor things. I had them. I had a mistake where I'd left off a new keyword So what I should have gotten was Object No Type of error message, but I didn't I got page didn't load So be aware that the messages are not maybe as good as we'd like them to be
The text block line spacing is weird though the default line spacing Causes it to be scrunched that may be because they're trying to fit some things into their design guidelines, but I'm never Well, first of all I run into this because When I'm putting stuff up that I need you to see I've gone above the sizes that they would normally expect you to use
For a real app on the other hand, there are lots of good reasons why we need to use large sizes For people with visual problems or whatever So there are certainly situations where we will be using larger font sizes when you do You will see the text block when you tell it to wrap you will see that it will the lines will kind of
Smear on each other the the solution to that is to set the line Stacking strategy to max height and that will spread the lines out the way you would expect them to be Particularly touch interfaces are supposed to be clean And if you don't get them clean, then let's see if I can find a place where I'm I
Got that wrong Problem probably this app right here. Let's um, I'm almost done with it So let's let's go back and actually change change the program running my PowerPoint. Shall we our point till it stopped?
and go over to one of those templates where I've got the Line stacking strategy and I'll just change it back. You see what happens. Is it not in this?
in this one Probably over in the other one. Well, I must put that in a different
Different I was pretty sure I put it here though One stacking strategy Yeah, there it is. Why did the search not find it so you can see that right there Let's take that out start to see some of this stuff where there's I gotta find somebody who is
Who is wrapping? Nobody's wrapping are they are there. No, you sit right there sit right there
Making your app work well with one does eight notice the squishiness That's a consequence of taking out the line stacking strategy If I put it back it'll work fine and while that's the default, I'm not really sure I understand see now everything's fine
So that's some things that will annoy you there To make your app work well with one does eight there's several things you need to know I've already mentioned the the fact that you need to X do a sync data access Of course if you're from Silverlight, that's familiar to you
But if you're from WPF you might be doing older file older style data access But do get very familiar with the await keyword You need to master the gut the design guidelines and we've got a session coming up right here to talk about that Then you need to learn and that's the general vein
You need to assume that you're going to be working with portrait landscape split screen all of those different layouts So you need to get a lot more flexible on layout. I think most people today expect their applications to have a Single master layout and that's all it supports and you really can't do that and work well with Windows 8
You're going to have to master contracts Explain what I mean by that when I swish out on the side there You notice the thing up at the top says search one of the innovations in Windows 8. Is that the operating system? Not only will search for things on its own
When you do a search it also will go to any application that has Satisfied what's called a search contract and it will query the application for search results So this is a very powerful way for you to integrate The find kind of capability searching capabilities in a standard place that your users will always expect them
And there's nice grouping with the results from different places So your application search results won't just be smeared in with everybody else's they'll be grouped out But you need to be aware of Contracts for that also understand that you you can only distribute your applications through the App Store
That that's the only deployment option that's available to you at this point And that means you have to satisfy certain guidelines about what you do If you don't the App Store will say your app isn't compliant. That's to keep out malware We've got various resources but not that many
There are they're still pretty thin the Windows 8 SDK samples are by far them the biggest source right now I've actually got a web page up where you can go find those Here we are this page right here Has as you get 272 results of various samples
depending on whether you like What language you like XAML versus JavaScript and an HTML 5 you've got all of those those possibilities So you can filter down to what you want over there. So, you know, you know me I'm the vbnet guy so I can filter down to only the ones that
I like and that's the best place to go try to find a sample right now for Windows 8 There are quite a number of them up there. They're very minimal very minimal just to show you how to use one little feature Still waiting on the big sample that will kind of put all the pieces together I haven't seen a good one of that yet. Maybe we'll see one at TechEd next week
Okay, I'm about done I'm about out of time too But I might have time for one question or possibly two if the first one is short questions All right. Yes right here. Why does templates include so much custom stuff like that? Why don't they put it in the framework?
That's a very good question and it goes to the to the Schedule tightness of Windows 8 when something goes in the framework. It has a much higher bar It must meet in terms of testing and resources that are consumed to get it in place
So that they they have kept the framework down to the minimum they could get away with We saw this with Silverlight in Silverlight 2 if you go back that far that they just stripped out everything you could possibly Do without and this is then their way to make some of that backup for a couple of common scenarios
I'm not sure they think they know exactly what those objects ought to look like in framework form anyway Consider this an interim Way of doing it one more. Yeah
Do I expect there to be corporate app store basically? Yeah, I do I don't know when we'll see it But I'm I don't think that Microsoft will see the kind of adoption of Windows 8 they would like until they get that So I think that we will see that but I don't know when and understand that that is not based on any knowledge
I have special that is my own speculation completely, okay Yeah, maybe one more if it's fast Is there any point in doing WPF applications? Yes indeed because Metro applications when does eight applications are primarily touch centric consumption based
They're optimized for that right now any kind of desktop oriented corporate scenario Will not work well with this version I would guess that when does the Windows 8 family will continue to grow and support those but there's no strong compelling reason To stop doing corporate development in WPF right now
As a matter of fact, I am seeing renewed interest in WPF in my own consulting practice People are scared of silverlight because they don't think there will be any more versions I don't know whether there will be or not, but people think there won't WPF on the other hand is a part of the framework will be seeing at least minor upgrades to it for a while
In a sense WPF, there's always going to be a need for that desktop style of doing things right now WPF is the last man standing, you know that English phrase for technology on the desktop Okay. Thank you very much folks. I'll be back tomorrow with a couple more sessions one on Friday Come on up with questions if you have