Live Stream: Dual Screen Support for Mobile & Desktop with the Surface Duo team

how are you good happy friday happy friday uh i'm real excited because i have the most complex setup ever pretty much i have my obs going over here i have stream yard going over here i'm doing screen sharing to craig and also to all of you and then craig's also sharing my his screen to me but then also i'm going to be sharing it through obs at wet as well it's kind of bananas um there we go loud and clear cool thank you yay we can hear everybody perfect um craig craig and i are friends we've been friends for almost a decade you believe that uh craig and i worked together at xamarin came along to the microsoft man i haven't streamed in so long um jen's thank you so much for the two month subscription oh my goodness um it's been a while i haven't i haven't been streaming you've been streaming craig maybe people don't know who craig is craig what do you do at the microsoft's and what are you about so as you said we used to work together at xamarin so i'm all about cross-platform mobile development i love ios i love android and i moved over to the surface duo team so with the surface duo device it bends in the middle and it runs android which is great um so i work on this team and you know we're all about getting developers and their apps migrated over to work on surface duo as well as you know all the other android devices out there and the other foldables out there as well so we like to share code snippets and examples uh and sdks uh to help folks get their apps enhanced adapted responsive to foldable devices kind of no matter what platform they're using whether it's kotlin or java unity react native and of course c sharp and xamarin cool so you're you're sort of responsible of helping every single android developer out there make their applications be awesome on foldable devices and not so not just the the duo basically but any foldable device yeah definitely we're trying to get everyone over onto the google default sdk jetpack windows manager which gives you great experience on surface duo but also those other foldable devices um and just generally make the ecosystem good for everyone gotcha so can you talk a little bit about the history of this device and the sdks and sort of where it's been where it's going because you said there's new stuff that's coming out like it seems like things have changed a little bit yeah so on the sdk side definitely uh google just released the beta version of windows manager which is the kind of cross-platform generic sdk you can use to incorporate into your apps for the surface duo but also for other you know the foldable devices that are out there the sideways ones and the flip style ones i can all use that same sdk but to rewind back to the start of the question uh surface duo has been out for about a year i guess um it was available to buy last september it was actually officially announced almost a year before that in a really cool like preview video that the panos did kind of the previous october um which was a really big surprise quite a lot of people by surprise it's like oh cool microsoft's building a phone it's going to be a dual screen device it's going to run android and like everyone's minds kind of went and you know if you look for microsoft and dual screen devices on uh google you'll actually find like there was a prototype even 10 years before that called the microsoft courier which is a concept video that you can still find if you search for it and it's kind of amazing to see a lot of the things that were in that concept video from the early 2010s um actually like in a real device now in in like the 2020s including the two screens like the multitasking the drag and dropping the using a pen all that stuff so it's an interesting idea to get maximal screen real estate but in a device that still fits in your pocket and you know i guess we had to wait until now for the technology to make it like four millimeters thin yeah um but also capable enough to run android and uh you know all of the apps that you love from microsoft or the apps on google play um so yeah it's been out for about a year we've spent all of that time um building out sdks and samples uh for the native steps using java and kotlin but also for all the cross-platform tools that can target android so that the whole ecosystem can move forward and build their apps and make them enhanced for the dual screen device yeah it seems like quite a challenge because obviously like a lot of what i do on this channel is straight xamarin and soon to be done maui work but there's a vast array of different types of applications whether it be progressive web apps or kotlin apps or java apps or react native apps or clutter apps right they're all of them out there and chicken asks in the chat here good question it says can you define foldable is that multi-screen is that that it actually folds like is it tablet like is it the what does it mean right because when i open this up it's kind of uh like a seven inch tablet in a way but we're defining that as a foldable or dual screen like how is it defined yeah i think um the best definition is like yeah any device that folds um and so to point out like the ones currently on the market obviously we have the surface duo which is two distinct screens um so you can see there's two distinct screens and they have a really neat hinge that lets it go from zero kind of all the way around to 360. so it literally you know folds all the way so this is the this is the device that you know we love um but there are other foldable devices so samsung has uh what they call their galaxy zed fold which is a similar style of device uh that kind of folds along its long axis but the screen is bendable so it actually looks like a single screen that you've got um that the device still folds but you know the screen is continuous and i also have another device called the galaxy z flip and it's like your old motorola razor style you know so it's a tall skinny thing and the fold is on the short axis and so it kind of like opens up like this um i don't have any of those around to kind of hold up but all three of those different devices we include under this umbrella they can all use jetpack window manager uh to detect the fold and to help you move move elements of your user interface around when they're on a folding device and when the device is folded versus when it's flat so when we talk about foldable on dual screen we're kind of encompassing all of those different devices um and uh the jetpack window manager which google makes available is the api that you can use to to build that code that works on all of them got it that makes sense so um so base there's a bunch of different devices out there now and the duo is one of those devices and what you're saying is that they're sort of sdks that can target all of those so if i optimize my app for the duo i'm actually optimizing it for all foldable devices yeah when you're using jetpack window manager exactly jetpack window manager is what what it is and that's kind of like maybe also probably people like i talk about the android support libraries can you talk about jetpack and what that actually is yeah so i guess uh jetpack is the modern version of android support libraries like in the back in the day it used to be android support libraries and it was difficult keeping track of the version of the support libraries you're using and particularly for xamarin we were very careful to kind of try and keep them all in sync and then jump to the next version when we could do that jetpack is a new style of android support library um which is a lot easier to use it's a lot more version agnostic kind of as long as you're building with the latest compiler you can actually build and use the android x components to um get functionality that works on a whole range of api levels yeah and certainly all of the modern ones so when we say jetpack those libraries are typically in the androidx namespace and they just bring in functionality that you know works on the modern uh latest version of the os but often it has a um what's the way you you say like it regresses back the api versions and still provides some level of functionality so you can bring jetpack window manager and get the ability to scan for um or listen for changes in the hinge uh but it also provides you with screen dimensions and if you're using an older sdk or a single screen device you can still use those like screen like size apis and you know they still work on everywhere so you can kind of and then it up scales when you're on a foldable device you get that additional information gotcha that sounds good you know the reason that i wanted to have you on specifically is because for the last well 10 years we've been friends you're only one of the only people that i've seen during the pandemic and it's been fun to watch different collaborations like that that you've done that we've done together you've done with like the xamarin team uh and i'm always interested in it's like i have this device and if i do unlock this device you would you were just gone in and you went and grabbed this it was locked away for a year and a half in redmond um and i just hadn't gone into the office you got and you helped me upgrade it we had super secret crazy pre-release 2019 software on this thing um so i've had a surface duo it's just been locked in quarantine for so long which is hilarious but now it's running the latest software and i've been playing around with it i'm very excited about you just as my just main work machine in tune and all and all jazz but i've been sort of a hold out because not on on the duo or or dual screen devices but like doing anything in my apps because i don't have a lot of time i don't know like i don't know what the struggle is that maybe you maybe have like talking to devs like what their challenges are but for me as an independent developer it's like time right it's like hard enough for me to release an ios and an android app but then i gotta do other stuff right is that a challenge that you see or is it like do you see big big companies like kind of going all in and like they want to introduce everything into their apps yes all of those books sure i mean there's for sure um like apps and and folks that are like hot onto like every new thing you know they actually provide support for every new device that's out there you know they want to be old they want to be on the flip they want to be on the surface duo and you know they have the developer team and probably you know they have the architecture that means they can easily extend and adapt their ui for for all of those different devices so you know there's a point at which you know your app is heavily grid based for example following along from that web concept of grids and responsiveness um and you're heavily using fragments so you've already things are in reusable components you're probably going to find it easier to adapt to all those different things you know to on the surface duo put the two fragments side by side and maybe on the uh samsung flip put them one above the other and you know that on a tablet put three side by side you know uh if you've already got an app that's kind of planned for that kind of responsiveness uh adding support for a dual screen and service to unfoldables is probably going to be easier then you know maybe an app that was you know the original architecture was set in stone six seven years ago i mean those apps are still around um they're heavily activity-based um they're you know a lot of the ux is hard-coded in xml and some of those people need to tease apart a bit in order to be able to adapt them for a dual screen uh and also to adapt for tablets and you know stuff appearing on chromebooks desktop that sort of thing so a lot of it depends on the architecture of the app and yeah how much time and effort people have gotcha yeah seems to be like my big struggle is it is that i've never optimized for tablet either like i've done some blog posts about it but it's like i just i don't i'm not a tablet person you know what i mean i don't care i carry just a phone around with me that seems to be the biggest challenge i have is like if i'm not living it and breathing it then i don't like actually like do it right because like if this was your main device right every single day like the duo or a fold or a flip you're you're going to want to optimize it for like what you have so like living and breathing it is actually like the best way of doing that and that was the big thing is remember i was an android card carrying member for uh over a decade and then last year i got the se2 and obviously immediately shattered all the screens on the bottom and all the good stuff not the front but just the back i continuously drop it all the time and now i really want to optimize my applications for ios because i've already sort of mastered the look and feel on android like i did it for a decade right that's where i was very comfortable with now it's like oh now i know really what ios should look like um and when i'm using it maybe i'm getting better so yeah yeah i think that we're kind of gonna segue into a really interesting element of like xamarin xamarin forms and the two-pane view layout which is the control that we built and made available for for dual screen development and that is that um it's an it's a control that's kind of optimized for dual screen development but it actually works fine and enables scenarios for just your regular phones and for tablets like it's a package that has the concept of two panes and it they sit very well side by side on a surface duo or another foldable but you know they provide you with a level of layout control where you can put them on a single screen one above the other or you could squeeze them in side by side or you could use one screen one pane and slide the other one in over the top or in a tablet you could just have them side by side and on a 30-70 split or something like that so that's one of the approaches we take when we're talking to folks about enhancing their app for this new category that kind of sits in the middle of a phone like this and a tablet like this is that dual screen and foldable devices are both like they all fold or show like what looks like a regular phone screen in some form or another like the surface duo folds all the way around and then you just use one side of it or you open it up like that the samsung galaxy fold has a screen on the outside that does that same kind of effect so these devices are in the middle and thinking about that and creating layouts that adapt in that you know classic web css style of adapt adapting and being responsive to the ux works fine narrow wide across two screens or even wider on a tablet uh and if you can think about that when you're designing or updating one of your screens you kind of get you know three for one you get an updated ux on single screen uh and get it on the fold and the surface duo and tablets and you know there's so many more chromebooks around than there were two years ago you know the explosion of them in education uh in cheap like enterprise deployments um android apps being available on there um that's becoming a new category as well so we don't just even think about tablets it's like android is on desktops yeah and while we can't actually talk about anything in windows 11 because i have no idea about how anything in windows 11 is going to work at all because i'm still on windows 10. um i have windows 11 on a bunch of other machines but just you know normal public builds you know android apps are going to run on windows soon which is pretty awesome and i have no idea about any of that nor are we going to talk about any of it but here's a good question from chickenwing in the chat since things have evolved a little bit um it's asking they used to he said i was uh here she was said i was advised to use media router to support dual screen which is a pax e 800 device i don't even know what that is i have to look it up i tried the service duo sdk but it didn't work that was a few months ago what is advise media router what is media router is what's kind of the 2021 late 2020 what kind of go with apple models late 2021 um recommendation here yeah um sounds like it's gonna be more for dual screens where you can actually a lot of android devices can have uh additional screens like you can plug in have an external screen so that probably goes back to that question we talked about earlier about defining dual screen um maybe we should have also been clear that what we're not talking about is dual displays like multiple displays like situations where you can connect um and project you know a second monitor uh to your android device uh which will allow you know activities that are running from some apps to appear on other apps got it so yeah this is the max this is not a dual screen device in this regard for like what we're talking about today yeah so that's a good question because it helps us to to clarify that um all of the devices we're talking about the samsungs and the microsoft surface duo are foldable devices where the the screen that we're talking about whether it's one or two is contained within the device and apps can use the whole thing like they can effectively be maximized uh to use windows term across the whole device that concept of having you know an additional uh external screen plugged in is a separate um area that you can still build with android obviously but that's not what the the service duo sdk nor jetpack windows manager is about there you are perfect uh 3d polyask will don and maui support dual screen gosh i hope so it's a part of xamarin forms obviously and if you follow like the service ui developer team i recently shared on our blog that we've got a binding for a jetpack window manager that brings the jetpack window manager sdk into xaml so you know we've got that available on uga if you search for xamarin.androidx.window uh that package does provide this sdk into c sharp so that's really the foundation of making it available in in dot net now in preview as as you all know uh we're still building it out and adding and finishing off stuff so i guess that's something to to look out for and i've mentioned this to people that have asked on twitter you know a minute it's available you know i'll be tweeting it i'll be blogging about it james will probably be doing the same yeah yeah and this is cool too because like you just came out with a blog post uh yesterday let me go and pop this over here um is you know you had one about unity in jetpack there's like different applications that were built there's like the i'd have to find to go back a little bit in here but here's yeah jetpack window manager alpha update uh developer tool so if you're interested on this i think my favorite one is maybe is it on page three now uh what's the one xamarin i just found it for someone else they were looking at it uh where is it at maybe page four depends when they oh definitely i'm getting there you know what i'm talking about it's that one app that they built where's it at i mean page five you guys are doing a lot of blogs oh yeah we're blogging all the things well the thing is we you know in addition to uh google moving so fast with jetpack window manager they have a control sliding pane layout that's also enhanced for for dual screens we also have all of these other platforms that we want to support flutter react native xamarin unity and the web so you know there's always something to talk about for a dual screen that's going to help someone in the developer community and this goal is the sketch 360 which is an open source app built with xamarin forms and skia sharp i'll excuse your incorrect um or they're incorrect xamarin forms uh without the dot but that's okay uh this is really cool it's a garage project right yes yeah it actually started out as a windows app so it's all c-sharp obviously from its from its beginnings and after the surface duo came out michael the developer ported that windows app onto surface duo and the two screens using xamarin forms and using two pane view and you know the pen capabilities and it's a really nice um implementation like james mentioned it's open source you can actually go and see there so there's a lot of code and he did what i was just mentioning in terms of using two pane view so that when you're on a single screen the things are laid out one above the other because you you just want the mini you know you want the same ux bit smaller and then when you get on to service duo it they just span out to be side by side um you know so very little work required from him to respond to the size of device that he's on that's cool um the one thing that i've always been and what i kind of wanted to try to do today besides doing a live q a and going through stuff with you is that i've been a little concerned which is that i have my app my cadence so i'll pop this into the chat and i've um recently just came out the latest release of it and i was just working on it for about the last four or five months and i introduced a bunch of new features uh into it actually so it has like a full database of people that know about this i've been building a little bit on stream too but it basically enables you to connect a little sensor uh when you're riding an indoor cycle bike and it'll show you your cadence or how fast you're going over and over and what i recently did is i got a lot of feedback from some android users that were like oh it doesn't look great when it's actually half screen like you know because you can actually make android apps half the the width of a portrait uh or if it's in landscape so i made some optimizations to the ui there so it gave more room you can actually see like this is a little small so i moved some elements up a little bit and then i also added this feature which was like history so this is you know full history of every single ride and you can go into details with charts and graphs but you can imagine that that i'm thinking about two two things already which is one on this main screen here um there's actually other bits of information that appear when you're in pro mode so it actually shows you how long you've been cycling how many rotations you've been doing um some other or average cadence as well and then also like this these are two pages like you have to like tap and go into it and man it sure would be great to get that on one side and one side automatically so those are kind of like the two optimizations that i've been thinking about especially these two new pages because they're very mvvm and very streamlined where the home page is a hot mess it's just a disaster of code because i wrote the entire app in like a minute basically um let's see before we go on so my hope here was ask your questions live i'll try to mc it with craig um uh here and since craig and i've been friends forever this would hopefully be a super casual conversation then i'll i'll take a look at the chat and ask questions but i also want to actually get into some code maybe just explore the two pane view by itself to some file new and you can walk me through it because it's been a long time since i did it and demoed it and then maybe we can take a look at my app and see if there's possibilities to actually get it going let's see um mkovie and the chat says i'm i'm ko luca from the moment i started using duda i've been struck with this feeling that it's a kind of a device foldables that can finally be useful for work i was wondering what your views are james and craig do you see foldables as another form factor between tablets and smartphones or a dedicated segment ooh that's great let me get into the other view so then we can let me go over here this is my i like to do these snapshots okay so it's going to be um here's a question all right from makovio um they've been using the duo and they were struck with this feeling that foldables and these types of dual screen devices are very useful especially in work scenarios they're wondering what are our views james and craig experts in the field do you see floatables as another form factor between tablets and smartphones or a dedicated segment of devices which can do completely new things that the other two form factors don't allow for ooh if the latter what excites you well uh that's a there's a lot into that um i think the answer is kind of a bit of both like it is a new form factor and i think you know the obvious reasoning behind that is that it's the size of a phone right so when it's folded this one or the other one's in the category it will still fit in your pocket right it's it's inherently portable in a way that a tablet generally isn't because you know even the smallest of tablets generally isn't going to fit into your pocket unless you're you know a fan of cargo pants so you know it's going to be with you in many more places than a tablet would be um and but then when it's when you're using it it has as much space as a tablet um so you know if you want to do real work real work in in air quotes um you know there's enough space on the screen to be able to see that and kind of furthermore like even versus having a tablet there's a few areas and times where this form factor where having something kind of folded over like this um can be super helpful so one of them is like just participating in a teams meeting or a conference call zoom any other like trademarked like video problem thing that you want to mention um the the service duo and other foldables can sit popped up on a desk or propped up on a windowsill or something very neatly with the front-facing camera looking at you and the the meeting happening in front of you and with a whole other screen to type chat um you know to to view a powerpoint to do whatever you want to do you know in a way that you would do on a desktop like you'd be multitasking you'd have two windows open side by side right um and this form factor lets you do that in a mobile way that is much harder to do on any you know candy sticks of you know single screen phone and the the same kind of goes for um actually working so i've seen people tweeting us you know i love when people tweet at us the use cases for the device um and folks are using um vs code online by github you know code spaces and they're actually just got a web browser with code you know backed by you know a server based vm and that's the whole top screen like a view of their like website and the keyboards on the bottom and they're doing you know you're not gonna code like that for eight hours a day but to jump in and do a quick code review or a spelling check or you know for small development tasks uh it's much more doable uh on this kind of device uh in this posture than you know a tablet is is a bit clumsier because you're typing like this and a phone you just don't have enough space to be able to do both of those things so i think that the the form factor and the questions asking about um being useful for work i think that it is a lot more useful for for a lot of those ways and even just having two apps side by side like the ability to drag and drop from powerpoint into outlook and from outlook into your outlook calendar um the style of work that you do on your desktop when you have multiple screens open and kind of referring to data between them is a lot easier on this uh than a regular phone um and it's about the same as a tablet you know tablets have that multitasking ability as well but again it comes back to this goes in your pocket and it's always with you so it's you know it's not you know revolutionary in terms of you know uh it just does a lot of things better than one or the other of the the you know phone or tablet device so and i'm really interested to see you know people will continue to think of new ways to take this form factor into um more productivity scenarios and stuff like that yeah i think it reminds me a lot of when nintendo came out with a nintendo ds the dual screen device and it was this hey no portable before had ever been you know a dual screen never really had a touch screen i mean there were some but combined this technology into one it was up to developers to make software and games for that device that unlocked its potential i think the the dual screen devices today have the advantage that you can do some scenarios and apps work out of the box and many scenarios like you were just describing right one like you said you can just use this device as a phone in a single in a single fashion here same thing with all the samsung devices like it is can be just a phone if that's your scenario that you want to use it for the most but i don't use my phone as a phone i never try to take phone calls on my computer if i can where i think the other scenarios what you're talking about is that already applications will just kind of work out of the box to do split screen or side by side or another advantage of of that is like multiple tabs on multiple sides my wife was just returning some merchandise she needed to go online to the you know online chat to chat with them about a refund and she had she tried to do it on her iphone and and basically it says you know do not like press any buttons don't go anywhere don't do anything like if you close this chat window that's not what it's made for it's made for a pop-up on a desktop especially to go over there and do that not to say that it's impossible to do on your iphone or your android just normal phone but having the ability to do multiple things or have that space that something isn't going to come up and interrupted is really nice um but yeah i think that that it's more than just the works on i can see the game scenarios for it and of course i think yeah definitely as a companion but the key of it is for these devices that it's one less device to carry around if that's your scenario like if you are a tab if you're always carrying around a tablet and a phone it can you know replace that into a singular form factor to be a companion to your main desktop setup so for me i am excited about them i'll be even more excited as we're seeing more come out i think that's what it excites me about is we see the innovation coming from um for not only from the surface duo team but also from samsung and other vendors that are out there creating devices because the more there are the more you know encouragement that means for developers to go create and up you know enhance their applications for it because the one thing that you don't want to have is and what my fear is if we test my cadence on my device is they put it into the dual screen longer form and then it's a bad experience and that you get a one star review for that device you're going to be encouraged to go update your application for it but i don't see these devices going anywhere because forever we've been enthralled with multi-display phones and tablets if you think of west world with the folding out tablets the three screens that are on there right where we love that's why we love our tablets they close down they open up so to me they're here for the long term i think we're just going to see more innovation in the space let me get thinner they're going to get lighter they're going to have more features and gizmos on them and uh they'll be nice and especially if you look at like the full is that full like the third version of it or whatever second or second or third yeah third yeah no they they just released the fold three maybe a month ago so it's like you continue to see the innovation there so that's that's my answer there yeah actually why before we move on i can't believe i forgot gaming like xbox game pass like was out maybe six months ago now for the surface duo and in that situation like you're streaming games like from you know the cloud on the top screen and the controller is on the bottom screen and the controller is adapting to the game style that you're playing and the like you easily just search for game pass surface duo you'll see videos and folks using it everywhere but it's an amazing experience just today someone was tweeting about xbox game pass on the surface gmail at the beach um which is like totally separately like you can spend hours just playing games in in this form factor and uh having a good experience so yeah there's stuff that you know you didn't originally think of that it unlocks now i gotta go install game pass on my xbox app on there awesome uh we have a bunch of other questions oh my goodness there's so many questions um hopefully that answer their question with the whole point of forms being shared do we think ios will ever migrate to foldables you have to ask ios about that formal um i don't know well there's an apple event in four days i'm pretty excited are you i'm excited for it i mean i think right i think we're just to get what is it iphone 13 i don't think there's gonna be anything special maybe a new watch right so yep yep always yeah i i mean the question ends with uh it feels android specific um i guess like yeah because all of the phones are our android phones right now the iphone ecosystem is one manufacturer but um you know if it becomes hugely popular on android you know that's going to be hard for you know other oems to ignore whether it's apple or not so who's to say but um if you're building for example xamarin forms you're still trying to do that responsive design between the sc phone which is four inches and the pro max phones which are six inches and then the ipad mini which is like six and a half inches and right up to the ipad pro which is 12. so the actual thinking that i described earlier where you actually want to try and have a user experience that scales through all of those you can do that and have it work on ios and android and also within this little niche of you know android foldables um so even though the folding bit is um android specific for now the the thinking about responsive apps and responsive layouts i think applies to both ecosystems and if you're on camera forms you're building for both uh and controls like 2painvue are going to be able to help you uh even if you don't particularly care about the surface duo right now that makes sense that makes sense yeah and i think that that's a good point is like i want to take the app if i do some optimizations just open it on my ipad which is actually what i use to cycle on and then see what it looks like because that could be pretty nice um let's see spanish asks this isn't specifically rated to duo more general for newer dev if i have some dynamically generated code oh you're just going in louise i don't know it doesn't ask me anything i realize like i have some dynamically generated code based on say a class and i realized later i need to change the class's name how do i go about fixing that oh you just right click and reform reformat in visual studio yeah refactor your right name rename and it goes through your entire project and boom hopefully um cool all right some good insights okay cool all right craig let's do something where do i need to go on the internet to make this happen good question so i think if you want to start at docs.microsoft.com dual screen with a dash [Music] right and so this is uh like foldable and dual screen central um so we've got a lot of links here it's broken up by platform so there's a card for all of the different areas that we support um so there's a lot of stuff there for java and kotlin devs obviously and there's a section there for xamarin so if you dive into that um we cover just the stuff that's relevant for surface jewelry development okay and then kind of links off to you know the actual xamarin documentation which is like another thousand plus pages over in microsoft.com so if you go into there though you can see there's a link to two pane view there's a link to dual screen info and those are probably the controls that you would want to start with uh if you're a xamarin forms developer okay got it so let me go ahead and post uh i'll post a link here into the chat just everyone kind of grab that here so what is um so then i also see this jetpack window manager for xamarin yep and that's different than the other ones yeah so jetpack window manager for xamarin was what i touched on earlier that's the binding for jetpack window manager that takes that android sdk that google's provided and surfaces it into c-sharp so at the moment it's an android-only api that you can use today if you're doing a xamarin.android app for example like not forms but like as a real xamarin android app you can use jetpack window manager today and you can build an app that um adapts to the service duo and to the samsungs and and other foldable devices so that's the foundation that we want to take into xamarin forms that we want to take into dot net maui but for now publicly we only have that release available so uh all the details are there we have samples um but for now the jetpack window manager support is for xamarin android devs only okay support which is in two pane view and dual screen info is currently surface duo specific so it's a cross-form api it's a control and a non-visual helper class that will you know run on all devices like it's not going to crash if you're on ios or anything but it lights up on the surface duo and gives you that automatic you know hinge detection and laying out on other devices it'll do proportional or whatever you like so those are the two controls that i think we would start with using xamarin forms now and you know in the future xamarin forms will be able to adapt to more classes of device as jetpack window manager moves up the stack got it because that's just still even from google is in preview or alpha today right correct yeah okay yeah we really want that to be stable before we would you know make it put it into xamarin forms yeah um or don't need maui so that makes sense there's some dependency there all right formal ask do we need to get a dual screen emulator um yes there is a use the emulator button there is so there are if you're using uh xamarin for android you've already installed like the android sdk and the latest versions of the android sdk include a couple of foldable emulators that mimic the samsung galaxy fold and flip so you can grab them you know they're already available in your android sdk install if you've got kind of the latest versions okay for xamarin uh for surface duo we actually have our own emulator download so from where jane is the link that he posted earlier just go over to the service duo emulator button and download our image and it gives you a better experience because it includes all of our enhancements that are on the service duo if you download that um that will start up it starts up like a regular android emulator you can pick it then in your visual studio device list to deploy to um it's free obviously it runs on windows mac and linux so you can use it anywhere and that gives you the experience of uh using service duo the emulator that we ship also includes a pile of sample apps that we've built so you can play around with them as well and a sample code on github okay gotcha or i could plug in my duo and then i can open visor and then it should because it's a it's a it's a full thing oh here it is so i can open it and there it is yes there is the surface duo screen shade it kind of looks like a laptop because you don't see the hinge here because visor isn't showing you there but there's a gap there obviously that exists and that's that that'd be the advantage of using like the emulator i assume that you can see the hinge move the hinge do a bunch of stuff at the hands right yeah it's free and you can see the hinge and in the properties window of the emulator you also can can fold it and see a 3d preview of what it looks like folded as well so you can also test out you know how does it look um when you're like this you know what happens to the app so should i download this that's the thing sure i can put it up on my screen if you feel like we're doing it live doing it live well do i have to restart my computer that's the question uh you shouldn't have to for the it's just an image it's actually just running like the android emulator with our image ah okay so that's cool that's good to know okay cool let's see what happens here internet speeds happening okay doing it live what's happening oh you know why not [Music] come on xe there we go opening i'll probably open it twice see here that's okay it's only like 100 meg oh i did open it twice okay cancel cancel once okay here we go just looking through the other questions every time one of these comments says do you like coffee i think yes i like coffee yeah i like that i like my autumn i automatic subscribe no one's ever subscribed so i never get any referral credits but my yes please coffee did ship today so i'm excited that it'll come next week so i'm almost out of coffee i'll probably walk to the store and get coffee because we drank all the coffee that you gave us so obviously it didn't last very long because it just nonstop yeah it never does okay cool but at the same time because i have obviously my dual screen device here over here i could just start developing vortex thank you for the subscription i appreciate that nice nice subscriptions guys call them out so this is installing so i gotta go file new project i can just do new project right yep okay and then xamarin forms because that's what my other one that's what mine is mobile yep there's only new ones now i'd have i gotta i gotta admit that i gotta put xamarin.com uh i i gotta admit that i have installed um all the maui stuff on here so i'm just gonna assume that all this stuff works we'll just do a blank app just because it'll be maybe to the to the the core here so it's a big image yeah it's it's you know it's basically our whole os right so um you'll notice when you use the the xamarin i keep saying xamarin and surface dura interchangeably because we're talking everything i think is xamarin um if you grab the surface ur emulator and you're running it um like you're about to on your your windows or mac uh it's you know it's a complete reproduction of the surface duo device in the emulator so when i talk about those other samsung ones it's not actually everything that ships with the samsung you know the two emulators that google has in the android sdk emulate the screen size of the flip in the fold and the and their ability to fold but you know it doesn't include all of the one ui enhancements that samsung ships or you know anything like that because it's you know google's like high level approximation of those devices but the reason why we ship this for you to download is it's 100 the surface duo it has all of the enhancements that we include uh you know it ships with swiftkey by default which is the full keyboard on surface duo um the launcher that we use and it has the specific gestures that we've added for interacting with the dual screen so swiping and holding to move apps across the screen and stuff like that so that's kind of the reason why we have this separate download is so that we can ship something that's you know high fidelity matches up with what you would get if you had the device got it all right we're gonna see i launch it from there i'm assuming it should run on i think i just have hyper-v enabled so it should boot up i assume should do it's a good start at least and i see there's another button over here this is like a right so that's the goalie button yeah so if you if you look there there's an option for folding and it's in the hinge drag thing at the bottom so if you drag that slider and then yeah and then you can actually shift the thing around in the preview and you can yeah just gimbal away whoa yeah i always need a reset button yeah i just click one of those there we go yeah yeah oh it's like again things are happening as i move it right so it even yeah closes turns off one screen if you flip all the way around which is again mimicking real device behavior so this is why we have a separate download is so that you can get all of that like functionality one-to-one with the device got it that's cool all right i need to get it back open it yeah all right open it and then close because oh oh that wasn't fun i can yeah basically this is the stream is me playing around with the all right perfect now we have this arrow okay cool so that's really helpful so if you're testing it and want to do stuff because now you can see the hinge you can see the hinge and if you do things differently like sometimes the app changes when it's half folded versus when it's flat so you can do that within your app just you know the hinge angle changes and stuff like that look at that okay so we got an app all right so now what i need to do i need to i don't want to add an account okay come on anime later uh we'll see how like how well my machine does seeing i have like stream yard this that visual studio emulators um all this stuff so yeah two notes is the app that you made so two note was actually built by our summer interns in 2020 so they came online for three months they learned android development from scratch and basically built a clone of onenote that's optimized for dual screen devices um it's super cool it has that pen icon there you can draw um it's got the share sheet it does all the things um yeah so but yeah that's one of our samples it's uh obviously open source and oh cool so then i can drag it over and then boom yep boom got it so basically this is what you're saying is like if i go into the one pane and i go around i'm just navigating like normal this is just a normal app right i might as well be normal with detail i might as well be like this over here right because it's just like this and then if i open it up and i drag this is the key is like this hinge right here and it now it's like maximize or span got it i can go away oh interesting says welcome to two note oh interesting okay cool so tap on that get the stuff make the drawing do the things add a note cool i get it i get it craig i get it look at me draw i'm amazing uh that's pretty cool it like saves it cool one note two no awesome okay i get it yeah all right we love the puns we also have to do oh my gosh i don't know if i have to do in here oh i have intent it may not be on the i may not be on the emulator yet okay this year just built that so got it okay so now what i need to do i got i have my let's say just someone is like in here they're doing stuff and this is all they got what do i got to do next because i'm assuming if i if i launch this app let's just debug it this is file new project this is like what people get it's not going to be great it yeah it's just going to be your regular xamarin forms app doesn't do anything okay let's see what this looks like but yeah otherwise it's it's a completely functional android simulator right so if you were an android dev you can get your existing app run it up on our emulator and get a sense for you know how your app is going to look on the server you can use it for any other android testing you want to do as well so that's cool that's good to know like yeah so if you don't have a device you can just simply yeah go to town basically and start it up let's see if this thing will let's see how long it takes to build with all this stuff going on my machine yeah i have the same thing on my streams what are you gonna do so it does say that my machine is 90 100 cpu usage so let's see nice although my stream seems not impacted so that's great no no drop frames i love it um i'm very impressed i'm very impressed with the um seven-year-old machine that was built by not me so it's got the power it does i'm i'm very very happy about this about this i'll see why we wait here 3d polyrest says might join your youtube members if i have one i haven't set one up yet i've been thinking about not streaming on twitch and only streaming on youtube well it's in my mind i might just drop a platform it's hard to say um i don't know i haven't decided yet okay cool so anyways we're in here and if i drag it amazing yup just splash right across there yeah does this happen to a lot of apps basically today like is that like the default or like yeah the default is the apps you know in general it's good guidance for your android apps to be resizable like to be able to you know expand to fill any space because even on single screen phones there's already a ridiculous number of different form factor shapes and aspect ratios and whatever so most apps just try and fill the screen and for a service duo when you manually move it onto both screens it's just going to try and fill it so by default we always open the app on one screen so customers are never going to be like oh shoot i can't read stuff under the hinge they will have had to drag it themselves across right so the easiest thing for customers in that situation is they drag it back and then they just continue to use the app in in single screen mode but if you've done this extra work if you've thought about it and you're detecting the hinges there then you know you shift the stuff over or you split it into uh whatever you want to do got it look at this let's sign me up skip that oh yeah so edge um has its own dual screen support which is exposed through css and javascript so it's a 100 like chromium standard api that you can add some css classes that will tell you where the hinge is and you can adapt your websites as well whenever they're on a foldable device so um it's also for web devs so let's say i'm ready i'm ready to dual screen craig now let's say i'm ready okay i'm ready i'm ready to dual screen let's something is happening okay okay i'm gonna minimize this oh authentication code nope i love i love when it's when visual studio is like give me your off code okay so i gotta go install a package is what you're saying right so yeah go into nuget and probably just for the whole solution because the package is is there and then look for xaron forms dual screen it's right there in the name got it now let me see what version of xamarin forms do i have installed just to match it i got 200 let me just upgrade those really quick just so i'm that could not possibly go wrong no so we have updates here i haven't up i got to tell you craig i haven't i've been updated to the latest latest bits i've been a little worried and by word i mean not worried at all just like i haven't booted up visual studio in two weeks so there you go holiday and then just manager you know you're a man you're a manager craig basically indeed yes team you don't you do not play there's a lot you do not code as much that's for sure you i joked with someone today my job is to figure out how fast i can hit the join button in teams so xamarin.forms.duel green and then let me get rid of the pre-release over it but like nuget did a great job of that update like i will say that um you get is fantastic these days oh yeah you know people on the call that have lived with it since it started it's just leaps and bounds awesome in 2019. it's all about these package references um okay so also craig you live stream too don't you that i do so uh we do it through i there's an account that i have uh surface duo dev so if you go to twitch.tv slash surface duo dev we stream every week and talk about all of the different topics that you see on our docs page so we'll switch between unity and xamarin and kotlin and flutter um and web uh you know what's the latest what's new um there's you yeah right there oh there we are four hours ago you're streaming today it was yeah in the correct way now at some point it'll be from yeah talking since 11 this morning in the correct new category that i just found out about yeah that's cool we no longer have to be talk show hosts yes and we no longer have to be chickens and other things that are on there too oh and there's me i'm live right now look at that oh my gosh cool so you're on there i'll keep posting that as well so keep that down there so i installed it okay now i gotta go into here now let's say i just have this one page do i create another page or do i what if i just wanna like not do any dual screen stuff i just want it's like to look and act the same so what i would do if i were you would be go to that docs page that we saw earlier yeah and not this when we go back yeah docs.microsoft.com slash dual screen slash xamarin slash to paint you okay yeah and i would just put that xaml okay um you'll need to grab the other control i would just put that xaml in the page and then sub in like just put it at the top don't replace it because we'll we'll reuse that stack layout okay right at the top there and then go back and get the namespace check this out craig i don't even have to visual studio does it for me yeah it's way smaller than me yeah okay cool so i'm just gonna run this let's just run this and see what happens for like the default so this is just there's a pain one and a pain two pain one content pain two content i understand that yeah and it's gonna work on any platform it's gonna work on ios it's gonna work on android it's gonna work on when ui so is that the concept because i would imagine that it's like here's page one and here's page two like that's how most apps are created today and is that going to make it more difficult because my app is every screen is a different page right yes so that is one of the interesting kind of aspects of designing and i think when i was talking earlier about you know activities versus having your app thinking about fragments it's kind of the same as true here if in your xamarin app everything is a content page you're going to need to refactor some things out because sometimes you're going to want them side by side and sometimes you're going to want like filling the whole screen got it so um yeah if you want to have that option to have the view embedded inside of another content page versus have its own page you you probably end up refactoring some of your content pages out into reusable content views and um it just so happens that we have like a microsoft learn module that specifically explains that for xamarin oh my gosh so i just linked you and if like folks that are watching want to like just run through this it's only a couple pages learn module that explains that whole process of taking an existing app in xamarin forms and migrating it to other users to paint view okay so uh we could just end the stream now and you can just follow that but all right so i wanna i wanna do some basically yeah the answer to your question is you you might want to make some of you use more reusable by splitting them out in content content news and then you can include them here and then you can include them somewhere else or the other opportunity for you is to think about this page as always being what you show and then encode showing one or the other pane so this content page now that has these two views can optionally show one or the other of them full screen so you can actually create and that's what that training shows you you can create like a a list detail kind of view that shows one and shows the other got it when a single screen device and shows them side by side when you're not so the default here seems like it's split 50 50. right if i came in here and i said um i guess there's no background color on that but if i did like background color red we get so it's basically 50 50. that's what we kind of it's gonna default yeah okay and then if i if i span it obviously the dual screen it's 50 50. 50 50. so here like notice that the p is like hidden there yeah so this is the first step where you would think oh should have read the instructions yeah because i did something wrong what's happening what's happening here is it's going to do it it's doing its cross-platform behavior which is it's always going to default to 50 50 on any platform on a tablet on an iphone on ios what we haven't done yet is initialized the control with the underlying android activity in the android project so yeah so so maybe that should have been step one right there when you unpack the ikea box and picked out the instructions with the allen key there was uh there was a bit of documentation somewhere that said uh you need to use the sdk yeah you need to go to your android activity got it and put it in here so yeah going just to the android project okay and yeah i just paste in that init function got it and so what that does is wire up the the control so now the control is going to know it's on a dual screen device with a hinge and it's gonna still default to moving them next to each other but it's gonna know that the hinge is there and make space for it so next time you debug that p is gonna be visible because it's not gonna have anything accidentally hidden i got it okay let me make sure that also there's these activity themes i think that's by default they have them so we have so this is how how the it basically so if people don't know what these configuration changes are you're now probably closer to android craig than i am but from my understanding configuration changes basically says hey i my application can handle this type of orientation change so don't kill my app yep yeah exactly and for all like pretty much all of the cross-platform tools like xamarin and unity and flutter you want to be handling all of them yourself you don't want like your xamarin app to just reboot effectively when when something changes so we mentioned that for completeness in the docs but your average xamarin forms template for volume is going to include all of those already got it perfect and it did so that was good yeah the newest one is the ui mode because that's a light mode dark mode i remember i was updating a lot of old apps and i was like oh man why is it like crashing oh it's because or not crashing but killing the activities because of that so yeah okay i'm ready my body's ready so now i'm gonna sit side by side and yeah now it's like correct nice because it because now we actually are hooked into that that sdk under the hood basically yep cool exactly all right so yeah i'm thinking like okay so now i understand this so this is the key now what if i do rotate it oh i guess i need to oh yeah it's so by default the emulator is not going to support rotation so pull down the yeah the activity thing and enable oh that's not it auto rotate per okay did i do it there it goes okay cool so one pain two pain and that's actually kind of nice because you actually might want in landscape mode you may actually want to do both panes side by side or make these smaller right yeah a tablet that's more of a tablet view and here i can still span it and then oh interesting one got it it works as you described now here's android's apartment if i rotate it back oh interrupt okay so it knows so pain one is always on the top or the left hand side is that correct yes but you can you can programmatically change that as well pretty much everything in this controller is configurable so you can change it to be top like paint two on the top by default or on the left by default just with properties in your xaml now how do i make it so pain two is never shown so if you go back over to the xaml and because that's kind of kind of see like a lot of people are like hey i have page one i have page two i want them to be you know full and then i want to i want to be able to show it if i tap on it or make pain basically make pain too visible right yep okay yeah so you can set the um i guess there's documentation i could just look at it because there's these okay here we go so we have by default the two pin bit will always attempt to render both panes which means that when an app is running in a single screen oh follower haas thank you for the fall um and vortex thank you for the sub uh min tall mode height indicates the minimum height of the control must be to enter tall mode i don't know what tall mode is min wide mode width indicates the minimum with the control must be to enter wide mode and then there's pain one length and pain two length yep okay so this is um i'm wondering if like you could flick over to my screen okay i'm gonna flip over here we go all right here we go i'm gonna try this we set this up just ahead of time oh my gosh it works nice so i'm going to point people like one of the samples that we have that's right uh in the xamarin form yeah that was your app i was playing with it before so the the pro all the properties that you just read through like i wrote that documentation and i'm still confused by them a little bit so this this sample tries to kind of explain what all of that stuff means what's going on there okay so here we have two panes left and right on one screen so the first thing you'll notice is like i i said you can change the default from top bottom to bottom top or a single pane right and tall mode like you said what's tall mode tall mode is the phone like with the screens one on top of the other okay it's tall and wide mode is like when it's wide they're side by side so a question you just asked about how could i make um only show screen one i can change the wide mode to a single pane oh no hang on there we go and i can do the same control mode and then hopefully it'll stay in single pane okay and if i put this if i spam this it'll see so now it's still showing pain one right so it's not even doing something crazy which you don't necessarily want it to do but like i said you can configure everything so let me go back to top bottom and actually just let me go out and come back in and i top bottom and left right so the other thing you can do is set the default to pane two and when you're when you're saying single pane now it will show pain two so these properties like we're just showing we're just changing them here in the ui but you can also set them programmatically right yeah so you could switch pragmatically from pain one to pain two if the user clicked a button or selected something from a list got it right now i'm navigating to a new page but i would just say hey show pain two and then i would probably say i guess is there a way to detect when if it's in like uh like the modes basically yeah you can check all of these values as well so you can check and you can check using dual screen info you can check if there's a hinge there so you can actually know if the phone is on that okay if the app is on that phone before you start to play around with these properties um and the other thing you can do like you said it's by default 50 50 side by side but you can also set this minimums so if i change the this screen is 540 like you know that already right if i make this minimum higher than 540 and let me just make it just over 540. now that says the the first plane needs to be at least 540 wide and so that pushes the other one underneath it and when i go and rotate it'll eventually update unless it's locked unless it's locked which oh no it's not locked it's just my computer taking a long time i think anyway you can make this it's top and bottom so for example this is what i was thinking for for my cadence you could have your cadence on the top and the sub you know smaller values on the bottom just by setting min wide mode and then if someone makes this wider it's going to automatically know to put them side by side yeah okay and not only but on a tablet or something larger it will also know to put them side by side and on the surface dual it'll be down the middle and on another tablet you can set the proportions so you can make it 30 70 or 60 40 or something so it's pretty configurable but it's kind of hard to explain all of those from from like the documentation points you were just reading yeah that makes sense and then will it does how does it know the proportion there right like can you basically say like oh only make the smallest part if it's in that mode there as big as it needs to be yeah so you can go into the um the sizes and you can use like the the star syntax you know like one star and two star oh yeah set proportional size values okay um so here you can see the links have been set as percentages in code um and you can do it like as percentages in code as well so nice okay um that's a great thing yeah um but you can head back to your screen if you want let me see all right let me let me pop over here again all right see this works i'll be really quick with let me uh let's happen around okay so if i go in and i change i guess on the two pane view you do like pain priority is that what it's setting okay see pain priority pain one that should show that will only change which one's showing you also want to set tall mode configuration and wide mode configuration got it tall am i in tall mode right now no i'm in wide mode no i'm intolerable yeah i mean it depends on whether you're on a few screens so just set them both in single pane got it single pane yep i see and then there we go got it so we are in y the whole thing is in wide mode and then when i do this it's still going to be one i see got it yep so basically this mode here you would not be using a two-pane view at all pretty much you yeah yeah it's like this mode is helpful for adapting for when you're on a single phone on a phone or a tablet yeah right so you would enable or disable the configuration depending on the device and then when it's on a foldable you would leave it as top bottom left right and let the control take over so yeah it gives you the ability to force one of the pains to build like a less detail experience for example when you're on a single screen got it left right top palm that makes sense okay so then i go here and now i'm here now i got this they got the top top bottom is the tall mode configuration yep and here because now i'm wide now i'm in single pane mode for one right tall so tall is like portrait and landscape is like landscape yes yes but i think we tried to stay away from those because when it's landscape it's actually two portrait screens next to each other and folks just got confused including me yeah so it's a little bit tricky uh tricky terminology that you just kind of get to wrap your head around and play around with it basically yeah okay so i can go in here and like the idea would be today to make it so that the this would also be left left right but i see got it oh interesting oh because i would need to set i would need to set this as the the min with request or something like that right yeah i'm in tall mode height or min wide mode width got it yeah so if you set min wide mode width to 541 for the surface duo for example then it'll make sure that they sit one atop the other and then i could do left to right basic or i could do here because we want oh i see this is saying maybe is that the min so i'm doing here no minimum which is it you want the wide one as well i mean meanwhile oh i'm literally setting the wrong things okay i want min okay i got it min there's minimum height request which is there right yes yes minimum wide mode 541 okay got it boom and then here these are here okay got it perfect this makes sense perfect okay and then then you're saying you're like oh you can set proportions basically right yes that's on the panes or on the actual not on this page no the pain one length and pain two lengths in the got it so yeah you can set that to one star or you know 50 0.5 oh my gosh look at that or yeah obviously it's just filling the content because this is okay because this is kind of cool because you have um okay so let me let me pull up um i'm gonna this this kind of makes sense what i'm gonna do is i'm gonna go ahead and shut this down and what i wanna do is i'm gonna i'm gonna boot this up on my on this device here so a real device because we're going to use the my cadence as well so i'm going to go in oh my gosh ah okay you can see how much i've used the device so far i know how to i know how to close things maybe go ahead there just flick it away uh and this is it this is my device okay cool so i'm gonna launch it here and then what i need to get is a sensor over here i love testing my cadence because i just have to like actually grab a sensor and i could set default values but i'm like i'm going to do it live because i'm weird anyways i wanted to see this on the device and get it here cool i don't know my resolution's a little low i bet it doesn't have me logged into pro mode for some reason i don't know it should be let me see where's my yeah visor always logs me out of i need to find my code somewhere and something uh oh okay that's not what i wanted to do for it yeah it's a little blurry on the stream but it's readable yeah okay cool so i got pain to pain one it's in dark mode right now which is kind of funny so let me just my app works in in that mode that's good okay so this works so this is cool because actually if you look at my case let me do this i'm gonna now open up my cadence which i should have in my where's it at oh there it is okay perfect so i'm going to close this we're just going to mess around a little bit with it i think craig's already optimized the entire app every time like the team puts out a sample then you like optimize it didn't you optimize like the weather app or whatever yeah i started on the weather app i was doing the calculator one before that um but i do have to get back to the weather app actually all right so i'm gonna do this i'm gonna i actually just updated main let me pull down stuff just so we have it i'm pretty impressed with my my new update i gotta say let me see if i got any sales probably not don't know it's always funny because i'll get the the oh do you want to you know log in or whatever and then i get the thing on my phone and i'm like no it's like do you want to change your password no i don't want to change it didn't actually request anything okay no no no sales did all that work no sales perfect uh okay cool so perfect my cadence okay because let me show you what this looks like so well one this is this is pretty clear over here is that i have a we're going to zoom in at zoom it perfect i have a like ride history page and a ride details page like that's pretty straightforward and then i have this cadence page and like that's pretty um pretty bananas it's like the logic is really fragmented um oh this i had ios as a startup no wonder all right let's let's just see what i just want to launch it and see what happens okay and we're going to first thing i need to do is i need to go into settings i need to turn it so the screen stays on okay and then display and turn off after 30 seconds 30 minutes perfect yeah that's the first change i made yeah go away there we go cool oh that's a new that's a new news uh cool all right so it's launched it's gonna i just pulled it down so i didn't have anything in there but if we look at the cadence page it is a it is uh it's actually really not that complicated it's a it's a grid and it's got some image buttons a label in the middle a big label in the center and on the bottom there's three labels and then there's a stack layout of like stuff basically so there's like some buttons it's actually really not that much there's not a lot happening in here to be honest with you so yeah it's i mean it's 140 lines it's a it's a one number i was joking with frank i was like i'm really good at putting a big number on the screen that's like it's the type of app developer i am is like i can put a number on the screen um that's about it this has bluetooth right yes yeah it's all you've got to get the service buds to like get the full experience can i buy those in the e-company shop get a discount you can all right so all right boom my case look at that app icon beautiful it's a emoji pedal pedal pedal pedal all right cool so i go in here i hit configure so if we look at here i'm assuming the first thing if i do this people can't see it but it's funny because people can't see it there but you could see it on my screen it it's cut off in the middle so you got to pretend that it's cut off in the middle and that's great um i wish that this but you can see imagine you can see this gap right here on the bottom that's where the gap is basically yeah the hinges so people won't use that but that's okay and then we can see if your app is responsive because it see how it kept it so that's how you know because it would kill my app right if it didn't wasn't configured correctly yes all right race not i get that permissions winning i'm gonna spin it up come on you need a wheel some sort of wheel too i know i need frank to no of course i'm assuming that this sensor is still working and the battery's not dead very possible uh it doesn't seem to work i have another one hold on where's the garmin at wait oh there it is it's there it happened all right cool this is a this is a very not great sensor this one this one's like a cheap they're all cheap but this one's really cheap um it's connected it happened all right so now when i launch this thing all right let me do it oh yeah there's a number okay and then i guess there we go all right which i actually this isn't too bad because it does say 92 in the middle uh but you can't even see the stop button that's so great okay so not ideal is what we're seeing here right it's like not an ideal scenario um okay but what we're saying is like if i go in to here the difference is i have these modes right so this is the this is the real winner if i do this uh we'll continue okay so it's going to connect and then now we get a bunch of numbers at the bottom see how small they are they're tiny they're the smallest that's why i also have the ability to make them bigger so i have this screen and then people can bump up the wow look at that um i know so that's cool and then now look how much bigger they are and then i can continue the session oh i think i started a new session oh my gosh so i can like go look at it go it's happening perfect awesome this isn't centered so that really bothers me but that's okay then i can hit stop and go to history wow this is a great app look at this whoa amazing animation i know it's built in i mean we did we built that live here on the stream which is amazing okay so this seems like a good candidate for the thing right like does it seem that you need to basically use two pane view everywhere kind of then uh i don't think so like there's certainly cases where you can just span it and kind of ignore the hinge um you know there's some content like a map for example like if you're in a maps app you kind of don't really care because the custom you can span and zoom and pinch anyway so if the content is able to be moved by the user you generally probably don't need to to worry too much about that because they can take control of their own destiny and adjust their their viewpoint anyway like that's generally what's happening even with the small screen you know they have to pan and zoom around so there are situations where you just kind of provide the content and and let people navigate it themselves but if you're producing like this screen for example yeah you definitely want to move them so there's some on the left and some on the right so that's what this one is kind of an example where i thought that two-pane view layout that you've got running would be good so the top chunk of the screen by default is the big number yeah and the other three can stay on the bottom but when you're spanning it the other three just move over to the other screen okay let's try that out let's try that out first so let's do i'm gonna do uh and so then you get it you should just be able to wrap like those controls right you know can you make turn that into two grids and then put the two pane view around it so yeah just uh actually like you were gonna yeah okay so let's try that out i'm gonna say manage nugets here i mean famous last words but you know it should work and then let's see what let's see what version of xamarin forms i have installed i think i have the latest i'm like 99 sure you just updated it like two weeks ago right it's definitely it's definitely not the latest look at that so that's okay i'm on 2 212 so i did update it but i didn't update it to that one for some reason um but let's just but we can just go back in time because these versions align and then we're good to go okay and then i need to go i need to in it right in it yep use the doubles copy i feel as though craig that it should just tell me to do that right here too yeah i thought that too as we were looking at the page so i've mental noted that for myself too fix that one up okay did it we go into xamarin android app and then let's go into the main activity perfect paste it in there done easy enough okay so what we want to do is yes we want to go in and then grab just this code for now i'm just gonna paste it up here but i see what you're saying oh i see what you're saying is like hey um oh i could just copy and paste this grid and then remove stuff right yeah just put it in pain one and then uh yeah that makes sense and then remove stuff optimize it bingo bango got it okay so we're gonna take this copy go here paste it bring in this puppy one day it'll bring it into the not the end but i think it's a limitation of not this day yeah not this day okay cool so we have that and then we have oh that's cool okay got it so we have grid so we're gonna take this grid paste it in here and then we're going to format the xaml and then we're also going to take it and shove it in this other one but we're going to remove a bunch of stuff basically so in this top one what would be nice is that we can basically leave the settings and the name and the stuff like that up top i think that's fine but we want to do is get rid of the bottom row bottom two rows well do you wanna isn't the button on the bottom road you wanna leave the button on that screen and just get rid of the row above that so today it's a valid question we can move it back anyway so you think the start stop button you mean yeah yeah that's what it was but then the stats would be under it but that'd be okay too i guess hmm good point um move it across you can tweak it later yeah because i guess if they moved it back over to one screen it would just move it correctly but yeah we could try it so let's just yeah as you get into like tweaking the views you might actually use the state of the page to show and hide that you might have two buttons so it's always at the bottom um that's the rabbit hole that you end up in like super enhanced got it for the two screens got it okay cool so then what we're going to do is we're going to get rid of here's auto auto really we have auto i think there's still i don't know how i did this i did it terrible like this is just this is i've keep tweaking it but like okay so yeah um yeah this one does column okay it says column one auto auto fill okay that's fine so we have rotations we have this an ideal world what i would do is i would probably actually figure out how to i'd put these into a if i was doing it right i'd put these into a stack layout and then i would change it based on if it's in this mode put them stack them this way elsewhere yeah horizontal yeah that's if i was doing it right but i'm not so so we need to get rid of a few rows here so this would be row easy zero zero zero and then one boom and now if i just run this it's going to look completely incorrect still probably because i haven't changed any of the defaults of the two pane view stuff right it'll be side by side until you bring over that um perfect min width thing so everyone's very silently following along which is great so yeah questions have dried up yeah there are any questions let us know i also we're just we're now we're now we're in the code session because i think the first half was like understanding like what is in there do i need to install tick tock i just installed this tic tac i like this you can group these apps together i would group my cadence and youtube together that's probably what i would do yeah perfect yeah that's what i do on my on my ipad outside and i have it one like one two three four or two thirds and one third basically on the ipad but like if i was on this some people might they a lot of people cycle and they have the screen the tv in front of them so if they did have a duo i'm thinking like if you did have a duo or a lap or something else you could get this better enhanced view because you don't need even a bigger number on your screen because you have a tablet you actually just need the other things to be bigger and that's that was some of the main feedback that i got from people is that they wanted um bigger they just wanted the a lot of the numbers and the things to be bigger in general so um okay it's doing stuff it's found the device con yeah that was real slick while this is going to just play some music there we go i can't hear the music but i can and you can okay there we go okay so we have the app all right so let's just okay so now we're in that's great okay so now we're in this great split screen view which funny enough okay so let's stop is one that looks terrible but if i span it it's actually like now it's a little it's it's not good it's not what we wanted but it's getting closer to what we want it's more readable at least there's nothing stuck behind the hinge correct yes okay cool so what we'd want to do now though is we want to go back to the single boom and then we want to use the power of the hot reloads and we want to go here and say uh what are we doing again we're doing min no yeah i'm in wide mode width i think equals 541 say okay so then we have wide mode i'm just bonus but you can see my computer right yes okay okay 541 a magical number that's just the duo it's the duo yeah screen i'm indeed there are not many phones that are that wide like the duo is pretty squat in terms of its aspect ratio um so yeah your mileage may vary for what is a good number for that okay all right so so far i have this oh and it's because i didn't do i needed you want pain one height and pain too high yeah and one length length yes my back pain pain to length auto save now i love hot reload that did that work oh dude boom look at that it's pretty close to your old ua ui yeah now that's pretty cool because now if i do this we're getting closer basically what we'd want to do is probably [Music] it's an internet interesting conundrum yeah you want that to be on the bottom i guess or maybe scented i don't know yeah which yeah you'd probably yeah i think you'd want to do here easily enough how do i make this sticky on top that's what i really want to do come here the settings and i want to do always on top perfect thank you does that work yes okay cool and then what i want to do is i want to do uh probably vertical option center the whole thing and then now that's there that's or better yet or better yet what we'd actually want to do is not adjust that we probably want to say vertical option center and then center center this would be let's fill fill and expand maybe like end and end i don't know i don't know how does this work background color yeah i was going to say are they still in the grid like the grid is only up the top there right yeah so i need to say like hey fill the whole thing maybe not oh i bet i need to do this which is center and expand ah that expanding maybe maybe not oh oh i know what i need to do yes oh there we go so it's not even that that that makes that makes more sense yeah there yeah in an ideal world if we were doing this correct i would do we would do this if we do it right we're just now we're just now we're just coding now craig we're coding together we would actually have two stack layouts and we'd use um we just use the default and what we'd actually do is we'd only have we'd have zero column definitions and then we would have the row and then we'd have i don't even think i need that yeah and this would be so this would be start that's correct and this would be oh yeah see then this would be vertical options center horizontal options fill and expand just it's probably the default but then we don't need the vertical options because this thing is going to be in there and then same thing here code and code encoding and uh almost um that's almost correct um oh i think i did there are is there there's no three columns on one column okay oh wait they're inside the stack there now they're right yeah yeah so it could be that these are being now could be though say yes continue it could be that because i deleted them and re-added them maybe they're not showing up no interesting okay let me reboot it maybe um grid oh i'm no that's correct this should be correct there's two rows this is the top row okay let's try it again it may have been because like i removed it and then added it again maybe because you know i'm updating these via names in the code behind instead of data binding because yeah james uh because i finished this app people in one week you can read about on my blog um craig you can look at the code you can be like wow that's gross code and it is so okay let's see if this works also this is how i did did test it by the way when i was using my iphone just sitting here with this stupid thing alright cool so now it's going hey something's happening all right that that's great uh let's fix this because now they're showing up um okay so horizontal start center end right and then exactly orientation is vertical right yes yes you're a genius yeah that's smart yes and then you want filled yeah there we go i'm good at that zama yo okay cool now let's see what happens i'm very scared hey amazing wow now here's here's what's amazing about this so far is that if i was just to deploy this today every user would have the same exact experience you know what i mean like if they're on a single screen display but my dual screen users would already have a little bit better of an experience because they could adjust this now the the key is to stack these correct when in this mode because what i'd want to do is i'd want to say vertical and then what i would want them to actually be is center center center center yep like this pretty much and then what i should actually do is make it oh i didn't have my screen on the screen but i have a way of this is uh it's almost at max i should probably make this so they can make it even bigger dang it i just rolled out this update um oh that's way too small so let's say it's just mega but even still oh what's going on here okay cool so that's cool this will adjust it oh i know what i could do is i could make it so if it is in this mode increase the fonts even a little bit more you know what i mean yep which is kind of cool so this is kind of cool and you're right i could put this over here and let's get rid of that red and let's go back to where we're at because right now we're at this like this and then this would be x colon name oh if i got rid of this center and expand so this will be um pro metrics uh stack and the cool part is if they're not in pro i could say upgrade to pro to get metrics here you know what i mean like because these wouldn't show up at all and i could actually program it pro programmatically put that in there too um but we'll just you know we'll just imagine if they don't have pro that just the start and stop button are on like one side which is great um okay cool so now the question is craig how do i how do i how do i detect these changes how do i do this so i just linked you another link that's going to like blow your mind again it can't be linked but the dual screen the two pane view uh also supports triggers on visual states so you can actually set up a trigger for uh when it's spanned from single pane to two pane and so you can set your properties right there whoa all right i've never used triggers before so i'm ready to learn triggers wait i thought you were going to teach me how to use triggers i don't know how to use triggers um state managers and triggers always confuse me oh there's a spanning that's what i would want right yeah yeah i think you want the um because you're not actually changing the span mode or the tall or the white mode you're actually only interested if the thing is on one screen or two screens right so um you can set that span mode and change those or alternatively you know there is an event a layout changed event so you could go into the code behind and do the 2.view dot layout changed and listen for that and just manually check the mode and switch like you know all of the properties that you want which if there's a lot of them might actually be neater than trying to use the triggers so that's true but i i have i have there's these um groups i i know that there's this thing it's called like grouped triggers though um there's a it's a new thing uh a newer thing how do i search there's a search button triggers um oh that's that is not helpful at all it searches all of them um there's not that many blog posts let's just go back forever so there was there was a thing that came out in i'm going to search the docs the docs will be better let's open this again because there's triggers and there is a new thing called multi-triggers right no rings about is that what i want yes see look at this it says when multi-trick is that what i want no that's not what i want no it's like um maybe that's not what i want data triggers property triggers is this thing a trigger it's a visual state no i want visual state visual state yeah somebody held me in the chat state visual state manager um no there's a thing here we go set state on multiple elements so what you can do is you can say yeah see visual group common states normal press and then you say see you're saying visual setters scale this thing to eight and then on those other ones set these values so this is what i think we would want is can you combine these two visual state group visual state i know i know um this is like it's sad because i'm just like i don't know how any of this stuff works um and the only person that does is like javier so this one is like yeah this is saying like oh normal do this but i think what we want is like there's not spanned and then spanned and tall so i think it would be like something like this and i think it would be like here let me open this up again because this would be really cool for if this did work there's not span spanned and tall not spam spam oh i don't know i might have to do it this way i don't know maybe this doesn't work triggers man i don't know how to code this is beyond me craig i'm now i'm just confused we need to do we should have done live share and we could have like been like typing into the same i could i could give it to you i have the button here we go sharing people it's happening but because that would be the ideal scenario also we'd have to adjust all of these you know what i mean but let me let me do this yeah you just want what do you actually want to change though because yeah you just want to do setup you just want to do property setters for those don't you just oh you want the stack layout to go from vertical to horizontal orientation yeah and you want the alignment to be sent center center centered or left center right yeah for our start center yeah so i think what we would do is we would come in and we would say all right well if it's not spanned because this is the trigger for this and then it's saying on orientation and then do we want tall to be that way too or no probably because tall is just like portrait but taller okay and then we would want let's just see if this works so we just tap this in there yeah and then you can link the background color ones in too and we can play oh yeah that's probably smarter actually okay i just do this because you can do multiple because you're setting multiple things yeah my question is i think that sometimes like this stuff like does this break the heart reload no hmm i don't know hot reload's generally pretty good for me horizontal so i go here let's see if it works [Music] may not have do i need to trigger these do i need to set these no the triggers are doing them hey how's it going thanks for the follow all right let me let me reboot it let me reboot it did you get the live share to work oh wait i didn't see the link come on i sent you one yeah i see it see if it works opening we shall see we shall see oh i get a little bit of feedback what could possibly go wrong okay so now we're here okay so it actually did set the back oh this is kind of cool because now it did set the background color and now it's green so that's kind of cool actually that that that so now it is i think that the hot reload had like a problem with that right so it is doing it it is doing it okay so i'm going to start here we go okay cool and then do this wow cool all right mostly working you just need to figure out that orientation there yeah because i think what i would want to be able to do is can i set a visual state setter on another another one you know what i mean like that's that's the that's what i would kind of want to do is like can i do this i think i can by the way i think i can come in here and now say it wouldn't be on the entry but it would be on let me just let me just minimize a few things here so we would do is we would say get rid of this here okay cool this i put on the bottom interesting so what i could say is on label rotations label time label average which is this would be label dot uh horizontal options center and expand like this and what we would want to do is we'd want to say if this is in not spanned we would want to leave it in label time label average we should actually make this yeah so this would be start end thickness and ideally in the other modes which we need to test which would be spanned and tall is tall mode where it's on the top and the bottom or no yeah it may be told you want to leave leave alone the default yeah like you want it to be across the bottom yeah so no no not expanding we're going to rotate the device i think yeah check it out but yeah and this one yeah we want to say oh i think it's what we have yeah we do we we we do and yes and we change the orientation to vertical well this one's vertical for the span yeah yeah and for tall that would be okay too i think yeah i think it's i don't know actually what the best is for that i can even do it and see yeah all right let me read let me reload this here do i zwift bill asks i do not zwift no i have an indoor i want to find you my blog i have an indoor spin bike um just having 400 i have a i i do spin classes so i'm more of a spin class person myself so i have a sunny bike and a doge um here that has like sensors on it and looks like this and this is where i put my my cadence app or peloton app or apple fitness plus apple fitness plus doesn't read back the the cadence sensor at all but you know um the other ones do so ooh okay this element is not in the name scope so maybe i can't do what i just wanted to do um which one i think it broke on this thing you should have done it interesting i was hoping that it would and maybe the thing that i just wanted to do didn't work then i was hoping i could do this because i can do target name oh you know what i bet if i do this and i move it up to oh you think it's the grid uh right if i move it here and then what i would need to do is i need to give these names or i would say or this one would need a name x calling name we do have a lot of friends by our pierce he uh he also zwifts as well and other people swift i don't know i i write outside for fun and ride inside for exercise and outside for exercise but i'm not a competitive cyclist at all so i'm not a zwifter i like the actual spin and the music and all the stuff so i'll say uh stats stack panel and this we would then say target type target name this target name like this and this oh no that's correct label.org and then i think i got to do stack panel dot maybe i don't i don't actually know like how deep you need to go on those but hard to say because this would be nice right because you could be like put on the whole page or something like that for for your entire app right otherwise yeah you're embedding lots of them under all the things that you wanna i think that was the idea let's run it again because if i run if i read this so set state on multiple in the previous examples visual states were attached to and operate on single elements however it's also possible to create visual states that are attached to a single element but the set properties on other elements within the same scope this avoids having to repeat visual states on the same element the states operate on the question is what is the scope yeah i'm assuming it's like you said the grid and its children yeah this is weird though because it's like the button and then the button is setting the entry which is above it it's kind of weird although to this run did it crash stack panel ooh interesting oh stack layout oh my oops that's hilarious did you get the live show to work did it work oh you're here great time just starting to so i'm waiting it's happening it's happening if this word is amazing okay so we got let's see if it starts and we can wrap this up because it's friday got weekend plans probably running yes running and i just picked like another three kilograms of tomatoes so we're gonna have to figure out something to do with those send them up here um i would love i just snuck across the border i think you just gotta make more and more um you know cheese cheese and tomato plates yeah that has happened a lot all right this did not work the element is not in the name scope hmm interesting okay so i'm not sure i don't know i'm kind of curious i wonder if i wonder which one is well it's hard oh failing gotta do it again but i'm curious maybe i need to put it in like i don't know let me look at the sample one more time this is a visual state manager it's inside the button i wonder if i can put it like can i put it like inside of this label you know what i mean because i guess i did it i had it inside i don't know i'm trying to get to debug on it's building let's see yeah just like i don't know because i thought that like the idea was like you could put on the whole page because that would be kind of cool it's like set at the page level and then go from there we'll see where this throws an exception though that's cool bend right there come on nope it still didn't work it doesn't say um let me see view details uh find but by name but which one uh let's see exception exception this element i can tell me what element maybe you put the manager on page and groups in layout scope that's a good question fine by name it doesn't say what the name is sometimes if i just let it crash it'll do it i'm assuming dave bridge wrote this okay so this says if i can find it all right here it is the element is not in the name scope doesn't say what element no clue just guess it yeah good question all right so let's try one other thing it's weird though because it's like it definitely is right label rotations label average oh i wonder if it like i don't know maybe i was put on the whole screen the whole page the whole page got visual state no i don't know let's try it yep this should work this should do it i would think because you should be able to have like visual states on the entire page and then you could change the background color of the page or something like that yeah in an ideal world yes like just using the regular set of property syntax so the target name now just needs to be able to find to find it oh there we go okay that definitely worked oh cool so that that actually is a better example to put into the dual screen sample um yes we're learning we're doing stuff okay we're rotating [Music] all right moment of truth wow nice that's great i think that's like and then the question will be no code the question is i'm going to rotate the device almost that didn't work out we wanted yet oh wait what's so that's the yellow wait where is the that's the yellow oh but they're there right they're just like so you want them stacked on this view as well you're saying i think so yeah right you'd want that's the tall mode so you definitely want that yeah my bad i was thinking it would still make sense but that would be the wide mode and then i yeah it's i think here see it doesn't know how to do it you got to reboot the triggers right yeah i'm going to keep it in this mode because then what we want to make sure is that if we bring it up to the the question now will be what does it look like in landscape mode well it's in theory it'll be side by side still because we definitely do we want that it might look okay let's see oh it's gonna yeah tell us here in a second find out well after you spin interesting yes that's definitely not what i want what i don't think so okay let's see yeah because now it's red which means it's going to put it in this mode yeah that's not correct so okay right so because it's single pane but yeah yeah so we would want do we want to change this then somehow um because we want to say like if in wide mode well you could use the same triggers to do something with the lengths maybe [Music] [Music] interesting but yeah the trigger is single pane trigger is single single pane because that's why it's like you know horizontal in the red so you know which trigger is getting triggered that's true definitely it's this one but it also is this way and this one is correct yes yeah yes interesting so we need to target that specific landscape single screen view so this looks good in this mode this looks good in this mode then we need to stay in the yellow mode and also i think you copied and pasted the green over the yellow i did that is correct yeah but that still looks good yeah i think so because i think it just lines it up easily because you're probably gonna like have it folded in like a book or not like a book mode but some other mode so now the only thing we need to really do is figure out how to move this up here and then make this not split this is the last mode yes yes because it's not spanned correct um single pane and this is saying to set it that way but i think it comes down to this right or no it's so yeah the two lengths are being set by star and auto but here what we really want is we want this to be um i don't know actually because if i was to set this back to now we're in wide mode right left right if we said it's a single pane it's going to not show those yeah so what we'd want is hmm oh i wonder is there is a different span modes single pane okay there's just the three modes so there's three modes yeah but i see what you're saying is you're saying like there should be a way to say yeah within this how can we keep the portrait behavior but tweak this one yeah hmm hmm that's the only question because everything else is looking great this is like the last conundrum basically because here yeah that's what's forcing that's what's letting it show actually if you set that to 760 [Music] oh wait what's that because this way that's this wouldn't be this wouldn't be so bad if we could make this you know what i mean like do you know what i mean like what would be nice is if i could set the pane length two and then make this stack the other way right like in this mode change it so it's 50 50 which would be cool because this would really optimize it for tablets as well if you're in pro mode at least yep if you're not in pro mode you're gonna be like what the heck is going on but this might be the situation where the situation might be craig which is like you actually have a single pane for this mode in this mode and then you actually light it up for the other mode yeah could be because you're saying what did you want me to stuff too 600 i was trying to figure out what if there would be a value that would make sense there but i'm not sure it does because you want them to be on top of the other in the other in portrait so you kind of need that setting to trigger that behavior [Music] i'm just trying to think of a way that we can we can do all this in xaml without having to resort to like some sort of layout changed handler that checks the orientation and does something different for portrait and landscape which would be something he could do but someone's saying bill is saying wasn't it wasn't it vertical instead of tall um in the tall mode which is this it is i don't know this isn't tall mode tall mode is this and spanned this is tall because that's tall right so that's green and then wide spanned and so this is kind of weird because this is like these just have names on the visual states doesn't actually mean anything yeah yeah but this is just saying when this thing goes into tall mode then do this when it goes into wide mode but what also is happening is it's saying that wide mode is also this basically um wait is it because isn't wide mode red i mean green oh yeah you're right like it's doing the it's doing the not this is the not spanned visual state oh yeah that's right it's that one so tap it it's using that state for both portrait and landscape on single screen yes and that's the problem it's using the same one for both orientation so you need either another visual state group that's tracking orientation or some other way of detecting this state for a single screen yeah that's what aiden was saying could you use a multi-trigger with an orientation trigger right probably triggers adaptive trigger use it for landscape or portrait mode that's actually not too bad so this is saying on this how does it know if it's portrait or landscape size there's like a size changed thing that we would need to set basically yeah on it and we do it on the page so what you'd want to do is i see orientation states and you would have landscape portrait interesting so you really need to do because you'd have another state that you trigger that puts it into landscape mode the question is landscape mode in that regard too interesting yeah could you have two single pane states yes one's orientation landscape and one's orientation portrait yeah and in that regard what you'd want to do is well i don't know well i think you just make that red put them vertical the same as they are yeah and it's probably good enough yeah and put the width back to star and auto so that you get the right behavior on the vertical correct yeah like this it needs to be star star and there needs to be auto auto or whatever yeah that makes sense because this doesn't make sense here but it does make sense yeah but if those were if that was vertical and start center end yeah it might be fine so you just need to add that orientation trigger and have those have two states for single pain single pain portrait single pain landscape i see what you're saying doing the multi trigger that aiden suggested so you would do a visual state of this and then here would you do a oh he's got documentation oh my gosh orientation state trigger oh my gosh oh there is one so yeah where is the format for the multi-trigger oh yeah i think you just put multiple triggers in here so here you would do a orientation state trigger look at that wow it literally is just there is there like a state there's an orientation there's a mode what is the thing what is it orientation okay because i think it's just what is it i don't see it try states that's what i thought no all right so let me let me know yeah i'm just gonna do let me just google this uh let's see if this is in here orientation state trigger oh orientation portrait orientation landscape i don't know why it's not coming up though interesting so what it would do is i'm so confused on how this will work so you would like clone you get rid of this yeah give her that you do and and then this would be orientee i don't know it's not working right oh okay interesting landscape okay the autocomplete comes up but then this other one alright cool so you do this here portrait okay so then what we would do is we would do the green oh it's mad at me visual sims must be unique it is unique take this here and then you i guess we also need to do the let's just see if this recompiles or not i think actually i didn't know that these orientation states work it's funny enough because i i've always wanted to do the left right and i was gonna change the grid and all the other stuff to make it work but the two paintings seems to make it work better the question is is it's gonna work how i think it's gonna work which is like it's basically saying like hey if this is in single pane and landscape and single pane portrait than do this yeah honestly don't know but we're about to find out yeah i was gonna throw an exception no i did it okay so let's start it wave your arm wave your arm okay it's there perfect and stop start all right so this spanned that works oh no it didn't work don't know it went back to the other one maybe i need to put what about yeah let's see this nope so that that mode worked am i doing it wrong orientations and setting up stuff bill are always the fine tuning and optimization is already a pain you're always a pain basically oh did i mess something up no auto okay that's correct according to post you have to enable multi triggers in the multi triggers okay i didn't read the documentation okay so let me read the multi triggers um what multi-triggers multi-trigger conditions man triggers okay event triggers um control to declare your control only it's only doing the first trigger still so it's only checking window span mode state yeah finding condition i see it's on it's on a target type oh this is setting up yeah we don't need that because we already have the state yeah we already have the state well that's a funny thing too is there's state trailer state triggers the question is is it that accurate that they're both maybe i need to flip them around say check those first check the or the portrait first i don't know it can't be right i gotta ask the tamron forms team basically how does this work but it it should work cause this is the trigger and then it should check both of them i would think that like hey when either of these occur check both states to see if they're accurate or not or is it like when either of these occur then do this i would expect that to be true i think that's what it is so i think the thing is it's in landscape mode so it's going in here and making this actually this did this just work no that can't have maybe it worked it's kind of what we're going for because i haven't it's still auto or whatever right so so the question is if i do this [Music] i'm going to do it i'm going to do it on the device because it'll be okay so that uh oh i need to actually i was like oh it only has one number let me just keep spinning keep spinning oh now it's mad at me maybe i didn't disconnect it properly there we go oh how come the other numbers aren't up there oh there it goes okay so this is in the right this is correct all right so then right that's correct that's correct because we haven't done the auto auto or whatever no that's not correct dang it no we want it to be very cool yeah yeah so it's still not so the multi-trigger thing is not working as we thought now all right this might be for another day because now it's all messed up so interesting there's a way to do it there's a way to do it because here now i think now it's like oh this is in landscape so make it i don't know no it's in portrait maybe so maybe it's confused on what it's doing so i don't think it's what we wanted i don't think we want this yeah i don't think but there's probably a there's probably a i should really make this other mode yellow again just so we can really see it just to be sure the tall note is tall i think the only thing that i can think about is basically making it so when you're in single pane view make it only single page view pane view you know what i mean like when you're not spanned set it to not left right or top bottom right and then i just have the other stuff in there i mean i don't think that's the actual way to do it but yeah you could do that um that's the other thing you can do is like hide and show different things different things so you can have a control on both views and then have them have the trigger to hide and show one of them then you need to buy into both but it would give you the behavior you want because here this is correct this is yellow that's good it's just that last one yeah i bet shane would know 100 maybe i'll do an update to it but i'm going to create a branch over here you can follow along if you are because this is close we're so close on it in general but really what i'd want this to be and there's not a mode for this this is the thing when you're in when you're in landscape you can only be left and right you can't be top bottom right yep that's a problem is what i really want on the two pane view is like hey i'm in landscape i'm in wide mode you could make it top bottom it would just um can i make this top bottom right now yes because you've got um the the thing that's pushing it is probably the min wide mode width so if you made that a thousand and the min tall mode height to be much smaller or remove it see what you can do you can can you edit it i'm not even sure oh my gosh 10 1000 save i think i have to save oh my gosh and we're done that might do it so go back to yeah rotate and just see if that's the way we want to make sure it works on all the other states so that's correct yep all right i'm so scared oh my gosh all right oh okay hands off the keyboard [Music] we did it now are you are you thinking that with live share we fixed it do you think that we could just remove this 10 or what yeah yeah i think probably um so what did we just change do you want to explain what just happened so yeah that min wide mode is all about it's about the top view it needs to be at least that wide before the second view can appear next to it right and if it can't be that wide it'll go under it and if it's also too tall it'll get pushed off the bottom underneath but the whole like the whole idea of two pane view is this layout system where it tries to show the first one in the top left and the second one will somehow appear next to it or under it based on all of these variables that we can change and then if you've got a wide screen or as a foldable display it uses the fold as a overriding divider and so then it forces them to be side by side so that's kind of the the gist of it and so those min widths just are one of the adjustments that you can make to force it to go side by side or underneath and then the lengths are also uh variables that you have access to to force the layout when they are side by side or underneath so we've kind of tweaked a little bit of both of those to get this layout so the way it does bill's asking what's the default do we even need this value no so the the default's always going to be 50 50. got it like that it's always going to be 50 50 and it's modified by the length being star or auto right because have been filling the con filling the space versus fitting the content so yeah if you delete all of this stuff it'll be defaulting to 50 50 all the time but the modes the lengths uh star and auto all have different effects on how it tries to wrap or fill or expand cool so yeah it's very important control but if there's a lot there and so someone mentioned in the chat you do end up tweaking a lot when you're doing front end work yeah and this is and this is a a little bit of a tricky ui because in an ideal world like i have different information and pain too where i'm that may not be visible unless i'm spanned or whatever i hide it when i go into uh the next one in general so like i'm thinking about the next part would be how do we optimize this view basically so when i tap on it it goes to you know if it's if it's spanned for example it would show up you know i don't have to navigate back and forth basically yeah but yeah i think that will be like if you check out that learn course i sent back that really talks about if you've got two content pages yeah you basically take the second one you make it a view yeah then you put it the view in a two view and then you have the second content page the view is in there as well and then you use one or the other of those two things depending on whether you're on one or two screens so you have that reusable view that can appear next to the list or it can appear on its own like in a navigation stack so you effectively reuse that chart control but you have it in a reusable view so that it can be in two places now the the key here is like if i set this to you know 541 which is what we had it at where now it's side by side the the main difference in the main key is that it would look better if we figured out how to do this because if you were on a tablet then it would show them side by side yeah ultimately i think we need to get that multi trigger sorted out or add our own layout handler in the code behind to make some specific decisions for that last layout like to tweak it and i get a little bit more ingrained and here i can set it to this hundred thousand or you know hundred thousand it'll never do it because there's no device that big um not even a tv right so so this is my because here's the thing that i just wanted to kind of show people too is what i did is this is my current view this is my current app and in for all intents and purposes here when i do this the current experience for the user is exactly the same but when i'm on a duo or a dual screen device and i go to span it right we're going to get this experience where it's super nice when i'm in pro mode and also if i'm not in pro mode it's not going to cut off the numbers that's also the bonus of of doing that now no one would do that probably and they'd have it side by side now now this version that i have here craig before we wrap up the the current version only has the dual screen for duo support it's not going to do much on so i can have any impact if i'm on like a uh unfoldable right correct so your your iphone and your normal android phone are going to get the same experience that you already have like this red bar the way it goes and because of the size that you put on min width it's actually going to be the same on tablets too okay would be the the point at which you could maybe do some tweaking and have the tablets get a tablet like experience yeah that makes sense and that'd be the next thing for me to test is actually put this on a tablet emulator or on my android tablet and start tweaking those a little bit here and there now that we know that yes cool all right let's pull this a wire book sorry dad all right we did it craig you spent like three hours with me that's a lot of time it's a lot of fun good i'm glad you had fun i had fun too i can't believe we got it working that's bananas i mean i'm happy with the current state and now i can do a blog post on the surface duo blog about my app and then get yeah definitely free self promotion it's very cool like it actually wasn't too hard you know once we got the xaml figured out and the triggers figured out it was you know kind of cool that we can do it all in markup yeah that's crazy that's awesome all right well thanks everyone thanks craig for your time this actually worked for you so i mean i know it's not working i'm pretty sure you're gonna report this on the next thing right it's gonna be a thing yeah okay as long as kevin gallo sees this perfect all right cool all right well thanks craig for hanging out thanks for everyone for hanging out in the chat i'm glad that we got it going this will also go live later on my youtube next week we'll put it out there with the dual screen stuff and i'll take a screenshot of this puppy and get it up there very excited and then i just gotta work on an app update get it into the app store done easy-peasy but i'm going to create a branch um this isn't public source so maybe for the blog post i have to do that then there's not no pr territory information in here at all but i should do that all right well craig thanks for joining me i'm going to go on the uh thanks for watching screen but then you can't talk because everyone would still hear you so i'll let you know it's clear and then we can just hang out and talk thanks everyone for hanging out i will talk to you all later um and have a good one bye-bye have a good weekend oh i hit the go live button i hit the end button all right bye you

Channel: James Montemagno

Views: 980

Keywords: surface duo, duo dev, dual screen dev, twopaneview, dualscreeninfo, xamarin.forms, xamarin, ios, android, foldables, visual studio

Id: vHGjuqVGAbY

Length: 153min 21sec (9201 seconds)

Published: Tue Sep 14 2021