WEBVTT 00:00:00.000 --> 00:00:01.260 [MUSIQUE] 00:00:01.260 --> 00:00:03.310 C'est génial. Entrez. 00:00:05.270 --> 00:00:09.040 Rassemblez-vous pour la parole de Xamarin. 00:00:11.690 --> 00:00:13.020 Amen. 00:00:13.020 --> 00:00:19.965 Amen. cool. effarant. Nous avons le bon écran. 00:00:19.965 --> 00:00:22.995 D'accord. Est-ce que tout le monde avoir un bon moment? 00:00:22.995 --> 00:00:23.610 Oui, c'est vrai. 00:00:23.610 --> 00:00:26.235 Oui, c'est vrai. Je suis content que tu sois venu. 00:00:26.235 --> 00:00:27.840 Avez-vous rendu vos amis jaloux ? 00:00:27.840 --> 00:00:28.440 Oui, c'est vrai. 00:00:28.440 --> 00:00:30.645 - A rendu vos ennemis jaloux ? 00:00:30.645 --> 00:00:33.990 Allez. Ouais, c'est super. 00:00:33.990 --> 00:00:36.090 Il a été absolument merveilleux d'être entouré par 00:00:36.090 --> 00:00:40.534 tant de sortes, gentil, personnes aux vues similaires, 00:00:40.534 --> 00:00:44.280 sauf Pour Duane ici sur l'avant. Je ne sais pas. 00:00:47.030 --> 00:00:50.010 Je taquine. Tu sais que je taquine. 00:00:50.010 --> 00:00:52.880 cool. Donc, nous sommes ici de parler de faire 00:00:52.880 --> 00:00:55.910 folle belle interface uI avec Xamarin Forms. 00:00:55.910 --> 00:00:58.580 Donc, j'imagine vous êtes intéressé par 00:00:58.580 --> 00:01:00.140 tous les trucs et astuces que je 00:01:00.140 --> 00:01:02.270 l'espoir d'être en mesure de partager avec vous aujourd'hui. 00:01:02.270 --> 00:01:06.200 Bien sûr, ce ne sont pas pour un usage gratuit, 00:01:06.200 --> 00:01:08.105 mais nous pouvons faire des choses vraiment sympas. 00:01:08.105 --> 00:01:11.790 On me demande une variété de questions tout le temps. 00:01:11.790 --> 00:01:14.025 De toute évidence, grâce à Twitter, par e-mail, 00:01:14.025 --> 00:01:15.810 par la prise de parole lors de conférences, 00:01:15.810 --> 00:01:19.005 sur la façon dont faites-vous x, y, et z? 00:01:19.005 --> 00:01:23.515 Probablement, le principal est comment faites-vous la parallaxe? 00:01:23.515 --> 00:01:25.700 Quelqu'un a-t-il déjà fait de la parallaxe ? 00:01:25.700 --> 00:01:27.335 N'importe qui dans la pièce, quelques personnes. 00:01:27.335 --> 00:01:31.220 Quelqu'un at-il tenté de faire parallaxe et dit: «Visez ça." 00:01:31.220 --> 00:01:36.140 J'en ai quelques-uns. Donc, je vous montrera un peu de parallaxe. 00:01:36.140 --> 00:01:37.370 C'est en fait assez génial, 00:01:37.370 --> 00:01:40.370 assez facile. J'ai obtenu une autre étape. 00:01:40.370 --> 00:01:42.845 J'ai eu beaucoup de plaisir construire ces démos, 00:01:42.845 --> 00:01:46.710 parce que j'utilisais le rechargement à chaud. 00:01:47.020 --> 00:01:49.835 C'était donc très amusant. 00:01:49.835 --> 00:01:51.140 J'ai déposé quelques bugs, 00:01:51.140 --> 00:01:52.360 certains d'entre eux se sont réparés, 00:01:52.360 --> 00:01:53.590 certains d'entre eux seront réparés, 00:01:53.590 --> 00:01:55.580 certaines des améliorations sont encore à venir, 00:01:55.580 --> 00:01:58.370 mais nous savions qu'il était prêt d'être là-bas dans la nature. 00:01:58.370 --> 00:02:00.230 Donc, je suis heureux que vous êtes va être l'obtenir dans 00:02:00.230 --> 00:02:03.320 votre sale peu gourmand petites mains bientôt. 00:02:03.320 --> 00:02:05.150 J'espère que vous prendrez l'occasion de 00:02:05.150 --> 00:02:07.175 fournir beaucoup de commentaires à l'équipe. 00:02:07.175 --> 00:02:09.050 Faites-nous savoir comment cela fonctionne pour vous, 00:02:09.050 --> 00:02:11.470 faites-nous savoir où il n'est pas, cool? 00:02:11.470 --> 00:02:14.490 Donc, c'est ma poignée Twitter. 00:02:14.490 --> 00:02:17.040 À la fin, j'ai mon e-mail ainsi. 00:02:17.040 --> 00:02:18.790 S'll vous plaît, tendez la main à tout moment. 00:02:18.790 --> 00:02:22.115 Je m'excuse si je ne le fais pas. revenez à vous immédiatement, 00:02:22.115 --> 00:02:27.705 mais je ne lire tous les e-mails et j'essaie de répondre à tous. 00:02:27.705 --> 00:02:29.760 Parfois, je suce à la gestion du temps, 00:02:29.760 --> 00:02:31.520 donc vous savez comment c'est. 00:02:31.520 --> 00:02:34.190 cool. Alors j'ai pensé que le premier chose que nous parlerions 00:02:34.190 --> 00:02:39.420 sur si ma flèche fonctionne. 00:02:39.420 --> 00:02:42.160 Un de ces boutons doit fonctionner. 00:02:42.710 --> 00:02:46.755 Il ne veut littéralement pas à l'avant. Voilà, c'est parti. 00:02:46.755 --> 00:02:49.230 Bonjour. Alors j'ai pensé qu'on parlerait d'abord 00:02:49.230 --> 00:02:51.650 sur des thèmes; couleurs, polices, icônes, 00:02:51.650 --> 00:02:55.690 parce que vous avez probablement suivi les annonces d'Apple, 00:02:55.690 --> 00:02:59.735 iOS 13 a maintenant le mode sombre. 00:02:59.735 --> 00:03:00.570 Oui, c'est vrai. 00:03:00.570 --> 00:03:03.435 Oui, c'est vrai. Plus de temps de téléphone au lit, 00:03:03.435 --> 00:03:07.140 c'est de ça qu'il s'agit. 00:03:07.140 --> 00:03:11.160 Donc, c'est important et les gens vont vous demander, 00:03:11.160 --> 00:03:12.625 peut-être que vous demandez déjà, 00:03:12.625 --> 00:03:15.280 "Comment puis-je mieux soutenir ces choses dans 00:03:15.280 --> 00:03:18.010 mon application pour s'assurer que votre application 00:03:18.010 --> 00:03:20.590 sent qu'il appartient comme il se doit sur 00:03:20.590 --> 00:03:23.695 la plate-forme iOS ainsi comme Android bien sûr. 00:03:23.695 --> 00:03:26.365 Alors, comment puis-je mieux aborder ces choses? 00:03:26.365 --> 00:03:27.910 Donc, je vais partager avec vous certains de 00:03:27.910 --> 00:03:29.860 les choses que j'ai tendance à chercher. 00:03:29.860 --> 00:03:32.440 Maintenant, mes antécédents avant 00:03:32.440 --> 00:03:34.450 rejoindre Microsoft deux il y a un an et demi, 00:03:34.450 --> 00:03:36.275 J'avais une soci été appelée Render, 00:03:36.275 --> 00:03:38.535 et nous avons fait des consultations. 00:03:38.535 --> 00:03:43.550 C'était moi partenaire Ben Bishop et plusieurs entrepreneurs. 00:03:43.610 --> 00:03:46.080 Nous avons donc fait des applications pour les startups, 00:03:46.080 --> 00:03:47.400 nous les avons fait pour les entreprises, 00:03:47.400 --> 00:03:49.680 nous avions de gros clients, nous avait de petits clients. 00:03:49.680 --> 00:03:51.705 L'un des thèmes communs était : 00:03:51.705 --> 00:03:53.415 c'était très créatif, 00:03:53.415 --> 00:03:55.455 très avant-gardiste, il y avait 00:03:55.455 --> 00:03:57.985 barre très élevée pour l'expérience utilisateur. 00:03:57.985 --> 00:04:00.490 Donc, nous faisions constamment choses que nous n'avons pas pu trouver 00:04:00.490 --> 00:04:04.030 tout précédent pour ou nous il suffit d'essayer de le régler. 00:04:04.030 --> 00:04:06.010 Donc, certains d'entre eux sont conseils et astuces de 00:04:06.010 --> 00:04:08.500 ressources utiles et pratiques que j'ai. 00:04:08.500 --> 00:04:11.915 Donc, l'un des premiers est trouver des ressources comme celle-ci. 00:04:11.915 --> 00:04:14.990 C'est la couleur dot adobe dot com. 00:04:14.990 --> 00:04:17.840 On l'appelait autrefois Kuler, K-U-L-E-R. 00:04:17.840 --> 00:04:20.960 Donc, il s'agit d'un site Web et il ya aussi une application mobile 00:04:20.960 --> 00:04:23.760 que vous pouvez utiliser et vous pouvez prendre des photos de couleurs, 00:04:23.760 --> 00:04:26.420 vous pouvez prendre des photos d'une photo entière, 00:04:26.420 --> 00:04:29.160 et il vous dira ce que la palette de couleurs qu'il est. 00:04:29.160 --> 00:04:32.620 Donc, si vous êtes à la recherche d' juste un ensemble de cinq, six, 00:04:32.620 --> 00:04:35.310 couleurs qui correspondent à un thème particulier, 00:04:35.310 --> 00:04:37.150 c'est une bonne ressource pour aller à. 00:04:37.150 --> 00:04:40.270 Si vous êtes couleur contesté, c'est bon. 00:04:40.270 --> 00:04:43.834 Maintenant, quelque chose à garder à l'esprit du point de vue de l'accessibilité, 00:04:43.834 --> 00:04:45.350 juste parce qu'il ya une palette de couleurs, 00:04:45.350 --> 00:04:47.890 ne signifie pas qu'il va d'être grand sur votre téléphone, 00:04:47.890 --> 00:04:50.659 ne signifie pas qu'il va pour être grand pour l'accessibilité, 00:04:50.659 --> 00:04:53.165 parce que quand il s'agit de couleur, 00:04:53.165 --> 00:04:55.115 contraste est très important. 00:04:55.115 --> 00:04:56.840 Vous devez prendre en compte la couleur 00:04:56.840 --> 00:04:58.565 la cécité et des choses comme ça. 00:04:58.565 --> 00:05:00.230 Donc, vous voulez être conscient de cela. 00:05:00.230 --> 00:05:02.270 Je n'ai pas fait la promotion de ça sur mon deck, 00:05:02.270 --> 00:05:05.345 mais je sais sur Mac en particulier, 00:05:05.345 --> 00:05:07.160 il ya un plug-in que vous 00:05:07.160 --> 00:05:09.480 peut installer, ou c'est pas même un plug-in, 00:05:09.480 --> 00:05:10.670 c'est une application que vous pouvez installer, 00:05:10.670 --> 00:05:13.550 et il va transformer votre écran en 00:05:13.550 --> 00:05:17.600 une représentation de ce que différents gens daltoniens voir, 00:05:17.600 --> 00:05:20.690 et qui va vraiment ouvrir les yeux 00:05:20.690 --> 00:05:22.880 à ce que vous traitez 00:05:22.880 --> 00:05:25.070 avec et ce que ces gens vivre avec tous les jours. 00:05:25.070 --> 00:05:28.860 Le vert n'est pas nécessairement vert comme vert peut-être, cette chose. 00:05:28.860 --> 00:05:30.510 Il s'agit donc d'une très bonne ressource. 00:05:30.510 --> 00:05:33.750 Un autre est coolers.com, c'est coolers.com ? 00:05:33.750 --> 00:05:37.500 Oui, coolers.co. exactement Google pour ceux-ci, 00:05:37.500 --> 00:05:39.690 les vérifier. Encore une fois, vraiment bon. 00:05:39.690 --> 00:05:40.905 Ils vous donneront le RGB, 00:05:40.905 --> 00:05:44.430 ils vous donneront les couleurs hexadecimal, 00:05:44.430 --> 00:05:46.440 vous pouvez faire mono chromatique, 00:05:46.440 --> 00:05:49.925 vous pouvez faire contraster, toutes choses. 00:05:49.925 --> 00:05:52.385 C'est une très bonne ressource et vous pouvez commencer par là. 00:05:52.385 --> 00:05:54.710 Maintenant, quels sont vos options lorsque vous allez à 00:05:54.710 --> 00:05:57.470 les thèmes dans les formulaires Xamarin? 00:05:57.470 --> 00:05:59.720 Donc, vous êtes probablement sont penser à des thèmes, 00:05:59.720 --> 00:06:02.870 si vous recherchez le thème Word avec Xamarin Forms, 00:06:02.870 --> 00:06:04.055 et vous trouverez ce Xamarin 00:06:04.055 --> 00:06:08.140 Forfait Forms.theme. Quelqu'un a utilisé ça ? 00:06:08.140 --> 00:06:12.480 Un, deux. Était-ce qu'une douleur sur le cul pour se mettre en place? 00:06:12.480 --> 00:06:15.155 Ouais, beaucoup plus dur que il fallait l'être. 00:06:15.155 --> 00:06:20.310 Donc, c'était un aperçu qui l'équipe a mis il ya plusieurs années. 00:06:20.310 --> 00:06:23.330 C'est toujours un aperçu parce qu'il tourne 00:06:23.330 --> 00:06:26.130 il n'était vraiment pas la meilleure approche, 00:06:26.130 --> 00:06:27.600 et donc beaucoup a été appris. 00:06:27.600 --> 00:06:31.160 Il est toujours assis là-bas juste au cas où quelqu'un veut l'utiliser, 00:06:31.160 --> 00:06:33.785 parce que nous n'avons vraiment pas l'a remplacé par quoi que ce soit. 00:06:33.785 --> 00:06:37.105 Je ne recommanderais pas de l'utiliser, 00:06:37.105 --> 00:06:39.510 Je l'ignorerais, prétendre qu'il n'existe pas. 00:06:39.510 --> 00:06:41.550 Nous pouvons l'enlever à un moment donné, 00:06:41.550 --> 00:06:42.780 On m'a demandé, "Hé, 00:06:42.780 --> 00:06:44.430 quand pouvons-nous abandonner cette chose? 00:06:44.430 --> 00:06:46.320 Nous avons une habitude en particulier, 00:06:46.320 --> 00:06:48.110 maintenant que nous faisons partie de Microsoft qui 00:06:48.110 --> 00:06:49.670 nous ne voulons pas supprimer tout ce que quelqu'un 00:06:49.670 --> 00:06:52.770 pourrait avoir une dépendance à l'égard sans beaucoup d'avertissement, 00:06:52.770 --> 00:06:54.620 et les étiquettes, et les choses. 00:06:54.620 --> 00:06:57.495 Donc, vous avez aussi GrialKit. 00:06:57.495 --> 00:06:59.025 Je l'appelle GrialKit, 00:06:59.025 --> 00:07:00.950 mais je l'ai entendu prononcé plusieurs façons différentes, 00:07:00.950 --> 00:07:04.580 mais je suppose que je vais juste être un ignorant Américain et l'appeler GrialKit 00:07:04.580 --> 00:07:09.510 parce que c'est comme le Saint Graal, Graal, Greil. 00:07:09.510 --> 00:07:12.530 Donc, c'est vraiment génial, 00:07:12.530 --> 00:07:13.760 super facile à utiliser. 00:07:13.760 --> 00:07:15.650 Je l'ai attrapé moi-même et je l'ai utilisé. 00:07:15.650 --> 00:07:18.710 Ils ont une très forte moteur de toitage à l'intérieur 00:07:18.710 --> 00:07:22.385 de Graal et vous pouvez l'utiliser. 00:07:22.385 --> 00:07:25.430 C'est commercial, donc vous payer des frais de licence, 00:07:25.430 --> 00:07:27.950 Je ne sais pas ce que le courant arrangement est et des trucs comme ça, 00:07:27.950 --> 00:07:29.570 mais d'après mon expérience, 00:07:29.570 --> 00:07:31.400 ça vaut chaque centime. 00:07:31.400 --> 00:07:34.050 J'ai mis en place une équipe de robotique au lycée, 00:07:34.050 --> 00:07:35.840 mon fils fait les trucs robotiques, 00:07:35.840 --> 00:07:37.790 et ils voulaient construire une application mobile pour 00:07:37.790 --> 00:07:41.900 essentiellement suivre les autres équipes dans leurs compétitions, 00:07:41.900 --> 00:07:44.254 et essentiellement faire du scoutisme, 00:07:44.254 --> 00:07:45.860 mais ils voulaient bien paraître. 00:07:45.860 --> 00:07:48.260 Alors je l'ai mis en place avec la licence et tout, 00:07:48.260 --> 00:07:49.730 et ils ont été tout simplement époustouflés. 00:07:49.730 --> 00:07:51.260 Ils sont comme, "C'est exactement ce que je veux. 00:07:51.260 --> 00:07:54.835 Je veux être le gamin cool et mon trucs semble génial par défaut. 00:07:54.835 --> 00:07:58.250 Alors dans l'autre sens, vous pouvez aller à ce sujet est l'écrire vous-même. 00:07:58.250 --> 00:07:59.960 Bien sûr, l'écrire vous-même 00:07:59.960 --> 00:08:01.400 signifie que vous allez faire un peu de travail, 00:08:01.400 --> 00:08:03.680 mais vous le possédez, et vous savoir qu'il bout à bout. 00:08:03.680 --> 00:08:06.080 C'est un autre de les raisons pour lesquelles nous n'avons vraiment jamais 00:08:06.080 --> 00:08:08.935 évolué ces Xamarin Forfait thème formes, 00:08:08.935 --> 00:08:11.880 c'est parce qu'avec les styles, ressources statiques, 00:08:11.880 --> 00:08:13.490 ressources dynamiques, vous avez vraiment 00:08:13.490 --> 00:08:15.935 avoir tout à le bout des doigts dont vous avez besoin. 00:08:15.935 --> 00:08:20.150 Donc, vous n'avez pas né cessairement besoin tout un paquet pour le rendre plus difficile, 00:08:20.150 --> 00:08:21.755 nous le rendons assez facile. 00:08:21.755 --> 00:08:23.540 Donc, je vais montrer une démo ici en 00:08:23.540 --> 00:08:26.005 un peu et c'est la méthode que j'utilise. 00:08:26.005 --> 00:08:28.400 Ressources dynamiques, quelque chose que je 00:08:28.400 --> 00:08:30.770 ramassé de notre équipe de conseil à la clientèle. 00:08:30.770 --> 00:08:32.620 Je regardais à travers certains de leur code et je suis comme, 00:08:32.620 --> 00:08:35.565 "C'est génial, je suis juste va l'utiliser totalement. 00:08:35.565 --> 00:08:39.545 Donc, nous allons montrer que. D'autres trucs quand il s'agit de polices, 00:08:39.545 --> 00:08:41.120 nous avons ajouté cela récemment, 00:08:41.120 --> 00:08:43.235 Je pense que c'était Xamarin Forms4.1. 00:08:43.235 --> 00:08:46.060 Nous avons ajouté quelques nouvelles tailles de noms. 00:08:46.060 --> 00:08:48.290 Il est bon d'utiliser des tailles de nom 00:08:48.290 --> 00:08:50.705 surtout quand il vient à l'accessibilité. 00:08:50.705 --> 00:08:53.120 J'ai donc des parents qui sont un peu 00:08:53.120 --> 00:08:55.535 plus difficile dans les yeux de voir les choses, 00:08:55.535 --> 00:08:57.755 et donc vous ramasser leur téléphone et juste 00:08:57.755 --> 00:09:00.920 claquer dans le visage avec la police parce qu'elle est si grande. 00:09:00.920 --> 00:09:03.140 J'ai donc vu certains d'entre vous 00:09:03.140 --> 00:09:05.810 ici avec des polices vraiment grandes sur vos téléphones, 00:09:05.810 --> 00:09:08.420 donc c'est bon pour toi aussi. 00:09:08.420 --> 00:09:10.745 Oui, mais on a ajouté de nouvelles choses. 00:09:10.745 --> 00:09:13.640 James Clancy l'un des nos ingénieurs envoient ce PR. 00:09:13.640 --> 00:09:16.970 Nous avons quelques travail bénéfique à venir pour 00:09:16.970 --> 00:09:20.735 polices ainsi pour le faire plus facile à faire multi-plateforme. 00:09:20.735 --> 00:09:24.995 Nous avons dans les travaux le plan de tomber essentiellement 00:09:24.995 --> 00:09:29.350 un fichier de police dans votre partage, your.NET projet standard. 00:09:29.350 --> 00:09:31.965 Whoops, mais vous savez ce que je veux dire par partagé? 00:09:31.965 --> 00:09:33.830 Nous ne parlons pas de partagé en termes 00:09:33.830 --> 00:09:35.660 de la chose sale projet partagé, 00:09:35.660 --> 00:09:38.600 nous parlons about.NET projets standard, 00:09:38.600 --> 00:09:40.580 dont il n'y a rien de mal avec des projets partagés, 00:09:40.580 --> 00:09:42.990 mais juste pour être clair sur ce que je veux dire. 00:09:43.260 --> 00:09:46.630 Déposez cette police là-dedans et il automatiquement 00:09:46.630 --> 00:09:49.690 ne les trucs pré-construire nécessaire. 00:09:49.690 --> 00:09:53.470 Donc, vous n'avez pas à vous inquiéter sur la mise en place info.plist. 00:09:53.470 --> 00:09:57.670 Vous n'avez pas à vous soucier combinant les noms ou la figure 00:09:57.670 --> 00:09:59.590 comment fait référence Android 00:09:59.590 --> 00:10:02.170 cette police par rapport à comment ne iOS référence à cette police. 00:10:02.170 --> 00:10:06.220 Vous avez tous apprécié que je suis sûr et vous avez utilisé cette anecdote avec 00:10:06.220 --> 00:10:08.440 vos amis pour les impressionner comment vous 00:10:08.440 --> 00:10:10.660 peut faire des polices personnalisées sur iOS et Android, 00:10:10.660 --> 00:10:12.250 mais nous pouvons le rendre plus facile. 00:10:12.250 --> 00:10:13.735 Donc, c'est à venir aussi. 00:10:13.735 --> 00:10:16.255 Donc, vous utilisez ces et puis 00:10:16.255 --> 00:10:19.360 lorsque l'utilisateur entre dans les paramètres d'accessibilité, 00:10:19.360 --> 00:10:21.070 ils changent de taille de police, 00:10:21.070 --> 00:10:24.155 ils obtiennent automatiquement l'avantage de la refonte, 00:10:24.155 --> 00:10:28.955 alors que si vous code dur ces tailles de texte, puis il est fixé. 00:10:28.955 --> 00:10:34.329 Maintenant, je voudrais dis-le est à vous d'utiliser votre discrétion 00:10:34.329 --> 00:10:36.970 et travailler avec votre équipe pour savoir où 00:10:36.970 --> 00:10:40.285 utiliser la taille de police nommée et où d'utiliser des tailles de police fixes. 00:10:40.285 --> 00:10:43.870 Peut-être tout n'a pas besoin d'évoluer. 00:10:43.870 --> 00:10:46.510 Donc, c'est quelque chose c'est à votre disposition. 00:10:46.510 --> 00:10:48.400 Ce n'est pas une chose tout ou rien. 00:10:48.400 --> 00:10:50.545 Vous l'utilisez comme il fait le plus de sens. 00:10:50.545 --> 00:10:52.090 D'accord. Voici donc 00:10:52.090 --> 00:10:54.790 les ingrédients de ce Je vais travailler avec. 00:10:54.790 --> 00:10:57.190 Un service thématique, essentiellement Je vais juste à 00:10:57.190 --> 00:11:00.070 utiliser les ressources d'applications existantes, 00:11:00.070 --> 00:11:04.060 styles préréglés, et puis je suis va appliquer des styles dynamiques. 00:11:04.060 --> 00:11:06.160 Alors regardons un peu de code, d'accord ? 00:11:06.160 --> 00:11:09.320 Cela n'a pas pris beaucoup long pour entrer dans le code. 00:11:09.330 --> 00:11:13.570 cool. D'accord, où est Zappy ? 00:11:13.570 --> 00:11:16.610 Voilà ce que j'ai. 00:11:18.450 --> 00:11:22.010 Voyons quelle est la clé de zoom? 00:11:23.400 --> 00:11:29.450 Plus-plus, commande plus. Regarde ça. 00:11:30.180 --> 00:11:33.535 Alors viens ici petit curseur mec. 00:11:33.535 --> 00:11:36.620 C'est Windows, c'est si dur pour moi les gars. 00:11:36.960 --> 00:11:41.260 Très bien, donc par ici dans mon dossier Styles, 00:11:41.260 --> 00:11:44.320 J'ai un thème par défaut, 00:11:44.320 --> 00:11:46.270 J'ai un thème sombre, 00:11:46.270 --> 00:11:49.990 et puis j'ai un thème blanc ce qui est horrible nommant. 00:11:49.990 --> 00:11:52.090 On devrait peut-être être thème noir 00:11:52.090 --> 00:11:54.205 ou peut-être le thème blanc devrait être un thème de lumière. 00:11:54.205 --> 00:11:56.380 Pourquoi j'ai mélangé blanc et noir, 00:11:56.380 --> 00:11:59.260 Je ne peux que blâmer le manque de sommeil. 00:11:59.260 --> 00:12:02.845 Mais je suis sûr que vous nommez tout parfaitement la première fois. 00:12:02.845 --> 00:12:04.930 Nommer est facile pour vous, 00:12:04.930 --> 00:12:07.150 C'est dur pour moi. Je comprends tout à fait. 00:12:07.150 --> 00:12:10.390 d'accord. Donc, nous allons regarder ces fichiers juste une seconde 00:12:10.390 --> 00:12:13.915 et puis j'ai aussi d'autres des choses se séparent ici. 00:12:13.915 --> 00:12:17.410 Global XAML qui apporte tout ensemble 00:12:17.410 --> 00:12:22.660 vraiment et puis j'ai des icônes ici, les tailles, et le texte. 00:12:22.660 --> 00:12:25.690 Est-ce une pratique que vous utilisez si 00:12:25.690 --> 00:12:28.180 vous avez beaucoup de ressources ou beaucoup de styles définis, 00:12:28.180 --> 00:12:31.945 vous les briser en catégories comme ça? 00:12:31.945 --> 00:12:34.555 Levez la main pour moi si c'est quelque chose que vous faites. 00:12:34.555 --> 00:12:39.160 cool. Donc, ce n'est pas fou après tout. 00:12:39.160 --> 00:12:41.620 Sortez-moi d'ici, c'est parti. 00:12:41.620 --> 00:12:46.000 Voici donc mon fichier Mondial XAML et donc j'ai toutes mes couleurs jusqu'à 00:12:46.000 --> 00:12:50.155 ici et peut-être que cela pourrait être refactorisé dans un fichier distinct. 00:12:50.155 --> 00:12:53.230 Soit dit en passant, nous cherchons à l'application Zappy, 00:12:53.230 --> 00:12:56.980 peut-être que je devrais tirer vers le haut de ce bord. 00:12:56.980 --> 00:12:58.690 On va utiliser un avantage maintenant, non.? 00:12:58.690 --> 00:13:00.100 Bord sur Windows. 00:13:00.100 --> 00:13:03.670 Il va très bien, j'aime il. Je suis sur les Canaries. 00:13:03.670 --> 00:13:07.750 J'ai mis à jour toutes mes affaires la nuit dernière, pas seulement mon Edge, 00:13:07.750 --> 00:13:09.160 tous mes Visual Studio, 00:13:09.160 --> 00:13:10.780 tous mes Xamarin parce que je suis comme,"Hey, 00:13:10.780 --> 00:13:11.980 J'ai deux entretiens demain. 00:13:11.980 --> 00:13:13.720 Quelle est la meilleure chose à faire? 00:13:13.720 --> 00:13:15.820 Mettez à jour tout. 00:13:15.820 --> 00:13:18.520 Je n'ai aucun regret. 00:13:18.520 --> 00:13:21.504 Donc Zappy c'est sur mon GitHub, 00:13:21.504 --> 00:13:23.305 c'est comme un arbre ou autre. 00:13:23.305 --> 00:13:26.815 Donc, cette application est vraiment, 00:13:26.815 --> 00:13:29.080 J'ai fait les petites choses terrain de jeu 00:13:29.080 --> 00:13:31.810 app pendant la série 3.0 et j'ai vraiment apprécié 00:13:31.810 --> 00:13:34.150 être capable de se battre 00:13:34.150 --> 00:13:36.550 tester certaines de ces choses comme ils étaient libérés. 00:13:36.550 --> 00:13:40.210 Il a également créé une belle petite référence, mais il était cul laid. 00:13:40.210 --> 00:13:42.310 Je suis comme si on pouvait faire mieux que ça. 00:13:42.310 --> 00:13:44.320 Alors que diriez-vous que nous construisons une application de référence. 00:13:44.320 --> 00:13:48.160 Donc Zappy est cette application de référence pour la série 4.0 où je suis juste 00:13:48.160 --> 00:13:52.660 ajoutant des fonctionnalités montrant comment nous faire des choses, en ajoutant des scénarios. 00:13:52.660 --> 00:13:54.100 Quand je Twitch flux, 00:13:54.100 --> 00:13:57.160 nous ajoutons habituellement un écran ou quelque chose à cela pour montrer 00:13:57.160 --> 00:14:00.490 hors d'une certaine technique et nous amuser. 00:14:00.490 --> 00:14:01.690 Donc, c'est ce que cette application est. 00:14:01.690 --> 00:14:05.290 Vous pouvez le cloner, vous pouvez envoyer des APR. 00:14:05.290 --> 00:14:08.979 Si vous voulez voir trucs dans la série, 00:14:08.979 --> 00:14:11.995 envoyer un problème, nous allons travailler sur elle et être cool. 00:14:11.995 --> 00:14:14.185 C'est ce sur quoi nous travaillons, 00:14:14.185 --> 00:14:17.770 et donc j'ai votre typique dictionnaire des ressources 00:14:17.770 --> 00:14:21.625 ici. Voyons voir ici. 00:14:21.625 --> 00:14:24.580 J'ai quelques-uns des les couleurs de gradient fly-out 00:14:24.580 --> 00:14:26.425 parce que Zappy a un gradient. 00:14:26.425 --> 00:14:28.210 Bien sûr, tout a des gradients. 00:14:28.210 --> 00:14:30.010 C'est comme ça que vous voyez dans plus de gradients, 00:14:30.010 --> 00:14:32.695 demandes de gradients Oui, c'est de retour. 00:14:32.695 --> 00:14:35.725 La prochaine chose que nous aurons bords bevés et puis. 00:14:35.725 --> 00:14:37.750 Pourriez-vous faire cela ressembler à un cuir? 00:14:37.750 --> 00:14:39.950 Je voudrais que ce soit du cuir. 00:14:40.650 --> 00:14:43.675 C'est commun, c'est commun. 00:14:43.675 --> 00:14:45.100 Je veux dire vraiment WebAssembly 00:14:45.100 --> 00:14:48.655 est comme le deuxième à venir de Silverlight, n'est-ce pas ? 00:14:48.655 --> 00:14:51.610 Un peu oui. 00:14:51.610 --> 00:14:56.995 Alors bien sûr, j'ai souligné cela dans ma dernière session. 00:14:56.995 --> 00:14:58.660 Lorsque vous avez un style et que vous 00:14:58.660 --> 00:15:01.060 ont des types qui dérivent d'autres types, 00:15:01.060 --> 00:15:04.405 vous pouvez utiliser cette propriété ici s'appliquent aux types de dérive. 00:15:04.405 --> 00:15:06.940 Ceci est particulièrement utile avec 00:15:06.940 --> 00:15:09.730 la façon dont nous avons fait l'aliasing par coquille. 00:15:09.730 --> 00:15:11.800 Donc, dans la coquille c'est un objet de coquille, 00:15:11.800 --> 00:15:14.740 section de coquille, et coquille contenu, c'est la hiérarchie. 00:15:14.740 --> 00:15:17.140 Mais il fait un tout beaucoup plus de sens d'être 00:15:17.140 --> 00:15:19.390 en mesure de dire que je veux un élément fly out. 00:15:19.390 --> 00:15:20.740 Je veux un onglet. 00:15:20.740 --> 00:15:23.080 Je veux que ce soit une barre d'onglet avec plusieurs onglets. 00:15:23.080 --> 00:15:25.405 Ce sont des noms d'alias à ces choses, 00:15:25.405 --> 00:15:28.120 afin que vous puissiez utiliser cette propriété pour s'assurer 00:15:28.120 --> 00:15:30.970 vos styles se rendre à l'endroit où vous vous attendez à ce qu'ils soient. 00:15:30.970 --> 00:15:34.210 cool. Donc, c'est quelque chose d'être au courant et puis 00:15:34.210 --> 00:15:35.740 J'ai un tas de convertisseurs vers le bas 00:15:35.740 --> 00:15:37.675 ici qui pourrait probablement être son propre fichier à. 00:15:37.675 --> 00:15:40.930 Donc, la façon dont le thème fonctionne, c'est que 00:15:40.930 --> 00:15:44.170 mon thème par défaut apporte tous ces morceaux ensemble. 00:15:44.170 --> 00:15:48.250 C'est assez grand ? Je sais comment le faire. Non, pas ça. 00:15:48.250 --> 00:15:51.520 J'ai dit non. Et voilà. 00:15:51.520 --> 00:15:53.380 J'ai une question moi-même. 00:15:53.380 --> 00:15:56.575 Et voilà. C'est assez grand. Ouais, tu peux le voir. 00:15:56.575 --> 00:15:59.980 Donc c'est mon défaut, 00:15:59.980 --> 00:16:02.770 il est utilisé dans MergedDictionaries qui est ce que nous expédions que dans 00:16:02.770 --> 00:16:06.325 trois quelque chose ou a été c'est comme une chose 25, 26? 00:16:06.325 --> 00:16:08.890 Ca fait tant d'années. 00:16:08.890 --> 00:16:12.730 La plate-forme continue de mûrir et émergent, c'est génial. 00:16:12.730 --> 00:16:15.490 Donc, cela apporte tout ensemble et puis je 00:16:15.490 --> 00:16:18.340 avoir mon thème sombre et mon thème blanc. 00:16:18.340 --> 00:16:22.540 Donc mon thème blanc est basé sur le thème par défaut. 00:16:22.540 --> 00:16:26.020 Donc, il a une source de base de ce thème par défaut, 00:16:26.020 --> 00:16:30.415 mais alors il entre et il personnalise ces couleurs particulières. 00:16:30.415 --> 00:16:33.070 Maintenant, voici où la dynamique ressources chose entre en vigueur. 00:16:33.070 --> 00:16:35.410 Vous devez donner à ces gars une clé afin 00:16:35.410 --> 00:16:37.855 que je peux référencer ces couleurs ailleurs, 00:16:37.855 --> 00:16:38.980 et donc allons voir où 00:16:38.980 --> 00:16:42.040 que la couleur de fond est être utilisé dans mon global. 00:16:42.040 --> 00:16:46.345 Donc, la couleur de fond, 00:16:46.345 --> 00:16:50.270 pas cette couleur de fond, l'autre. 00:16:50.400 --> 00:16:54.565 "Recherche", c'est parti. 00:16:54.565 --> 00:16:58.030 Donc pour mon élément visuel style de fond, je suis 00:16:58.030 --> 00:17:02.020 l'utiliser ici, utilise dynamicResource. 00:17:02.020 --> 00:17:04.630 Alors, ce que la ressource dynamique va faire pour vous, 00:17:04.630 --> 00:17:07.795 il a conscience de fondamentalement sur le changement de propriété. 00:17:07.795 --> 00:17:11.934 Donc, quand cette couleur ou quoi que ce soit qui utilise ce changement de couleur, 00:17:11.934 --> 00:17:15.175 il va s'assurer que ce changement est reflété immédiatement. 00:17:15.175 --> 00:17:20.620 De même, ici, à l'intérieur de je crois que c'est un texte. 00:17:20.620 --> 00:17:23.290 Donc, pour mon texte titre de la couleur 00:17:23.290 --> 00:17:25.930 étant utilisé est ma couleur primaire de texte. 00:17:25.930 --> 00:17:29.259 Donc, tout en mon thème blanc utilise 00:17:29.259 --> 00:17:31.270 texte essentiellement sombre sur 00:17:31.270 --> 00:17:35.800 un fond blanc et comme vous vous y attendriez, 00:17:35.800 --> 00:17:38.275 mon thème sombre est fondamentalement l'inverse, 00:17:38.275 --> 00:17:41.830 fond sombre et texte clair. 00:17:41.830 --> 00:17:46.630 Donc, nous prenons un coup d'oeil à la façon dont cela ressemble. 00:17:46.630 --> 00:17:50.845 Je ne sais pas, je pense que je probablement besoin de redéployer ce gars. 00:17:50.845 --> 00:17:55.240 Nous allons aller de l'avant et faire une construction et de déployer et puis nous aurons 00:17:55.240 --> 00:17:57.070 recharger à chaud continuer et puis J'ai quelques ou trois 00:17:57.070 --> 00:17:59.590 d'autres choses cool à partager avec vous par la suite. 00:17:59.590 --> 00:18:00.670 Mais je n'ai pas fait de changements, 00:18:00.670 --> 00:18:04.555 de sorte que cette construction ne devrait pas prendre jusqu'à demain. 00:18:04.555 --> 00:18:10.550 J'ai remarqué que j'ai été testé quelques constructions internes chaudes. 00:18:10.890 --> 00:18:13.210 Mais tu détesterais ça quand tu frappes 00:18:13.210 --> 00:18:15.595 le bouton "Home" sur elle juste comme il commence à lancer, 00:18:15.595 --> 00:18:17.935 qui vient de tuer le chose que je déploie. 00:18:17.935 --> 00:18:19.810 Juste moi, non. 00:18:19.810 --> 00:18:21.760 Qu'est-ce que j'ai fait? 00:18:21.760 --> 00:18:23.620 N'est-ce pas ce que Maddie a rencontré 00:18:23.620 --> 00:18:26.275 hier où tout fonctionnait? 00:18:26.275 --> 00:18:41.560 quel? 00:18:41.560 --> 00:18:44.030 C'est un mensonge. 00:18:46.980 --> 00:18:50.320 C'est dire la coutume rendu, c'est tellement bizarre. 00:18:50.320 --> 00:18:52.945 Je n'ai littéralement rien fait là-bas. 00:18:52.945 --> 00:18:55.255 Littéralement rien. 00:18:55.255 --> 00:18:58.570 Alors, que faites-vous quand cela se produit? 00:18:58.570 --> 00:19:00.685 Mise à jour. 00:19:00.685 --> 00:19:04.490 Mise à jour. Et si on fait un clean ? 00:19:05.010 --> 00:19:11.275 Ce qui serait intéressant. On va jeter un oeil. 00:19:11.275 --> 00:19:18.380 Pas celui-là celui-là. Qu'est-ce qui a changé ? 00:19:20.400 --> 00:19:25.090 Voyons ici projet designer, app XAML. 00:19:25.090 --> 00:19:28.000 Tu vas baiser quelque chose dans l'application XAML. 00:19:28.000 --> 00:19:31.395 Regardons-le très vite et 00:19:31.395 --> 00:19:32.810 alors nous allons essayer de reconstruire une fois de plus 00:19:32.810 --> 00:19:34.680 et si ce n'est pas travail, nous allons passer à autre chose. 00:19:34.680 --> 00:19:38.225 Parce que j'en ai d'autres vraiment des démos douces qui sont encore mieux. 00:19:38.225 --> 00:19:41.700 Quelle a été la dernière chose que tu as faite ici ? 00:19:41.800 --> 00:19:45.150 Je ne vois aucun problème. 00:19:48.090 --> 00:19:52.370 Bien sûr, votre pas se passe bien à chaque fois, n'est-ce pas ? 00:19:57.750 --> 00:20:00.460 Donc, c'est essentiellement va me donner 00:20:00.460 --> 00:20:03.985 la possibilité d'échanger des thèmes. 00:20:03.985 --> 00:20:06.940 Je vais pouvoir pour entrer dans mes Paramètres 00:20:06.940 --> 00:20:10.375 Panel et voir mes différents thèmes, 00:20:10.375 --> 00:20:14.300 les changer, et voir ma mise à jour d'écran immédiatement. 00:20:14.370 --> 00:20:18.290 Vous pouvez le faire peu Android. 00:20:19.800 --> 00:20:23.725 Maintenant, ça prend beaucoup de temps à construire, non? 00:20:23.725 --> 00:20:25.345 Après ça, nettoie. 00:20:25.345 --> 00:20:28.100 Qu'est-ce qui se passe ? 00:20:28.260 --> 00:20:31.255 Eh bien, c'est aller, parce que je peut toujours y revenir, 00:20:31.255 --> 00:20:33.280 Je veux dire que la démo va d'avoir à travailler parce qu'il 00:20:33.280 --> 00:20:36.190 a vraiment comme toutes les meilleures démos en elle. 00:20:36.190 --> 00:20:38.680 Parlons donc pour une minute sur les gradients 00:20:38.680 --> 00:20:41.455 et les formes pendant que ça va. 00:20:41.455 --> 00:20:45.310 Étant donné que les gradients deviennent si puant et populaire, 00:20:45.310 --> 00:20:49.495 comment pouvez-vous faire cela? bien vous avez quelques options. 00:20:49.495 --> 00:20:52.630 Regarde, voilà mon petit émulateur. 00:20:52.630 --> 00:20:54.910 Vous ne pouvez pas voir mon émulateur parce que c'est sur l'autre écran, 00:20:54.910 --> 00:20:56.140 mais c'est si petit. 00:20:56.140 --> 00:20:59.420 D'accord, on est de retour. C'est parti. 00:20:59.850 --> 00:21:04.330 Sortez du diaporama. Tu peux le faire. 00:21:04.330 --> 00:21:07.060 Tu vois ça ? Vous pouvez le voir. 00:21:07.060 --> 00:21:10.240 Revenons au code pour que vous peut voir qu'il est en cours d'exécution. D'accord. 00:21:10.240 --> 00:21:14.035 J'ai donc créé une page à l'intérieur Zappy a appelé un guide de style. 00:21:14.035 --> 00:21:16.390 Alors j'ai attrapé toutes mes couleurs et je 00:21:16.390 --> 00:21:18.955 les jeter dans cette vue de collection. 00:21:18.955 --> 00:21:21.520 J'ai donc une vue de collection qui est 00:21:21.520 --> 00:21:25.930 quatre rangées s'étendant et puis il va à travers. 00:21:25.930 --> 00:21:31.930 Ainsi, la vue de la collection est toujours en aperçu, mais il est en 4.1 stable, 00:21:31.930 --> 00:21:33.175 donc si vous choisissez de l'utiliser, 00:21:33.175 --> 00:21:35.140 il est à votre disposition. 00:21:35.140 --> 00:21:36.430 J'aimerais savoir ce que vous pensez de 00:21:36.430 --> 00:21:37.720 nous faire des caractéristiques comme ça. 00:21:37.720 --> 00:21:39.130 Fondamentalement, les faire cuire et 00:21:39.130 --> 00:21:41.080 travailler sur eux et ajouter des fonctionnalités à eux 00:21:41.080 --> 00:21:44.875 alors qu'ils sont dans des versions stables mais les mettre derrière des drapeaux. 00:21:44.875 --> 00:21:48.610 Donc, nous sommes à la recherche de vous pour dites-nous comment les choses se passent. 00:21:48.610 --> 00:21:50.230 Donc pas maintenant, 00:21:50.230 --> 00:21:53.005 tout le monde ne se lève pas et aller au micro. 00:21:53.005 --> 00:21:55.750 Très bien, donc dans cette application, 00:21:55.750 --> 00:21:56.980 vous voyez que j'ai un gradient que nous sommes 00:21:56.980 --> 00:21:58.450 je vais parler dans une seconde. 00:21:58.450 --> 00:22:01.215 Mais alors j'ai ce réglagevisuel ici, 00:22:01.215 --> 00:22:04.770 et donc j'ai ce commutateur clair et sombre. 00:22:04.770 --> 00:22:06.150 Donc, c'est en fait, 00:22:06.150 --> 00:22:08.460 et je vais ajouter d'autres thèmes aussi. 00:22:08.460 --> 00:22:12.120 Fuchsia a été recommandé comme un style à thème. 00:22:12.120 --> 00:22:13.740 Je ne sais pas pourquoi. 00:22:13.740 --> 00:22:16.050 Mais Squeaky aime vraiment, 00:22:16.050 --> 00:22:17.610 quelqu'un est allé à des séances Squeaky 00:22:17.610 --> 00:22:19.360 cette semaine, j'ai entendu dire qu'elle est là. 00:22:19.360 --> 00:22:21.010 Elle est géniale, n'est-ce pas ? 00:22:21.010 --> 00:22:23.815 Elle adore le Fuchsia. 00:22:23.815 --> 00:22:27.355 D'accord. Donc, il ya mon noir. 00:22:27.355 --> 00:22:32.200 Voilà ma lumière. Léger, lumineux. 00:22:32.200 --> 00:22:34.045 Oui, donc je vais sombrer. 00:22:34.045 --> 00:22:36.310 Je ferme ce type. 00:22:36.310 --> 00:22:39.970 et vous voyez que mon écran retour ici est maintenant sombre ainsi. 00:22:39.970 --> 00:22:43.690 Ainsi, la façon dont que l'interrupteur se produisant, 00:22:43.690 --> 00:22:46.690 si nous allons à 00:22:46.690 --> 00:22:56.180 mes paramètres ViewModel ici. 00:22:56.400 --> 00:23:01.705 J'ai donc une commande thème de changement, il va venir. 00:23:01.705 --> 00:23:09.640 Le thème choisi est lié à l'élément sélectionné de ceci. 00:23:09.640 --> 00:23:11.395 Tu vois mon curseur ? Encore une fois. 00:23:11.395 --> 00:23:12.925 Donc la lumière et l'obscurité, 00:23:12.925 --> 00:23:14.200 c'est en fait une vue de collection, 00:23:14.200 --> 00:23:16.900 c'est un horizontal vue de collection coulissante. 00:23:16.900 --> 00:23:20.630 En fait, eh bien et je le ferai ensuite. 00:23:20.790 --> 00:23:26.305 Ouais, donc j'écoute le thème choisi comme élément sélectionné, 00:23:26.305 --> 00:23:27.805 et ensuite sur la base de cela, 00:23:27.805 --> 00:23:29.890 Je vais à nouveau mon thème sombre ou 00:23:29.890 --> 00:23:33.445 mon thème blanc et l'appliquer à mes ressources actuelles d'application. 00:23:33.445 --> 00:23:35.155 Vous voyez à quelle vitesse cela a fonctionné, 00:23:35.155 --> 00:23:36.430 et vous voyez que je n'ai pas 00:23:36.430 --> 00:23:38.590 une petite quantité de ressources là-dedans, 00:23:38.590 --> 00:23:40.075 c'est un peu de choses. 00:23:40.075 --> 00:23:42.220 Donc ça marche très bien. 00:23:42.220 --> 00:23:44.590 Maintenant, c'est une façon de que vous pouvez le faire. 00:23:44.590 --> 00:23:47.005 Vous pouvez certainement essayer et beaucoup d'autres façons de le faire. 00:23:47.005 --> 00:23:49.360 Tout ce code est sur mon GitHub, 00:23:49.360 --> 00:23:52.315 l'essayer, j'aimerais pour savoir ce que vous pensez. 00:23:52.315 --> 00:23:54.760 ouais. Alors j'ai pensé c'était super facile. 00:23:54.760 --> 00:23:56.650 C'était beaucoup plus facile que moi pensé qu'il allait être, 00:23:56.650 --> 00:23:59.305 et je me sens comme maintenant Je suis un pro [inaudible]. 00:23:59.305 --> 00:24:00.745 J'ai l'impression de l'avoir, 00:24:00.745 --> 00:24:02.320 personne ne peut m'arrêter maintenant. 00:24:02.320 --> 00:24:05.590 Fuchsia arrive. Le Fuchsia est maintenant. 00:24:05.590 --> 00:24:11.020 Oh mon garçon. D'accord 00:24:11.020 --> 00:24:12.880 parlons donc de ce gradient. 00:24:12.880 --> 00:24:16.435 Alors, comment pouvons-nous faire des gradients? 00:24:16.435 --> 00:24:18.310 Donc, le code natif bien sûr. 00:24:18.310 --> 00:24:20.140 SkiaSharp, vous avez une toile, 00:24:20.140 --> 00:24:23.560 vous pouvez dessiner vos gradients sur cela ou la vue crêpe. 00:24:23.560 --> 00:24:25.315 Toute personne familière avec la vue de crêpe? 00:24:25.315 --> 00:24:27.400 Me donne faim tous les temps que j'en parle. 00:24:27.400 --> 00:24:30.760 Donc Stephen [inaudible] des Pays-Bas, 00:24:30.760 --> 00:24:33.580 qui n'est pas ici comme nous l'avons mentionné à plusieurs reprises, 00:24:33.580 --> 00:24:36.025 pas de honte à vous Stephen pour ne pas être ici. 00:24:36.025 --> 00:24:38.440 Ayons tous une infopublicité pour Stephen en ce moment. 00:24:38.440 --> 00:24:41.260 Stephen, je sais que tu es pleurer à la maison à droite 00:24:41.260 --> 00:24:44.485 maintenant que vous n'étiez pas en mesure de se rendre au Sommet Zam Dev, 00:24:44.485 --> 00:24:49.100 mais vous savez ce que vous avez fait de mal. 00:24:51.060 --> 00:24:54.235 Je crois qu'il est en vacances en famille. ou quelque chose, de toute façon. 00:24:54.235 --> 00:24:56.485 D'accord, tu vois ? 00:24:56.485 --> 00:24:59.950 Je suis un égal chance cueilleur sur les gens. 00:24:59.950 --> 00:25:02.530 Donc, ce sont des options que vous pouvez utiliser. 00:25:02.530 --> 00:25:06.205 Pancake View est vraiment presque un cadre glorifié. 00:25:06.205 --> 00:25:07.390 Essentiellement, c'est comme un cadre sur 00:25:07.390 --> 00:25:09.205 stéroïdes si vous obtenez un bon coup d'oeil à elle. 00:25:09.205 --> 00:25:12.385 Mais très utile et pourrait être quelque chose que vous voulez utiliser. 00:25:12.385 --> 00:25:15.590 Mais comment le feriez-vous si Vous vouliez le faire vous-même? 00:25:16.100 --> 00:25:20.760 Oh, je suis désolé, nous ne parlons pas sur le thème de gradient, mais les formes. 00:25:20.760 --> 00:25:22.170 Vous avez beaucoup d'options pour les formes. 00:25:22.170 --> 00:25:24.090 Nous n'allons pas dépenser beaucoup de temps sur les formes. 00:25:24.090 --> 00:25:26.610 Vraiment, SkiaSharp pour le dessin est gentil 00:25:26.610 --> 00:25:29.285 de votre meilleur aller à multi-plateforme pour cela. 00:25:29.285 --> 00:25:31.555 Très puissant, très performant. 00:25:31.555 --> 00:25:36.160 J'ai vu quelques exemples de vous qui sont assez hallucinant. 00:25:36.160 --> 00:25:39.700 Je ne sais pas ce que ce flatteur les affaires sont tout au sujet. 00:25:39.700 --> 00:25:41.815 Vous pouvez le faire en C. 00:25:41.815 --> 00:25:43.885 Vous pouvez le faire avec SkiaSharp. C'est magnifique. 00:25:43.885 --> 00:25:46.180 L'animation est super facile. 00:25:46.180 --> 00:25:47.890 Mais vous pouvez utiliser bitmaps. 00:25:47.890 --> 00:25:50.095 C'est quelque chose qui obtient négligé beaucoup, non? 00:25:50.095 --> 00:25:51.850 Si vous avez un design et qu'il a comme 00:25:51.850 --> 00:25:53.590 cette forme vraiment intéressant e, 00:25:53.590 --> 00:25:55.540 si vous allez regarder le défi visuel, 00:25:55.540 --> 00:25:58.015 regardez ce que Ryan Davis a fait sur l'application Quantize, 00:25:58.015 --> 00:26:01.840 sur l'en-tête, il a ce petit encoche avec une belle courbe à elle. 00:26:01.840 --> 00:26:03.925 C'est vraiment juste une image en arrière-plan. 00:26:03.925 --> 00:26:07.060 Donc, parfois, quand vous regarder une chose visuelle, 00:26:07.060 --> 00:26:08.830 vous êtes comme comment suis-je va y parvenir? 00:26:08.830 --> 00:26:10.870 Cela affecte ou que 00:26:10.870 --> 00:26:14.275 mise en page ou je n'ai pas de contrôle qui fait exactement cela. 00:26:14.275 --> 00:26:16.270 Ce n'est peut-être pas aussi dur que tu le penses. 00:26:16.270 --> 00:26:18.490 Peut-être la deuxième pensée vous devriez avoir est de savoir comment peut 00:26:18.490 --> 00:26:21.100 Je le fais pour de vrai, mais comment puis-je le simuler? 00:26:21.100 --> 00:26:24.640 Comme si j'allais faire semblant et juste faire ressembler à elle est, 00:26:24.640 --> 00:26:26.665 alors comment pourrais-je faire ça, 00:26:26.665 --> 00:26:29.875 et parfois c'est aussi simple comme l'intégration d'une image. 00:26:29.875 --> 00:26:31.585 Je pense que c'est bon. 00:26:31.585 --> 00:26:33.160 Les utilisateurs ne savent pas. 00:26:33.160 --> 00:26:35.305 Comme oh, at-il vraiment dessiner cela? 00:26:35.305 --> 00:26:37.165 Si le développeur n'a pas dessiné ça, 00:26:37.165 --> 00:26:39.235 cette application est de la merde. 00:26:39.235 --> 00:26:40.990 Ce n'est pas comme ça que ça se passe. 00:26:40.990 --> 00:26:42.415 Je ne sais pas. D'accord. 00:26:42.415 --> 00:26:44.530 Images vectorielles bien sûr, SVGs, 00:26:44.530 --> 00:26:47.305 il y a différents contrôleurs vous pouvez charger vos SVG dans. 00:26:47.305 --> 00:26:49.090 Alors je pense que j'ai déjà mentionné 00:26:49.090 --> 00:26:51.115 s'appuyant sur le code SkiaSharp ou Native. 00:26:51.115 --> 00:26:52.780 Vous pouvez vous appuyer sur le code Autochtone. 00:26:52.780 --> 00:27:02.500 Donc les dégradés et les démos, cool. 00:27:02.500 --> 00:27:04.960 Eh bien, je vais vous montrer d'abord comment Je fais le gradient dans ce 00:27:04.960 --> 00:27:07.630 certains s'envolent, d'accord. 00:27:07.630 --> 00:27:10.135 Donc, c'est le rendu de la coquille. 00:27:10.135 --> 00:27:11.680 Donc, si nous allons ici, 00:27:11.680 --> 00:27:13.825 Je fais Android. 00:27:13.825 --> 00:27:16.645 Regardons donc le projet Android, 00:27:16.645 --> 00:27:19.705 obtenu mes rendurs et j'ai obtenu mon rendu coquille Zappy. 00:27:19.705 --> 00:27:28.970 D'accord. Donc, ici quand je reçois mon contenu de mise en page d'étagère rendent. 00:27:29.970 --> 00:27:33.580 Ok, on peut voir ça, cool. 00:27:33.580 --> 00:27:37.840 Alors je l'ai, je crée un gradient [inaudible] , 00:27:37.840 --> 00:27:40.960 J'attrape, remarque, j'ai attrapé 00:27:40.960 --> 00:27:44.170 mes couleurs parce que j'ai obtenu mon thème app ici. 00:27:44.170 --> 00:27:46.179 Il s'agit d'une injection de dépendance, 00:27:46.179 --> 00:27:48.890 cela vient de mes ressources. 00:27:48.890 --> 00:27:50.550 Je vous ai montré dans mes ressources, 00:27:50.550 --> 00:27:53.580 mon dossier global, que j'avais un début de gradient et la fin de la couleur. 00:27:53.580 --> 00:27:56.255 Je viens d'en parler en passant. 00:27:56.255 --> 00:27:59.920 Donc, je reçois ma dépendance pour mon service 00:27:59.920 --> 00:28:03.055 de sorte que si ici quand j'ai mis cela, 00:28:03.055 --> 00:28:05.155 Je peux le mettre à des couleurs qui ont été 00:28:05.155 --> 00:28:08.170 établi dans mon code partagé. 00:28:08.170 --> 00:28:13.405 Puis je parlais. à quelqu'un à ce sujet, 00:28:13.405 --> 00:28:16.390 nous utilisons la vue coordinateur qui est 00:28:16.390 --> 00:28:19.480 la vue qui nous permet de faire quelques animations vraiment intéressantes, 00:28:19.480 --> 00:28:22.030 si vous avez vu des animations de héros ou 00:28:22.030 --> 00:28:24.760 certains des plus avancés animations basées sur la conception de matériaux. 00:28:24.760 --> 00:28:27.400 Beaucoup d'entre eux sont basés du point de vue du coordonnateur, 00:28:27.400 --> 00:28:31.120 et Shell l'utilise pour un peu du travail. 00:28:31.120 --> 00:28:34.525 C'est pourquoi j'ai été encourager les gens à utiliser Shell 00:28:34.525 --> 00:28:36.340 parce que c'est la base pour nous d'être 00:28:36.340 --> 00:28:38.575 en mesure d'ajouter ces choses plus facilement, 00:28:38.575 --> 00:28:42.475 Je sais que les transitions peuvent être une douleur énorme à faire autrement. 00:28:42.475 --> 00:28:44.860 Donc, vous n'avez certainement pas doivent utiliser Shell. 00:28:44.860 --> 00:28:46.900 Je ne veux pas t'envoyer. le message que si vous n'avez pas 00:28:46.900 --> 00:28:49.150 utiliser Shell vous êtes en quelque sorte à l'âge des ténèbres. 00:28:49.150 --> 00:28:51.910 Tu es bon, tu aimes vos pages de navigation, 00:28:51.910 --> 00:28:53.785 vos pages d'onglets, votre pages de détail maître, 00:28:53.785 --> 00:28:55.030 tout ce qui est encore bon, 00:28:55.030 --> 00:28:57.010 ils ne vont nulle part, 00:28:57.010 --> 00:28:59.380 ce n'est pas l'histoire de jouet que ne pas être envoyé à 00:28:59.380 --> 00:29:03.610 l'orphelinat ou autre. 00:29:03.610 --> 00:29:05.935 Ce n'était pas un orphelinat, il c'est comme une fête de garde. 00:29:05.935 --> 00:29:07.300 Non, pas dans le nouveau film, 00:29:07.300 --> 00:29:10.525 c'est comme trois, le vraiment triste. 00:29:10.525 --> 00:29:12.760 Oui, les nouveaux comme censé être 00:29:12.760 --> 00:29:14.920 bon et je suis sûr que c'est encore triste, j'ai entendu les gens pleurer. 00:29:14.920 --> 00:29:16.840 Je ne pleurerai pas. Il y aura 00:29:16.840 --> 00:29:20.665 pas de larmes venant de ces yeux autant que vous le savez. 00:29:20.665 --> 00:29:27.700 D'accord, c'est des bananes. 00:29:27.700 --> 00:29:30.745 Donc j'ai la disposition du coordinateur, 00:29:30.745 --> 00:29:33.670 J'ai mis le fond à elle ici, 00:29:33.670 --> 00:29:37.090 et ici, j'ai mis cela à transparent 00:29:37.090 --> 00:29:38.560 parce qu'il ya d'autres choses posant 00:29:38.560 --> 00:29:40.285 sur le dessus de celui-ci avec la barre d'application. 00:29:40.285 --> 00:29:42.600 Donc, je veux faire sûr que mon gradient 00:29:42.600 --> 00:29:44.985 va tout le chemin de le bas vers le haut, 00:29:44.985 --> 00:29:49.680 parce que jusqu'ici au sommet de certains de cela est en fait barre d'application. 00:29:49.680 --> 00:29:51.600 Ouais, donc c'est à peu près tout, 00:29:51.600 --> 00:29:52.770 et c'est comme ça que je suis obtenir mon gradient. 00:29:52.770 --> 00:29:55.060 Donc j'utilise du code natif là pour le faire. 00:29:55.060 --> 00:29:58.000 Maintenant, regardons un autre exemple, 00:29:58.000 --> 00:30:01.195 et celui-ci est de Ciro. 00:30:01.195 --> 00:30:02.920 Ciro est en France, 00:30:02.920 --> 00:30:04.990 Paris, il a fait un flux en direct avec moi sur 00:30:04.990 --> 00:30:07.440 Twitch où il a construit un écran de connexion. 00:30:07.440 --> 00:30:11.345 J'ai donc une autre version de zap ouvrir ici, 00:30:11.345 --> 00:30:15.550 où il a créé une vue bouton de gradient 00:30:15.550 --> 00:30:18.175 ou un fond de gradient vue et un bouton de gradient. 00:30:18.175 --> 00:30:21.740 Donc, si nous regardons ce qu'il a fait ici, 00:30:22.200 --> 00:30:25.015 et je vais exécuter cette démo sous peu. 00:30:25.015 --> 00:30:26.830 Donc, à l'arrière-plan de la grille, il 00:30:26.830 --> 00:30:29.530 a ce contrôle personnalisé de la vue de gradient. 00:30:29.530 --> 00:30:31.330 Il s'empare de ce départ dans 00:30:31.330 --> 00:30:34.555 ce style de fin, tout comme je l'ai mentionné des ressources statiques, 00:30:34.555 --> 00:30:36.385 et le mettre ici. 00:30:36.385 --> 00:30:38.860 Donc, si nous regardons ce que cette vue gradient 00:30:38.860 --> 00:30:42.145 est-il est comme vous le feriez s'attendre à un rendu personnalisé. 00:30:42.145 --> 00:30:46.180 Donc, quand vous descendez à le code Android ou le code iOS, 00:30:46.180 --> 00:30:49.495 tout ce qu'il fait est attire un gradient et le renvoie. 00:30:49.495 --> 00:30:52.360 Voici donc le code Android pour la vue de gradient. 00:30:52.360 --> 00:30:56.664 Dans ce cas, c'est un rendu d'élément visuel, 00:30:56.664 --> 00:30:59.455 et il va créer un gradient linéaire, 00:30:59.455 --> 00:31:03.115 faire la peinture et puis dessinez-le sur une toile. 00:31:03.115 --> 00:31:06.610 Ensuite, vous pouvez faire le même chose dans un bouton ici. 00:31:06.610 --> 00:31:09.415 Pour que je puisse avoir un bouton c'est le bouton habitué, 00:31:09.415 --> 00:31:11.350 pas un vrai bouton, 00:31:11.350 --> 00:31:12.715 c'est un faux bouton. 00:31:12.715 --> 00:31:14.770 La seule différence entre un faux bouton et un vrai bouton 00:31:14.770 --> 00:31:17.770 c'est ce que vous l'appelez, encore des boutons. 00:31:17.770 --> 00:31:20.530 Vous pouvez tous les déclarer comme 00:31:20.530 --> 00:31:22.240 éléments interactifs puis vous obtiendrez tous les 00:31:22.240 --> 00:31:24.475 avantages d'accessibilité que vous devriez, 00:31:24.475 --> 00:31:27.505 de sorte que vous pouvez l'utiliser ici aussi. 00:31:27.505 --> 00:31:29.545 Donc, si nous faisons ce, 00:31:29.545 --> 00:31:31.900 regarder jeter une erreur comme le dernier. 00:31:31.900 --> 00:31:34.400 Je vous ose lancer une erreur, 00:31:34.500 --> 00:31:39.415 jamais parler à votre code comme ça, je te l'ose. 00:31:39.415 --> 00:31:41.620 C'est comme une personne qui est 00:31:41.620 --> 00:31:47.960 moyenne mêmes personnes juste articulé leurs écrans. 00:31:48.330 --> 00:31:51.650 Tu sais ce qu'est ce geste ? 00:31:55.590 --> 00:31:58.790 Très bien, alors viens. 00:32:01.530 --> 00:32:05.620 Donc, l'une des choses que j'ai été parler, oh il ya une erreur. 00:32:05.620 --> 00:32:06.880 C'est la même erreur, 00:32:06.880 --> 00:32:13.120 Regarde ça, incroyable. 00:32:13.120 --> 00:32:15.415 Alors, comment pouvez-vous déposer un bug pour cela? 00:32:15.415 --> 00:32:17.515 Je veux dire le bug dirait essentiellement, 00:32:17.515 --> 00:32:20.455 Je l'ai fait dans ma chambre d'hôtel, 00:32:20.455 --> 00:32:24.925 Je ferme le couvercle, "Je suis descendu, 00:32:24.925 --> 00:32:27.609 J'ai attendu environ deux heures, 00:32:27.609 --> 00:32:30.490 J'ai branché la machine 00:32:30.490 --> 00:32:36.145 et puis ça n'a pas marché," et c'est littéralement ce qui s'est passé. 00:32:36.145 --> 00:32:41.725 Je ne sais pas. Je nettoie, 00:32:41.725 --> 00:32:44.260 ce n'est pas ce que j'ai fait la dernière fois, Je viens de nettoyer et de le redémarrer. 00:32:44.260 --> 00:32:46.285 Je n'ai pas redémarré l'ID. 00:32:46.285 --> 00:32:47.380 Je n'ai pas fait la danse complète, 00:32:47.380 --> 00:32:53.320 J'ai juste aimé.désolé. 00:32:53.320 --> 00:32:55.585 J'allais faire comme une blague de danse, 00:32:55.585 --> 00:32:57.055 comme si je n'avais pas fait tout mon mouvement, 00:32:57.055 --> 00:33:02.500 J'ai fait de la danse pareffraction. 00:33:02.500 --> 00:33:06.610 Est-ce que quelqu'un se souvient rupture des an nées 80. 00:33:06.610 --> 00:33:08.620 [inaudible]. 00:33:08.620 --> 00:33:11.095 Tous, hommes, tous. 00:33:11.095 --> 00:33:13.730 C'est comme ça que tu t'es blessé au pied ? 00:33:14.520 --> 00:33:16.360 Eh bien, oui. 00:33:16.360 --> 00:33:18.145 C'est ce que vous prétendez, 00:33:18.145 --> 00:33:21.680 mais vous avez peut-être essayé pour récupérer les jours de gloire. 00:33:21.750 --> 00:33:27.475 Très bien, nous sommes toujours en mouvement nous n'ont pas encore cassé, nous sommes bons. 00:33:27.475 --> 00:33:28.990 Cela nous donne juste plus de temps pour 00:33:28.990 --> 00:33:31.330 parler de ces choses, est-ce utile jusqu'à présent? 00:33:31.330 --> 00:33:32.680 Ce sont des choses intéressantes ? 00:33:32.680 --> 00:33:34.510 Choses qui défient que vous pouvez avoir 00:33:34.510 --> 00:33:37.404 récemment ou à l'avenir, 00:33:37.404 --> 00:33:39.505 nous devrons faire face à l'avenir. 00:33:39.505 --> 00:33:44.680 En parlant de l'avenir a n'importe qui vu sombre, sombre sur Netflix? 00:33:44.680 --> 00:33:47.350 Je sais qu'il semble que je chose d'enlèvement d'enfant basée 00:33:47.350 --> 00:33:50.750 sur le comme le-c'est pas de quoi il s'agit. 00:33:50.970 --> 00:33:54.865 C'est comme un truc de science-fiction, tout est en allemand. 00:33:54.865 --> 00:33:56.575 Vous pouvez travailler sur votre allemand. 00:33:56.575 --> 00:34:02.065 Très bien, c'est parti. 00:34:02.065 --> 00:34:05.200 Allez, laisse-y. pour Visual Studio, 00:34:05.200 --> 00:34:09.710 Visual Studio gagner de l'argent. 00:34:10.710 --> 00:34:14.440 Donc, il ya un couple de choses cool 00:34:14.440 --> 00:34:17.260 qui se passe ici bien sûr, vous voyez les gradients que j'ai mentionnés, 00:34:17.260 --> 00:34:19.345 un peu de un gradient dans le bouton. 00:34:19.345 --> 00:34:23.500 Alors vous avez cette belle animation transition qui se passe ici. 00:34:23.500 --> 00:34:26.350 Donc, ce n'est pas un vrai segment à contrôler, 00:34:26.350 --> 00:34:29.080 c'est un faux segment à contrôler. 00:34:29.080 --> 00:34:32.260 La seule différence entre un vrai segment à contrôler et à contrôler 00:34:32.260 --> 00:34:36.265 un segment de figues à contrôler Est? C'est ce que tu appelles ça. 00:34:36.265 --> 00:34:40.340 Lorsque votre patron dit, a toujours segment peut vous montrer, dire oui. 00:34:41.250 --> 00:34:45.850 C'est à quoi ça ressemble, oui. 00:34:45.850 --> 00:34:48.100 Donc, certains transistors cool ont été là et vous avez remarqué 00:34:48.100 --> 00:34:55.870 la queue Octocats ondulant, c'est une Lottie. 00:34:55.870 --> 00:34:58.540 Donc, un Lottie est une bibliothèque de 00:34:58.540 --> 00:35:02.830 Airbnb qu'ils ont open source et vous pouvez utiliser, qu'est-ce que c'est, 00:35:02.830 --> 00:35:07.390 Adobe après les effets, 00:35:07.390 --> 00:35:10.014 et avec une petite extension que vous pouvez installer, 00:35:10.014 --> 00:35:12.505 et vous pouvez produire vos animations. 00:35:12.505 --> 00:35:15.490 Je suis très triste qu'ils en fait ne vous permettent pas de le faire 00:35:15.490 --> 00:35:18.640 d'Adobe Flash ou animer ou ce qu'ils appellent maintenant, 00:35:18.640 --> 00:35:22.150 parce que je serais façons de votre que après les effets, mais peu importe. 00:35:22.150 --> 00:35:27.220 ouais. Donc, Martin Van Dyke qui courait par ici, 00:35:27.220 --> 00:35:29.200 il est peut-être encore là, 00:35:29.200 --> 00:35:31.450 a fait la mise en œuvre C-Sharp 00:35:31.450 --> 00:35:32.920 et il maintient le paquet pour cela. 00:35:32.920 --> 00:35:38.605 Alors va le remercier pour l'Octocat, cool. 00:35:38.605 --> 00:35:41.410 Donc les gradients cool, 00:35:41.410 --> 00:35:43.450 et vous voyez que j'ai du matériel 00:35:43.450 --> 00:35:45.445 travailler ici et tout le reste aussi, 00:35:45.445 --> 00:35:47.950 Je vais vous donner un coup d'oeil rapide à la façon dont cette animation fonctionne. 00:35:47.950 --> 00:35:49.750 C'est aussi sur mon GitHub, 00:35:49.750 --> 00:35:51.370 mais il émerge comme PR, 00:35:51.370 --> 00:35:54.640 c'est pourquoi c'est un projet séparé en ce moment parce que je ne 00:35:54.640 --> 00:35:59.150 il l'a eu ce matin, ce qui est toujours bien. 00:35:59.280 --> 00:36:01.960 Donc, la page de connexion est 00:36:01.960 --> 00:36:04.600 juste votre simple XAML comme on pouvait s'y attendre, 00:36:04.600 --> 00:36:06.340 Je peux faire ça un peu plus grand, 00:36:06.340 --> 00:36:10.640 Je peux lui donner ceci ou faire cela, pas cela. 00:36:10.640 --> 00:36:14.620 N'importe qui a déjà accidentellement Appuyez sur ce bouton juste là? 00:36:15.120 --> 00:36:20.995 Ne touchez pas à ça. Ouais, donc vraiment rien de fantaisie qui se passe ici. 00:36:20.995 --> 00:36:22.840 Vous voyez qu'il y a sont ces animations 00:36:22.840 --> 00:36:24.625 mais ceux-ci ne sont pas faits dans XAML. 00:36:24.625 --> 00:36:28.105 Je vais vous montrer comment les faire en XAML en une minute. 00:36:28.105 --> 00:36:34.555 Donc, si nous regardons à l'arrière et l'option sélecteur appuyez sur, 00:36:34.555 --> 00:36:37.720 c'est l'événement robinet sur ce gars ici. 00:36:37.720 --> 00:36:40.240 C'est ce qui déclenche les animations. 00:36:40.240 --> 00:36:41.740 Il fait quelques traductions, 00:36:41.740 --> 00:36:45.520 afin de traduire à est juste une méthode d'animation d'aide. 00:36:45.520 --> 00:36:48.880 Il utilise toujours aPI d'animation sur le backend. 00:36:48.880 --> 00:36:52.570 Vous avez aussi fondu aussi et des choses comme ça. 00:36:52.570 --> 00:36:56.440 Ensuite, vous pouvez faire une certaine attente tâche et le groupe de l'animation. 00:36:56.440 --> 00:37:00.580 Donc, il fait à la fois la traduction et le fondu aussi en même temps. 00:37:00.580 --> 00:37:04.480 Alors bien sûr, vous pouvez gérer dans visibilité et des choses comme ça. 00:37:04.480 --> 00:37:06.715 Donc, vous pouvez faire votre animation de cette façon. 00:37:06.715 --> 00:37:08.830 Certainement, rien de mal à cela, 00:37:08.830 --> 00:37:11.005 mais je vais aussi montrer vous comment vous pouvez le faire 00:37:11.005 --> 00:37:14.830 dans XAML. D'accord, cool. 00:37:14.830 --> 00:37:20.665 Donc, c'est gradients et les formes, Parallax. 00:37:20.665 --> 00:37:24.445 Je pense que c'est mon dernier ou avant-dernière démo. 00:37:24.445 --> 00:37:28.525 En fait, j'ai une démo supplémentaire, donc nous verrons. 00:37:28.525 --> 00:37:30.550 Très bien, donc Parallax. 00:37:30.550 --> 00:37:32.485 Alors, voici ce qui est qui se passe avec Parallax. 00:37:32.485 --> 00:37:36.535 J'ai fait exploser vue de ce que Je vais te le montrer. 00:37:36.535 --> 00:37:39.745 En fait, non, il est déjà là. 00:37:39.745 --> 00:37:41.920 Allons de l'avant et le construire et l'exécuter, 00:37:41.920 --> 00:37:45.220 afin que nous ne courons pas dans le même problème que nous avions auparavant. 00:37:45.220 --> 00:37:46.630 Il s'agit de l'exemple de la page de connexion. 00:37:46.630 --> 00:37:48.800 Je n'ai pas besoin de ça, fermons-le. 00:37:49.080 --> 00:37:52.180 Si je viens ici, 00:37:52.180 --> 00:37:55.345 construire courir aller, d'accord. 00:37:55.345 --> 00:37:58.750 Mais vous n'avez pas vu de de cela. C'est pas grave. 00:37:58.750 --> 00:38:01.120 Juste sur la construction, bâtiment et en cours d'exécution. 00:38:01.120 --> 00:38:04.900 Donc ce que vous avez, c'est que vous ont différentes couches de 00:38:04.900 --> 00:38:08.830 choses et la grille est un très grand façon d'avoir différentes couches. 00:38:08.830 --> 00:38:13.375 Ensuite, comme les choses doivent lignes d'enjambement ou colonnes d'envergure, 00:38:13.375 --> 00:38:14.710 vous utilisez la portée. 00:38:14.710 --> 00:38:18.280 Donc, une travée de travée de ligne, ce genre de chose. 00:38:18.280 --> 00:38:22.315 J'ai mis le mauvais désolé. 00:38:22.315 --> 00:38:27.805 Alors pourquoi avez-vous exécuté ce code ? 00:38:27.805 --> 00:38:31.835 Ce n'est pas le bon code, si bizarre. 00:38:31.835 --> 00:38:33.900 Je veux dire, c'est le même projet, 00:38:33.900 --> 00:38:35.340 mais la course dans deux répertoires différents. 00:38:35.340 --> 00:38:37.860 Mais je suppose qu'il ne générer le même binaire. 00:38:37.860 --> 00:38:41.340 Donc c'est vraiment bizarre. D'accord. 00:38:41.340 --> 00:38:43.470 Alors laissez-moi nettoyer ça très vite. 00:38:43.470 --> 00:38:49.120 Construire propre, construire propre, 00:38:49.120 --> 00:38:51.040 nettoyer tout, tout nettoyé. 00:38:51.040 --> 00:38:54.130 Maintenant, comme mes enfants, ne vous contentez pas pousser les choses dans le placard, 00:38:54.130 --> 00:38:59.110 propre à tous. cool. D'accord. 00:38:59.110 --> 00:39:01.750 Donc ce qui va se passer, c'est, 00:39:01.750 --> 00:39:07.150 nous allons déménager la liste des contenus en place, 00:39:07.150 --> 00:39:09.190 mais nous allons déplacer l'en-tête, 00:39:09.190 --> 00:39:12.475 l'image de fond à un taux différent de 00:39:12.475 --> 00:39:14.530 le contenu que l'utilisateur est 00:39:14.530 --> 00:39:17.575 interagir avec cela crée l'effet Parallax. 00:39:17.575 --> 00:39:19.060 Donc, pour ce faire, 00:39:19.060 --> 00:39:20.650 nous devons être en mesure d'écouter 00:39:20.650 --> 00:39:25.300 les données de défilement hors de la chose que j'interagit avec. 00:39:25.300 --> 00:39:29.710 Donc, traditionnellement, c'est ce qui a a causé des problèmes pour les développeurs. 00:39:29.710 --> 00:39:32.800 Dans Xamarin Forms, est que pas toutes les choses 00:39:32.800 --> 00:39:36.100 qui défilent dans xamarin Forms vous dire qu'ils font défiler. 00:39:36.100 --> 00:39:38.320 Maintenant ScrollView a 00:39:38.320 --> 00:39:39.910 une méthode onscroll ou 00:39:39.910 --> 00:39:42.880 un événement qui enverra comme l'utilisateur fait défiler, 00:39:42.880 --> 00:39:45.085 afin que vous puissiez gérer cela et le code derrière. 00:39:45.085 --> 00:39:47.530 Mais je ne veux pas faire cela et le code derrière, 00:39:47.530 --> 00:39:50.590 parce que XAML recharge à chaud recharge XAML, 00:39:50.590 --> 00:39:52.165 ce n'est pas recharger le code derrière. 00:39:52.165 --> 00:39:54.925 Je veux rester à XAML autant que possible. 00:39:54.925 --> 00:39:58.420 Pour que j'obtienne le plein avantage du rechargement. 00:39:58.420 --> 00:40:03.790 Alors, que se passe-t-il ici, va le faire. 00:40:03.790 --> 00:40:06.580 Maintenant, ce petit bar 00:40:06.580 --> 00:40:09.655 il y a des représentants de la barre de navigation. 00:40:09.655 --> 00:40:13.060 Ensuite, nous allons aussi faire une barre de navigation faux, 00:40:13.060 --> 00:40:15.430 et une fois que vous voyez l'animation vous saurez pourquoi. 00:40:15.430 --> 00:40:18.745 Voici donc les ingrédients pour y arriver. 00:40:18.745 --> 00:40:21.280 J'ai besoin d'avoir un peu position de défilement ou défilement 00:40:21.280 --> 00:40:25.210 pourcentage dont je peux déclencher mes autres animations. 00:40:25.210 --> 00:40:27.265 J'ai besoin d'avoir des liaisons, 00:40:27.265 --> 00:40:31.510 afin que je puisse tout faire et réagir à lui de manière appropriée dans XAML. 00:40:31.510 --> 00:40:35.319 Ensuite, j'utilise libéralement convertisseurs de valeur, 00:40:35.319 --> 00:40:38.965 afin que je puisse appliquer les différents effets que je veux. 00:40:38.965 --> 00:40:41.530 Vraiment le calcul est assez facile sur ce genre de choses. 00:40:41.530 --> 00:40:43.180 Pour obtenir quelque chose à faire quelque chose 00:40:43.180 --> 00:40:45.280 à un rythme différent que quelque chose d'autre, 00:40:45.280 --> 00:40:47.560 vous prenez le pourcentage des temps de défilement 00:40:47.560 --> 00:40:50.710 la distance maximale de le parchemin, facteur de temps. 00:40:50.710 --> 00:40:53.485 Nous le savions tous. C'est juste 00:40:53.485 --> 00:40:55.870 multiplier certaines choses ensemble et voir ce qui se passe. 00:40:55.870 --> 00:40:57.715 C'est vraiment ce qu'il tout se résume à. 00:40:57.715 --> 00:40:59.290 Vos patrons aiment, "Comment avez-vous utilisé 00:40:59.290 --> 00:41:02.215 un véritable algorithme Parallax pour cela, 00:41:02.215 --> 00:41:06.175 ou un algorithme faux? Ca dépend de ce que tu appelles ça. 00:41:06.175 --> 00:41:09.250 Ainsi, vous pouvez déconner avec ce que vous voulez, 00:41:09.250 --> 00:41:11.830 mais vraiment c'est comme simple comme il obtient. 00:41:11.830 --> 00:41:15.279 Parlons une minute. sur les transitions, 00:41:15.279 --> 00:41:17.470 parce que je veux faire ces démos tout à fait. 00:41:17.470 --> 00:41:20.800 Donc je ne parle pas spécifiquement sur les transitions 00:41:20.800 --> 00:41:25.345 d'une page à l'autre, 00:41:25.345 --> 00:41:27.805 mais je parle de d'un État à l'autre. 00:41:27.805 --> 00:41:32.200 Il y a donc une belle bibliothèque à nouveau de Stephen à S à Stephen, 00:41:32.200 --> 00:41:35.185 Je ne sais pas ce que tu as fait. que vous ne pouviez pas être ici, 00:41:35.185 --> 00:41:38.845 mais mec, il est ici dans l'esprit. 00:41:38.845 --> 00:41:42.519 Mais vous voyez cela, quand charges de contenu de page, 00:41:42.519 --> 00:41:44.080 avoir un indicateur de chargement. 00:41:44.080 --> 00:41:45.745 Dites à l'utilisateur que vous faites quelque chose. 00:41:45.745 --> 00:41:48.204 Encore mieux que juste avoir un spinner, 00:41:48.204 --> 00:41:50.890 pourquoi ne pas leur donner cette expérience de voir 00:41:50.890 --> 00:41:54.955 le contenu dans un état faux puis remplacez-le. 00:41:54.955 --> 00:41:57.430 C'est quelque chose que vous voyez beaucoup d'applications faisant ces jours-ci. 00:41:57.430 --> 00:41:59.080 On m'a dit que Facebook le fait. 00:41:59.080 --> 00:42:02.560 Je n'utilise pas vraiment Facebook très beaucoup, mais je l'ai vu se produire. 00:42:02.560 --> 00:42:05.080 Donc ça dit aux gens qu'il se passe quelque chose, 00:42:05.080 --> 00:42:07.105 communique ce qui se passe. 00:42:07.105 --> 00:42:09.115 Les animations communiquent les choses. 00:42:09.115 --> 00:42:11.230 Lorsque vous faites une animation willy-nilly ou un 00:42:11.230 --> 00:42:14.515 transition willy-nilly juste parce que ça peut avoir l'air cool, 00:42:14.515 --> 00:42:16.780 vous envoyez peut-être un mauvais message à 00:42:16.780 --> 00:42:18.670 quelqu'un et vous pouvez les frustrer. 00:42:18.670 --> 00:42:20.260 Parce que cela peut prendre trop de temps et 00:42:20.260 --> 00:42:22.940 ils veulent juste obtenir du point A au point B. 00:42:23.340 --> 00:42:25.405 Alors, quand devriez-vous l'utiliser? 00:42:25.405 --> 00:42:30.025 Je pense que lorsque le changement d'état est un grand moment de mise à jour des données. 00:42:30.025 --> 00:42:31.450 Faites savoir aux gens quelque chose se passe, 00:42:31.450 --> 00:42:32.680 mais ne leur donnez pas un écran blanc, 00:42:32.680 --> 00:42:34.510 ne leur donnez jamais un écran blanc. 00:42:34.510 --> 00:42:36.340 Si vous allez avoir une vue vide, 00:42:36.340 --> 00:42:39.130 quelle collection s'avisez-vous vue vide comme un modèle? 00:42:39.130 --> 00:42:42.130 Donc c'est génial, ListView n'avait pas cela. 00:42:42.130 --> 00:42:44.590 C'est un endroit idéal pour mettre 00:42:44.590 --> 00:42:47.635 une indication à l'utilisateur de ce qui se passe, 00:42:47.635 --> 00:42:49.630 ou des instructions sur ce que 00:42:49.630 --> 00:42:52.375 ils doivent faire pour peupler ce contenu. 00:42:52.375 --> 00:42:56.380 Les processus de fonctionnement à court terme sont vraiment bon à utiliser pour les transitions. 00:42:56.380 --> 00:42:57.730 Si vous avez un processus de longue durée, 00:42:57.730 --> 00:43:01.210 vous voudrez peut-être penser de près sur la façon dont vous traitez cela, 00:43:01.210 --> 00:43:04.495 puis la validation et validation de formulaire. 00:43:04.495 --> 00:43:08.875 C'est le moment idéal pour m'entraîner vos compétences de transition d'animation. 00:43:08.875 --> 00:43:11.140 Donc, un couple de faire et de ne pas faire. 00:43:11.140 --> 00:43:14.425 Certains d'entre eux disent la même chose, 00:43:14.425 --> 00:43:17.830 mais j'ai pensé que peut-être ce serait être un bon moyen de l'exprimer. 00:43:17.830 --> 00:43:19.645 Ne sois pas gratuit. 00:43:19.645 --> 00:43:21.475 Ne faites pas votre l'animation un obstacle. 00:43:21.475 --> 00:43:22.960 Si je dois attendre une animation pour 00:43:22.960 --> 00:43:24.685 complète pour arriver là où je vais, 00:43:24.685 --> 00:43:27.505 ce n'est probablement pas le meilleur endroit pour elle. 00:43:27.505 --> 00:43:30.970 Si vous essayez de faire la transition plus d'une chose à la fois, 00:43:30.970 --> 00:43:33.745 vous courez le risque de écrasant l'appareil, 00:43:33.745 --> 00:43:35.770 et puis ils ont juste devenir super agité. 00:43:35.770 --> 00:43:37.570 Si vous avez déjà utilisé le menu Flyout, 00:43:37.570 --> 00:43:39.190 et vous avez remarqué et peut-être sur Android 00:43:39.190 --> 00:43:40.900 en particulier que l'ouverture et 00:43:40.900 --> 00:43:42.340 fermeture du menu flyout pendant que vous êtes 00:43:42.340 --> 00:43:44.440 changer de contenu le rend hacher, 00:43:44.440 --> 00:43:46.089 et ne se passe pas bien, 00:43:46.089 --> 00:43:48.220 c'est parce qu'il fait trop de choses à la fois. 00:43:48.220 --> 00:43:49.630 Donc, ce que vous pouvez faire, c'est, 00:43:49.630 --> 00:43:51.835 vous pouvez définir un délai sur une de ces choses. 00:43:51.835 --> 00:43:54.835 Peut-être que laisser le menu se fermer en premier, 00:43:54.835 --> 00:43:56.785 puis charger le contenu de la page, 00:43:56.785 --> 00:43:59.980 ou vice versa, alors c'est un moyen de contourner cela. 00:43:59.980 --> 00:44:03.310 Mais attention à essayer d'en faire trop à la fois. 00:44:03.310 --> 00:44:07.210 Faites-le réversible le déclencher en réponse à une action de l'utilisateur. 00:44:07.210 --> 00:44:08.950 Ces choses le rendent délicieux. 00:44:08.950 --> 00:44:11.110 Lorsque l'utilisateur a l'impression d'être 00:44:11.110 --> 00:44:14.455 une vraie chose dans leurs mains qui répond à leur toucher, 00:44:14.455 --> 00:44:17.560 c'est très délicieux, ou répondre à leur voix, 00:44:17.560 --> 00:44:20.260 ou de répondre à leur emplacement. 00:44:20.260 --> 00:44:23.440 Il sait, il sait où ils sont et ce qu'ils font. 00:44:23.440 --> 00:44:26.095 C'est vraiment délicieux pour les gens. D'accord. 00:44:26.095 --> 00:44:29.920 Regardons la démo. 00:44:29.920 --> 00:44:32.710 Cool, nous sommes de retour dans la bonne application. 00:44:32.710 --> 00:44:35.230 Donc ce que vous n'avez pas vu la dernière fois, c'était quand je 00:44:35.230 --> 00:44:37.990 construit et il a couru, il a été encore cet écran de connexion, 00:44:37.990 --> 00:44:39.820 ce qui était super bizarre, parce que ce n'était pas 00:44:39.820 --> 00:44:42.190 même le code que je a été la construction de. 00:44:42.190 --> 00:44:45.190 J'ai donc une page ici dans 00:44:45.190 --> 00:44:50.360 mes scénarios appelés produit détails, s'il vous plaît ne pas planter. 00:44:50.460 --> 00:44:54.430 Donc, vous voyez que j'ai mon animation de chargement là-bas, 00:44:54.430 --> 00:44:55.990 et puis j'espère que si l'Internet est 00:44:55.990 --> 00:44:57.970 se comporter, je vais obtenir une image. 00:44:57.970 --> 00:45:00.770 Oh, allez, tu peux le faire. 00:45:03.230 --> 00:45:08.290 Prenez, il essaie de charge à partir d'Internet. 00:45:08.290 --> 00:45:10.705 Avons-nous Internet? 00:45:10.705 --> 00:45:13.780 Allez, tu peux le faire. 00:45:13.780 --> 00:45:20.120 Regarde beaucoup mieux avec- Salut maman. 00:45:24.030 --> 00:45:28.870 C'était génial. Je me sentais 00:45:28.870 --> 00:45:33.265 élevé que cette musique a été qui se passe, n'est-ce pas? 00:45:33.265 --> 00:45:36.130 Je ne sais pas pourquoi. ma guitare ne se charge pas. 00:45:36.130 --> 00:45:37.810 Regardons le XAML équipé. 00:45:37.810 --> 00:45:39.790 Nous avons rechargement à chaud aller sur et nous pouvons prendre un moment pour regarder 00:45:39.790 --> 00:45:43.090 xAML. D'accord. 00:45:43.090 --> 00:45:46.105 J'ai donc beaucoup de XAML ici vous tous, parce que comme je l'ai dit, 00:45:46.105 --> 00:45:48.640 J'essayais de rester dans XAML autant que 00:45:48.640 --> 00:45:52.465 possible de bénéficier de la chaleur recharger et ne pas aller ailleurs. 00:45:52.465 --> 00:45:56.200 Donc, la première chose que vous aurez probablement remarquer que la merde sainte. 00:45:56.200 --> 00:45:58.235 Il y a beaucoup d'ins XML. 00:45:58.235 --> 00:46:01.185 Ce ne sont que des espaces de noms. 00:46:01.185 --> 00:46:03.000 J'ai beaucoup de dossiers partout. 00:46:03.000 --> 00:46:06.060 Comme je l'ai dit, j'utilise cette chose de chargement facile. 00:46:06.060 --> 00:46:09.030 C'est ma page pour laquelle j'ai besoin de 00:46:09.030 --> 00:46:10.470 lier à quelque chose pour une raison quelconque 00:46:10.470 --> 00:46:11.640 Je ne me souviens pas pourquoi je l'ai, 00:46:11.640 --> 00:46:13.730 mais ça doit être très important. 00:46:13.730 --> 00:46:15.700 Dans ce cas particulier, 00:46:15.700 --> 00:46:18.280 Je cache des trucs de coquillages parce que je 00:46:18.280 --> 00:46:21.565 juste ne veulent pas ici pour les buts de cette démo, 00:46:21.565 --> 00:46:24.220 et puis bien sûr, je suis forçant 00:46:24.220 --> 00:46:26.935 un couple de styles ici pour les buts de la démo aussi. 00:46:26.935 --> 00:46:29.965 Je fixe mon contexte contraignant ici dans le XAML. 00:46:29.965 --> 00:46:31.765 Je ne sais pas si c'est une pratique courante pour vous. 00:46:31.765 --> 00:46:34.330 Je vais bien ça marche assez bien avec Shell, 00:46:34.330 --> 00:46:38.680 et Shell est conçu avec ce modèle à l'esprit que vous mettez, 00:46:38.680 --> 00:46:40.390 Je trouve qu'il ne faut pas parler sur Shell trop. 00:46:40.390 --> 00:46:42.295 Shane a une session plus tard aujourd'hui sur Shell. 00:46:42.295 --> 00:46:44.150 Va voir le discours de Shane sur la carapace. 00:46:44.150 --> 00:46:46.710 Il va être grand chaque spline Je vais dans Le stock de Shane à droite. 00:46:46.710 --> 00:46:49.360 Je pense que c'est juste ici, il devrait être ici. 00:46:50.210 --> 00:46:53.250 Donc, bien sûr, dans mes ressources, 00:46:53.250 --> 00:46:55.920 Je n'ai fondamentalement rien pour certaines animations. 00:46:55.920 --> 00:46:57.200 J'ai déclaré. 00:46:57.200 --> 00:47:01.825 J'utilise l'animation Zam de Javier Suarez Ruiz. 00:47:01.825 --> 00:47:05.230 Il est dans l'équipe via smack et il est en Espagne. 00:47:05.230 --> 00:47:07.720 Donc, il fait un peu vraiment de beaux exemples en ligne. 00:47:07.720 --> 00:47:10.090 Si jamais vous allez regarder lui jusqu'à je pense qu'il a 00:47:10.090 --> 00:47:13.015 Xamarin génial ou certains GitHub comme ça. 00:47:13.015 --> 00:47:15.070 Je sais qu'on en a deux. de ceux de nos jours. 00:47:15.070 --> 00:47:17.350 Alors vérifiez ça quelques très bons exemples. 00:47:17.350 --> 00:47:20.440 J'ai donc un couple de animations pré-construites ici. 00:47:20.440 --> 00:47:22.585 Celui-ci sont CarouselFadeOut. 00:47:22.585 --> 00:47:25.960 C'est un NavBarFadeOut, CarouselFadeIn, 00:47:25.960 --> 00:47:29.230 FakeNavBar, je suppose que je ne devrais pas appelez-le un FakeNavBar. 00:47:29.230 --> 00:47:34.370 Je devrais être comme Dave'sNavBar et Comme si ce n'était pas faux, c'est réel. 00:47:34.860 --> 00:47:38.065 Alors bien sûr, j'ai ma grille, 00:47:38.065 --> 00:47:40.750 et puis l'image en haut est 00:47:40.750 --> 00:47:44.050 ce gars-là, ce CarouselView. 00:47:44.050 --> 00:47:47.425 Où sont mes images ? 00:47:47.425 --> 00:47:51.430 Ils sont juste là. Qu'est-ce que mal avec votre image? 00:47:51.430 --> 00:47:54.860 Regardez cette URL géniale. 00:47:55.020 --> 00:47:57.640 Je sais que je regarde, 00:47:57.640 --> 00:47:59.995 Je suis amoureux des guitares en ce moment. 00:47:59.995 --> 00:48:02.185 Je peux contrôler mon clavier. 00:48:02.185 --> 00:48:04.045 J'ai vu cette photo cette guitare à moi, 00:48:04.045 --> 00:48:06.430 c'est ce que je vais à utiliser dans ma démo. 00:48:06.430 --> 00:48:08.950 Assurons-nous juste l'image existe même. 00:48:08.950 --> 00:48:11.780 Il existe, quel est votre problème? 00:48:12.000 --> 00:48:15.950 Voyons si je peux le cogner. 00:48:19.470 --> 00:48:30.025 ouais. Homme, octets Android encore une fois nous allons le faire. 00:48:30.025 --> 00:48:38.605 Je n'ai pas peur. Mettons à jour Visual Studio en ce moment. D'accord. 00:48:38.605 --> 00:48:40.990 Non, je ne vais pas faire ça. 00:48:40.990 --> 00:48:42.640 J'ai un petit pépin où il 00:48:42.640 --> 00:48:44.290 n'aime pas commencer l'émulateur de 00:48:44.290 --> 00:48:48.160 Visual Studio en ce moment. Non, je ne veux pas savoir. 00:48:48.160 --> 00:48:51.400 J'ai aussi un pépin vraiment bizarre 00:48:51.400 --> 00:48:53.770 où Hyper-V est en fait plus lent que HAXM. 00:48:53.770 --> 00:48:55.720 Quelqu'un a-t-il ce qui se passe ? 00:48:55.720 --> 00:48:58.370 Est-ce votre expérience? 00:48:59.160 --> 00:49:01.960 cool. D'accord. 00:49:01.960 --> 00:49:05.065 Redémarrage de l'émulateur. 00:49:05.065 --> 00:49:06.940 C'est pourquoi j'aime faire du streaming en direct. 00:49:06.940 --> 00:49:10.090 C'est beaucoup plus faible clé et vous êtes comme le travail à travers ce genre de choses. 00:49:10.090 --> 00:49:12.130 Tout va bien. Je ne 00:49:12.130 --> 00:49:14.780 doivent être ici étant tout joli pour vous. 00:49:15.690 --> 00:49:19.760 D'accord. Ca a commencé. C'était super rapide. 00:49:19.800 --> 00:49:23.590 Est-il réellement vivant ou est il congelé cool est en direct. 00:49:23.590 --> 00:49:25.465 Très bien, redéployez-vous. 00:49:25.465 --> 00:49:27.160 Alors maintenant vous dites que je vais obtenir 00:49:27.160 --> 00:49:30.835 mon image qui dit que je suis va avoir une image. 00:49:30.835 --> 00:49:35.365 Personnes de couples hésitant disant Oui une personne très compétente. 00:49:35.365 --> 00:49:40.765 La plupart d'entre vous sont comme je pense peut-être, c'était rapide aussi. 00:49:40.765 --> 00:49:44.240 Je n'étais pas, je suis d'habitude ça va beaucoup plus lentement. 00:49:52.170 --> 00:49:55.390 Aussi pourquoi j'aime faire live streaming dans 00:49:55.390 --> 00:49:59.470 codage en direct parce que Vous avez tous à m'aider. 00:49:59.470 --> 00:50:01.870 D'accord. cool. ainsi voici ce qui se passe. 00:50:01.870 --> 00:50:03.460 Je vais faire défiler un peu plus lentement. 00:50:03.460 --> 00:50:07.720 Vous voyez la parallaxe va là-bas avec le, oui. 00:50:07.720 --> 00:50:11.080 Alors vous voyez que j'ai un NavBar et un NavBar. 00:50:11.080 --> 00:50:14.470 Comme je monte ici à la haut de l'image s'estompe 00:50:14.470 --> 00:50:18.580 boum et puis mon NavBar s'estompe. 00:50:18.580 --> 00:50:24.340 Alors, voici la façon dure pour ce faire la transition NavBar. 00:50:24.340 --> 00:50:26.515 La façon la plus difficile est de dire, 00:50:26.515 --> 00:50:28.480 "Je vais faire tout ce travail. 00:50:28.480 --> 00:50:30.190 Je vais seulement à avoir un bouton arrière. 00:50:30.190 --> 00:50:31.480 Je vais avoir un bouton de zoom. 00:50:31.480 --> 00:50:33.175 Je vais avoir un bouton de panier d'achat. 00:50:33.175 --> 00:50:34.300 Je vais avoir un fond, 00:50:34.300 --> 00:50:36.070 et je vais faire toutes ces traductions 00:50:36.070 --> 00:50:37.840 moi-même. C'est à la dure. 00:50:37.840 --> 00:50:39.715 La façon la plus simple est de dire, 00:50:39.715 --> 00:50:42.580 "Je vais avoir le premier état et puis je suis juste 00:50:42.580 --> 00:50:46.045 va créer un autre NavBar et fané et sur le dessus de celui-ci, 00:50:46.045 --> 00:50:48.565 et ils vont tous de faire la même chose. 00:50:48.565 --> 00:50:51.490 Crois-moi beaucoup plus facilement. 00:50:51.490 --> 00:50:53.320 Donc, c'est en fait ce qui se passe là-bas, 00:50:53.320 --> 00:50:55.135 et en gros, comme je fais défiler, 00:50:55.135 --> 00:50:58.135 J'arrive à un certain point et il déclenche cette animation. 00:50:58.135 --> 00:51:00.700 Donc, j'utilise l'événement déclencheurs et j'utilise 00:51:00.700 --> 00:51:03.760 déclencheurs de données et également à l'aide de fixations. 00:51:03.760 --> 00:51:07.255 Donc, pour le parchemin 00:51:07.255 --> 00:51:09.655 puisque c'est ce que je suis censé parler, 00:51:09.655 --> 00:51:13.045 J'ai tout à l'intérieur d'un ScrollerView. 00:51:13.045 --> 00:51:16.165 Vous pouvez voir que le ScrollerView est une vue personnalisée. 00:51:16.165 --> 00:51:18.940 C'est juste une vue de défilement sur laquelle je 00:51:18.940 --> 00:51:21.790 ont exposé la propriété du défilement, 00:51:21.790 --> 00:51:28.580 parce que ici sur le carrousel qui est la guitare, 00:51:28.830 --> 00:51:35.725 vous voyez que je n'ai pas les données déclencher la traduction. 00:51:35.725 --> 00:51:37.375 J'ai ce code ici. 00:51:37.375 --> 00:51:40.810 Je traduis la position Y du carrousel. 00:51:40.810 --> 00:51:42.850 Alors que je fais défiler, 00:51:42.850 --> 00:51:44.350 mon carrousel se déplace. 00:51:44.350 --> 00:51:46.045 Ma guitare bouge. 00:51:46.045 --> 00:51:49.420 Je suis donc contraignant à un pourcentage de défilement qui est 00:51:49.420 --> 00:51:53.080 juste une propri été que j'ai exposée hors de la ScrollerView. 00:51:53.080 --> 00:51:55.555 Là encore, j'ai un convertisseur ici, 00:51:55.555 --> 00:51:57.010 et j'utilise ça. 00:51:57.010 --> 00:51:59.950 C'est un joli petit truc que Stephen m'a montré. 00:51:59.950 --> 00:52:02.650 Ce n'est peut-être pas un truc. Je suis simplement en utilisant les paramètres. 00:52:02.650 --> 00:52:04.300 J'ai la capa cité parce que 00:52:04.300 --> 00:52:07.030 parfois vous voulez passer plus d'un paramètre. 00:52:07.030 --> 00:52:12.820 Donc je ne fais que passer une ficelle avec un délimiteur point-virgule, 00:52:12.820 --> 00:52:15.610 et je peux passer autant que je veux. 00:52:15.610 --> 00:52:20.095 Donc, je passe un facteur de ce que je voulais faire, 00:52:20.095 --> 00:52:23.215 une valeur minimale, une valeur maximale. 00:52:23.215 --> 00:52:25.420 Que ce soit vrai ou faux ou non. 00:52:25.420 --> 00:52:27.580 Je ne me souviens pas de quoi que la propri été était pour, 00:52:27.580 --> 00:52:30.730 et puis je ne me souviens même pas ce que celui-ci était pour. 00:52:30.730 --> 00:52:34.915 Donc, mais le truc, c'est que parce que c'est tout là maintenant, 00:52:34.915 --> 00:52:37.855 Je n'ai pas besoin d'y retourner et en avant le CMD changer quoi que ce soit. 00:52:37.855 --> 00:52:39.775 Je n'ai pas besoin de retourner à code derrière un châtiment. 00:52:39.775 --> 00:52:43.030 Je peux juste modifier ces valeurs et recharger et recharger et recharger. 00:52:43.030 --> 00:52:45.790 Donc, je peux prendre ce et je peux dire, "D'accord. 00:52:45.790 --> 00:52:51.040 Nous allons faire juste un et sauf que, 00:52:51.040 --> 00:52:55.375 recharger la page, et puis maintenant il va dans la mauvaise direction. 00:52:55.375 --> 00:52:57.160 Donc, c'est comme oh Dave vous êtes 00:52:57.160 --> 00:52:59.230 un crétin que vous allez avoir pour reconstruire tout ça. 00:52:59.230 --> 00:53:01.960 Lol Nous ne rebâtirons pas. 00:53:01.960 --> 00:53:03.970 C'est votre but, et tout le but est 00:53:03.970 --> 00:53:06.460 un développeur est maintenant d'arrêter la reconstruction. 00:53:06.460 --> 00:53:07.990 Alors, que puis-je éventuellement 00:53:07.990 --> 00:53:10.390 faire pour faire cette chose faire quelque chose de différent? 00:53:10.390 --> 00:53:14.995 Alors maintenant recharger recharger. 00:53:14.995 --> 00:53:16.525 Parfois, vous n'avez pas même savoir pour recharger. 00:53:16.525 --> 00:53:19.675 Regardez ça maintenant c'est souris comme je le chasse loin, 00:53:19.675 --> 00:53:21.895 et ce n'est pas l'effet vous voulez soit, c'est ça. 00:53:21.895 --> 00:53:24.790 Donc, je continue à peaufiner ceci et j'ai trouvé que 00:53:24.790 --> 00:53:28.465 le facteur négatif 10 semble pour bien s'en sortir, 00:53:28.465 --> 00:53:30.880 et maintenant j'ai ma belle transition. 00:53:30.880 --> 00:53:35.275 Maintenant, une autre chose vous remarquerez, c'est que, 00:53:35.275 --> 00:53:39.370 Je ne sais pas si vous pouvez voir ça mais vous voyez comment il est allé au blanc. 00:53:39.370 --> 00:53:43.540 Mais mon expérience est en fait comme une couleur grise. 00:53:43.540 --> 00:53:45.790 En fait, j'ai une autre boîte pour 00:53:45.790 --> 00:53:47.665 vous assis derrière le CarouselView. 00:53:47.665 --> 00:53:49.510 Pour que je puisse effacer le CarouselView, 00:53:49.510 --> 00:53:52.000 mais gardez-le sur un fond blanc. 00:53:52.000 --> 00:53:54.385 Donc, il fait de belles choses là-bas. 00:53:54.385 --> 00:53:56.410 Donc, pas mal de choses qui se passent ici. 00:53:56.410 --> 00:53:59.560 Maintenant, je n'ai pas vraiment vous montrer comment la facilité 00:53:59.560 --> 00:54:02.755 chargement pour les travaux de l'écran. 00:54:02.755 --> 00:54:08.485 Donc, pour revenir en arrière produit réel rapide détails que la partie juste là. 00:54:08.485 --> 00:54:11.065 Je vais vous montrer comment cela fonctionne très vite. 00:54:11.065 --> 00:54:13.555 Ouais mec, je ne démissionne pas. 00:54:13.555 --> 00:54:15.205 On y va. 00:54:15.205 --> 00:54:17.245 On y va. Vraiment 00:54:17.245 --> 00:54:18.790 Je veux dire, je suis Kramer, homme. 00:54:18.790 --> 00:54:21.100 On va au bout du compte. 00:54:21.100 --> 00:54:23.845 Non, je plaisante. Je suis enveloppant. Je l'emballe. 00:54:23.845 --> 00:54:26.650 C'est la dernière démo de la démo bonus. 00:54:26.650 --> 00:54:29.560 Tout va bien. Il suffit de donner à chaque d'autre un câlin et être bien. 00:54:29.560 --> 00:54:36.235 Donc c'est à Brandon, 00:54:36.235 --> 00:54:40.265 essayez-vous de me huer hors de la scène viennent sur les hommes, 00:54:40.265 --> 00:54:42.310 maintenant juste plaisanter, j'ai presque fini. 00:54:42.310 --> 00:54:46.270 Donc, vraiment tout ce que vous faites est que vous faites cela. 00:54:46.270 --> 00:54:48.010 Vous fournissez un modèle de chargement. 00:54:48.010 --> 00:54:50.350 Maintenant, je ne sais pas les implications sur le rendement. 00:54:50.350 --> 00:54:52.060 Ainsi, votre kilométrage peut varier, 00:54:52.060 --> 00:54:53.605 mais vous à peu près juste faux 00:54:53.605 --> 00:54:57.780 sur le contenu que vous êtes va s'afficher. 00:54:57.780 --> 00:54:59.805 Ensuite, vous devez lier 00:54:59.805 --> 00:55:02.520 cette propriété jointe charge à quelque chose. 00:55:02.520 --> 00:55:04.250 Donc je n'ai pas été occupé, 00:55:04.250 --> 00:55:07.480 et vous avez probablement tous en son occupé dans vos modèles de vue. 00:55:07.480 --> 00:55:08.980 Donc, c'est à peu près tout. 00:55:08.980 --> 00:55:10.885 Ce code est tout sur mon GitHub. 00:55:10.885 --> 00:55:12.250 Il y a encore une chose. 00:55:12.250 --> 00:55:15.430 Je vais vous signaler, c'est en mes diapositives parce que je pense 00:55:15.430 --> 00:55:18.985 que c'est un très grand ressources à vérifier. 00:55:18.985 --> 00:55:23.150 Faites ceci, affichez cette action. 00:55:24.240 --> 00:55:28.510 Donc Kym Phillpotts qui travaux sur la SP apprendre, 00:55:28.510 --> 00:55:30.910 anciennement l'Université Xamarin a 00:55:30.910 --> 00:55:33.280 été secousses streaming ses exemples. 00:55:33.280 --> 00:55:34.705 C'est celui qu'il a fait. 00:55:34.705 --> 00:55:37.075 Je pense que c'est fou. 00:55:37.075 --> 00:55:39.090 Je peux, vous faites ce genre de choses, 00:55:39.090 --> 00:55:41.345 votre patron va pour vous donner une augmentation. 00:55:41.345 --> 00:55:44.155 Sérieusement, regarde ça. 00:55:44.155 --> 00:55:46.270 Alors regarde ses affaires. 00:55:46.270 --> 00:55:51.265 Cette démo est en place sur son GitHub comme ainsi que plusieurs autres. 00:55:51.265 --> 00:55:55.180 L'animation peut vraiment être une belle touche sur le dessus de tout. 00:55:55.180 --> 00:55:57.340 Mais il y a beaucoup de d'autres choses de base 00:55:57.340 --> 00:55:58.795 vous pouvez prendre soin de. Donc de toute façon. 00:55:58.795 --> 00:56:01.750 Merci beaucoup pour votre temps pour écouter mes blagues. 00:56:01.750 --> 00:56:04.040 J'espère que tu as appris quelque chose. 00:56:06.000 --> 00:56:08.200 Tout le monde reste. 00:56:08.200 --> 00:56:10.000 [MUSIQUE]