ArcGIS Pro SDK for .NET: UI Design and MVVM

all right welcome thank you for joining us for arcgis pro sdk for dotnet UI design and mvvm my name is Wolfgang Kaiser here's my Hirano with me we we are both working with the pro sdk team out of Redlands California and as you aware you can use geo net if you have any questions when you work with a pro sdk and we are usually answering your questions virtually immediately right yes yes so so a quick session overview here before we go into the user interface and mvvm we'll talk about asynchronous programming we give you an introduction to queue tasks explain about that a little bit later the use of a sink and a weight authoring custom asynchronous functions then we'll give you overview of mvvm model view viewmodel we show you by example using a doc pane we show you how specifically the view and the view model implementation is done in pro and then finally we show you how to hook commands then we have a few new framework elements that came out in archaea Sproule released 1.4 and uma is gonna show us some of those and then last you'll see the gallery plug-in one of the the new framework elements that are fairly impressive and useful so two asynchronous programming as you know arcgis pro is a multi-threaded 64-bit application that's are a big advantage over if you used to use our objects in arcmap we always ran into memory issues those virtually don't exist anymore in pro as long as you have enough physical memory important asynchronous programming patterns for the SDK is the async and a weight pattern I'm going to show you by example shortly how that's being used and then also using the probe frame their works queue tasks and again I'll show you that by example the ArcGIS Pro internal threading model RTS Pro is multi-threaded it incorporates the latest asynchronous language features from Microsoft it implements a threading infrastructure that's tailored to reduce complexity as you can imagine multi-threading is always very complex so we try to make it simple for adding developers you should only need to contend with two threads on one side you have to GUI thread the graphical user interface thread and on the other hand you have a single specialized worker thread that's we refer to as the main synth MCT and you can see there's plenty of acronyms here sim stands for category cartographic Information model so internally RGS Pro uses a large number of threads for rasterizing rendering data loading geoprocessing all this this threading is all isolated from the API so Pro delegates to the internal threads on the api's behalf so this actually simplifies the coding and ensures consistency of the pro state and we'll see that in some examples coming up so we have mainly three categories of methods in RTS Pro we have our coarse-grained asynchronous methods these can be called from any thread then we have finer grained synchronous methods these must be called from within a queue tasks framework and I'll show you that shortly by example and then non API dotnet methods can be called from system threads as you wish so if you have any need for having multiple threads where you perform your own workflows you're free to do so we also have synchronous methods these must be called on the GUI thread only and these type of methods are usually associated with WPF and user interface updates so for example if you say open a project that's one of the calls that is actually asynchronous that's actually synchronous but you have to call it from the user interface thread and clearly there's not much else you can do at this time so now to coarse-grained methods they can be called from any thread typically they are invoked from the UI thread they execute in the background on Pro internal threads and we use the async and await semantics for that and by the way if you're not familiar with async and a weight that's a pattern that's used by the c-sharp language in microsoft.net so you can read up on that and the visual studio compiler needless to say the development environment supports that on a box and I'll show you that in a second as well and then the aggregation of these methods into larger coarse-grained asynchronous method is not encouraged and I'll show you later why that is the case but for the time being just take my word for it below you see two samples first we add a geodatabase to our current project so you can see we have a geodatabase path that's the path to the gdb folder we have an item factory that we use to create an an item and then we add that item asynchronously to the current project and a second sample is to execute a geoprocessing tool and here you see a sample of using the weight semantics so we say geoprocessing execute tool asynchronously and you see a set of parameters are given and then after that call is complete we call zoom to the selection asynchronously and we give it a time span to do so so you'll see that in the sample in a little bit as well and here we go we go for the first sample snippet this is the coarse grain demo so within Visual Studio what I did is I used our templates to to program this piece of code and what I did is I created an add-in from scratch then I added a button - to this add-in and in the onclick method of that button I call this method called coarse grain methods when we go into this method you see there's two calls there is a execute asynchronously geoprocessing task with a set of parameters and then I zoom to the selection asynchronously and this code won't work properly and let's build it real quick so I built a solution I start the solution this will bring up RTS Pro in my debugger here we go I select my sample project and now my button that I programmed earlier is under a tab that's called async course and when I click this button let's see what the code does so you can see it just called a method called core screen method is done however when we look back at the code you notice that I performed the selection here now what happened why didn't it select why didn't it zoom to the selection and why then did it show me the message box immediately well the reason for that is because we didn't utilize the async and await patterns so let's go back to our chess Pro if we zoom out here you actually notice that a selection was performed here's Zurich but because the call was an asynchronous call they assume to didn't work because the selection wasn't completed by the time I called the assumed to function so let's make a few changes to our code so this will work and in this specific case I shouldn't have taken that candy just before the presentation Eva's mistake so let me utilize the away keyword here so what this a weight keyword does it will actually wait for this asynchronous function to return and you see now we get a syntax error it's all underlined because the compiler now complains and it says the weight operator can only be used within an asynchronous method and now it says you have to make this context here asynchronous so what I can do is I can utilize the compiler help and say make the containing scope asynchronous and if you look very closely you notice that all it did is inserted the async keyword into my coarse-grained methods so now I have a synchronous function so the function I'm working on now has itself become asynchronously and will run in the background now let me make this one asynchronous as well great so I wait for the result of the selection as well and now when we run this again let me start the debugger everything should be executed in sequence just as needed so first we should see the selection then we should see the zoom two and then we should see the mesh it's box so let me so I click on the button so here's the selection it was completed now it's zooms to the selection so we should see Switzerland shortly there are Switzerland is Zurich that I selected and then it showed me the message box with a completed message so now what we did is now you say well why does this have to be asynchronous well I programmed my own own asynchronous method here that means when I call on click for my user interface since my method is asynchronous the on click will return immediately it will not wait until all my operations are complete they will operate asynchronously in the background so my user interface is still responsive and that's one of the big advantages when you use ArcGIS Pro so now let's go back to the slides so now here are some fine grained synchronous methods these must be called from within the queue task context there's a much greater number of fine grained methods and classes there is no say async and await semantics here and everything runs on the MCT the main sim thread or the main cartographic information model thread and these methods are designed for aggregation and you can aggregate those into your own coarse-grained asynchronous methods so that's a mouthful but in essence what it means is if you write your business logic and you have a lot of functions where you perform selections spatial operations overlays buffers whatever you want to perform those asynchronously in the background and you want to create your own coarse-grained asynchronous methods for that so your business logic for your spatial business operations where your spatial workflows you would put all this into one method and that's what we're gonna take a look at now it's in the context of a queue tasks run method as you see here from the sample below so in this sample what we do is we find the active parcel layer then we take the first layer so this assumes that I have the correct project open and then I set up queue filter and I specifying the Curie filter and where Clause the fields to return and then I put a performance election on those parcels that fulfill that requirement so what is Q task so the pro frameworks has a custom task scheduler so it's used to run the synchronous arcgis pro sdk methods in the background and all synchronous methods are listed in our api reference in our documentation like this you can see the intellisense this method must be called on the NCT u's queue tossed on one and they all all these methods that have this requirement that they must be run in the cure in the context of cue tossed or run will also throw an exception that tells you that they are running on the wrong thread we'll see that in a second so here's an example of some synchronous methods in pro get spatial reference queue extend set definition that's that's - those are members of the feature layer class and then any kind of geometry operation so for all this you have to utilize the syntax that is specified below in this little code snippet so now let's go to the fine-grained methods and I have a little sample for that so first what I did here is I don't run it as I just specified in the context of my queue tasks so what happens if I built this let me rebuild the solution and I run it it will actually throw an exception run it there we go so this is the fine-grained demo so if I click on it and I step over this you can see it immediately returns and now I have my try-catch to catch the exception and if we look at the exception you can see the method or property must be called on the threat this object was created on so that's a wrong threat exception that I have so this has to be the trigger for me to run this method from in the cop within the context of a queue task so let me uncomment I already have the code snippet right here we uncomment this line and this line here so now you can see the only difference is when you look at my specific code snippet the only difference is I added the await queue tossed or run method around and then if you're not familiar with the syntax this is referred to as a lambda expression I could also reference another method here that I call explicitly some kind of an action method but in my case I just utilize a lambda and then I specified the contents of my my code within that lambda context so now let's run this whole method again and now needless to say I expected to work properly without throwing any exceptions asynchronous and as you can maybe not see is when I click that button you you see while my process was going on I clicked on the on the tab up above and the user interface was still responsive so that's because the async find demo button was executed asynchronously in the background and the user interface returned to me immediately and so it's still responsive so it's one of the big advantages of the multi-threading capabilities in the arcgis pro sdk okay there's one more sample i want to show if you have your own coarse-grained methods what you want to do in these is you usually want to return a value so I have a sample of this let me uncomment this so this is my own coarse grained method down here let's take a quick look going to the definition you can see this method is of a type task which is also what cute askest cute asked one is of type tasks and in this case i say i want to return an integer in this case i want to return the count of features selected so as you can see here i perform a series of operations i assume to my selection and then finally as the last step i return the get selection count the the count of my selection which is an int so this is how you can program your own coarse-grained functions that actually return values and then again this is kind of the basic building stone from which you create your your UI and the responsiveness of your you are in the arcgis pro sdk so you can see everything works in succession and here we go the selection count is one and you notice the selection itself took a little bit to render in the background even soy Dora said selection counter selection was there it just didn't render the render was the rendering was done asynchronously in the background by what's referred to as the MCT the main sin threat okay so so far so good let me close this we're not gonna need this anymore back to the slides so now before we go into the UI design let's talk a little bit about the MVVM pattern and add-ins the mvvm stands for model view viewmodel and variants of the same patterns are the de facto pattern for WPF yet another acronym it's a reduced presentation foundation it's it's kind of the user interface framework that Microsoft uses in dotnet now so mvvm is the de-facto pattern for the Vince there's many frameworks available that support mvvm there's a bunch of homegrown or hand-rolled ones and then there's commercial ones free ones a pro mvvm is build on a product that's called active pro and we have a link here for you if you interested however i'll show you in a second how we utilize it and the basic pattern is we have a view model which is declared in demo demo lists the the markup language that we use in arcgis pro to define our user interface and the view model is declared in the amal and implemented in code and the view is referenced in Dan'l and implemented as a WPF user control so when you see a WF user control that's some if you're not familiar with it some people refer to sam'l because the file extension that's used for WPF user controls is sam'l and the model itself is optional so to customize the pro UI you must use mvvm framework substitutes are really not allowed here so I'll show that in a second how that works so here's the MVVM pattern in add-ins it's used for many framework elements here's just some of them doc pane pane custom controls and better to embeddable controls and property pages and here we go we I'll show you how to create one real quick and utilize Visual Studio I installed the pro SDK on visual studios installs directly from the visual studio gallery so now what I do is I create a new project and if I install RTS Pro SDK on my system I can drill down under visual C sharp or dotnet to ArcGIS and then there's an RTS Pro add-ins option and now one of the options I want to do here is I want to do a module add-in so that's my basic ad and it allows me to change the Pro user interface by adding additional control elements to it so I'm gonna click OK and what it does it creates my my add-in and you can see I talked about the conflict of the demo earlier everything gets stopped out by my templates automatically there's really nothing I have to do by default everything is added to a add in tab and we see that in a second in this case however I want to add a doc pane just to show you how this works so I say add new item and I drill down to ArcGIS RJ's Pro add-ins and I select doc pain so now what the system does it again stops out all the code that I need for a doctor and we're gonna run that in a second I'll show you how this works but first let's take a quick look at the conflict of the mo we can see in the conflict of demo it actually added a button here and the button is called show doc pain one in our case and if we go further down we see here's a doc pain that was added the doc pain has a caption called doc pain one and the doc pain here is linked to a view model class so the class name for the view model oops that didn't work very well is doc pain one view model now when you look at the right side is the template we just used or you stopped out the view model code for us too so when I look at the right side here's my view model dot CS class and there's already a whole bunch of code in there that does the basic operations that I need to do with my dog pain and then finally there's the content which is the view of the doc pane and this is linked to a class called doc pane view and here's the example for this if we double click on this you can see it just loaded in the design are pretty much this is the dog pain it's just a you know empty area with a little title on the top and underneath if you look closely this is the exam oh the the content of the control you can see it it puts some some fillers in there for you when we built this and run it you will see that out of the box you get some built in behavior the reason for that is because the base class that is used for doc panes is a framework doc paying class that implements a whole bunch of behavior on a box so if we take a look at this it adds my new controls under the add in button by default I can change this needless to say but if we click on show doc pane you can see on the right side here's my doc pain that was implemented there's no no content in yet but I can utilize the the basic functionality that comes out of box so I can float this window I can auto hide it I can close it so here I just closed it so very easy utilizing our templates you get most of the basic code that is required for your for your user interface designs out of box okay there's a few multi-threading considerations now if you program in a doc pane in ArcGIS Pro frameworks manage threading model the framework provides the cue tasks to guarantee that all UI actions happen in a sensible order without corruptions and that's very important imagine you have to select items and then you have to render the selection so there has to be a sensible order to that but updating UI collections from a worker thread or from a managed RTS Pro threat requires locking so this is a pattern that's actually standard in in visual studio.net if you work with worker threads you always have to lock shared resources so they will work across threads the recommended pattern for that for updating collections from a worker thread can be found in a visual studio.net binding operations helper class and specifically we talked about the enable collection synchronization function you see a little code snippet below and if you have lists or complicated user interfaces like grids you you will have to know this functionality and utilize it all the time so now let's go to our bookmark demo so what this is is I created a doc pane from from scratch then I added a drop-down list for all the current maps and I added a list control that shows me the current bookmarks that we have in the system and I want to show an image thumbnail for the bookmark and then also the name of the bookmark I'm going to be able to select those bookmarks to zoom to that location so let's take a look at the sample so this is my view that you see up here you can see I added a list control so when I click on this there's a combo box on the bottom here's you have to examine the way mvvm works it's utilized utilizing data binding so if you're familiar with Windows forms WPF mvvm works a little bit different because instead of utilizing events you actually loosely bind to your data properties so the item source says here for my combo box is a property called all maps and then the selected items when I select an item on this combo box is stored in selected map if I go to my list box for my bookmarks you can see very similar to that I have an item source that binds to a collection called bookmarks and then also I have something called a selected item where the selected bookmark is stored as soon as I click on this so let's take a look at the view model because in the view model itself we will have the corresponding properties specifically let's start with a with a constructor of my class and here's something that I talked to earlier where you can see we use the binding operations class to synchronize the collections between the UI because both my collections of here's my Maps collection and here's my bookmarks collection both collections when I update them they are updated on a background worker thread so I have to utilize the enable collection synchronization method from Microsoft and I have to give it this lock collection object but it's just copy and paste so you always do the same here now specifically I want to look at one of the properties in this case my selected bookmark I see how you have a breakpoint here so this is very good so let's build this sample here real quick okay and then we run it in the debugger there we go click on the add in tab now this button here that starts up my shows my dark pane is called show bookmarks so when I click on that you can see on the right side it actually does show my bookmarks and when I click my get Maps button it initializes everything so now I have a list of my maps currently I only have one map but I also have my bookmarks for this map and as soon as I click on one of these the property called selected bookmark that I specified as a binding element in example is been updated by the user interface so the user interface tells me now there is a new value for the bookmark and I should actually be able to look at this new value so if I look at this value and I don't know whether you can read this but very small characters it shows home so the current selected bookmark that I have is home so now what I do here is in this code I a synchronous zoom to the selected bookmark and it did it did soom to this area so if I want to zoom to Oahu in Hawaii then this should be wahoo so if I continue so you can see here it's zoom to Oahu so the binding allows us to link the graphical user interface that's defined in my WPF control to my code behind that's defined in my view model if we take another quick look at example here we can also see I have a button defined this is a very standard a very standard WPF button with some code behind and when I implement a button in mvvm let me scroll to this button method what I can do is instead of implemented an on-click callback method like into I do in WPA in Windows forms I can actually bind it to a command property in my code behind class and that command property has to implement something called an I command and I command has two properties it has an action routine and it has a true/false enabled property and I'll show you in a second how we utilize this so let's stop the sample here so a lot of times when you use RTS Pro and you define your own user interface like a doc pane or your own workflows you want to utilize existing Pro functionality so there's a button somewhere that you want to utilize is function but you you don't want to write your own code so to get any Pro controls i command for example like you can use it in your ad and using the frameworks get plucking wrapper method and the following examples below shows you how to do this so you can see in the first method here I retrieve first the I command for a create put bookmark button and then I use the framework application get plug-in wrapper method to retrieve the I command from that plug-in and clearly I have to do some error checking here make sure that the I command is not now and then if it gets returned to me I have two methods here I can do can I execute this returns true or false and then if I can execute it then I can actually call execute which does the code-behind when I click that button so here are more ways how you can add a button to your dog pain the example here shows you how to use the close RTS Pro command and put it in your dog pain and a little bit below you can see how you can do a fixed zoom in relay command is an implementation of I command which lets you specify your own implementation of execute and can execute so if you want to overwrite building functionality then you can do that by using relay command so now let's take a look real quick at our sample what I want to do here is I want to add one additional function or what that allows me to create an additional bookmark and I can just do this simply by an abling a little code snippet I have on the on the bottom so here's my new bookmark button that I just added to the very bottom of my dog pane it is bound to a new bookmark command so needless to say I don't want to write that new bookmark functionality myself so if I look at the constructor of my view model you can see that my new bookmark command gets initialized using the get plugin wrapper method I have the unique ID for that specific plug-in and I return it as an I command so now if I built this and I run this sample you can see with very little effort I just added additional functionality to my dog pane utilizing existing code from our GS Pro so here we go show bookmarks let me get my maps so here's the new bookmark button right here so if I click on this and well I guess I want to zoom somewhere else so if I click here and I say this is my pawned bookmark and I guess my refresh code is not working properly but now you can see with a little bit help you can see the pawned bookmark is here available as well so very little code hooking a pro command allows you to quickly improve your functionality of your workflows alright so now we're looking at framework elements and uma is gonna show us about framework elements Thank You Wulf let's talk about framework elements and pro the list in this slide gives you a collection of all the framework elements provided by pro they are all extensibility points in an add-in that you can use in your development the all these framework elements and their attributes they get defined in your configure demo as Wolff mentioned you can see a code snippet here for that an important thing to remember is you can use an add-in to alter or modify functionality in another add-in so your Adhan could pretty much just inject a new button into a tab group of another atom so the pro SDK offers visual studio item templates for pretty much all those framework elements that we talked about it's a good starting point with your code behind files config definition and zama files so here I want to talk about and focus on a few new framework elements that we've provided for you at one for it's the Berger button circular animation message label a search text box in a waiting cursor these elements they provide an extra polish to your UI development work so if you have to use any of these elements be sure to add a reference to the ArcGIS desktop framework controls namespace I've given that in the snippet below in this light oh here I want to focus just a minute on the Berger button because it has a little extra implementation details a Berger button is pretty much a context menu you define it in demo that's the foot first code snippet over here in this case this burger button it has two buttons linked to it outline button and a gallery button we'll see this in a demo shortly and then the next step is you bind an instance of this context menu to the pop-up menu attribute of your burger button in your zamo it's quite a mouthful but we will see this in the devil and the last bit you implement your two context menu buttons using the frameworks button class on click method so let's go ahead and add these controls and see exactly how they work so here I have Pro open here this is the exact same bookmark doc pain that Wolfe just showed I have added these new framework elements to this doc pain I have added something called a burger button a search text box circular animation and a message label so if you see on the top right hand corner over here this is your burger button it's pretty much just a menu for settings and other advanced features so if I hover over it you can see that it has a tooltip it says change the view so now I'm gonna click on this I'm gonna I see I press it with two options you can see outline and gallery so first I think I'm going to disable a few breakpoints oh good I've already done that okay so I'm gonna click on the outline context menu and you can see that I am I can see my list box with the bookmarks in an outline view now I can switch it back to the gallery view using the gallery option so now I'm going to go back to my code to see how I implemented that so this is the same solution that Wolfe was working on I have this is my config demo notice that I have defined a menu element within the menus group this is my context menu this is my Berger button you can see that it has a reference to two buttons within its menu the outline button and the gallery button so next this is the view of my dog pane this is where I've defined my list box so now if you scroll down you can see that I've defined my Berger button right here so notice that the pop-up menu attribute of the Berger button it's has a binding to the context menu and it has a tooltip that said change views so now how did I implement that so if you scroll up if you're familiar with WPF there I've created two data templates a gallery view and a ListView all it is is really it's defining the UI experience what is a gallery view it has a thumbnail it has a little tooltip and a text and over here this is another data template that defines the ListView of the exact same list box containing the bookmarks so once I've defined the two data templates now that last step I go into my list box that contains all the bookmarks and I've implemented a very simple WPF data trigger what it has is it has a binding to a bookmarks view type property so when you click on that button and you say outline the this property the book Mark's view type is set to list and I am displaying a list template and when it's set to gallery it's displaying a gallery template so I'm going to go ahead and add these breakpoints here so you can see this in code so right here now then I change this to outline breakpoint right here so now you switch to gallery you can see that it's just calling the on click method behind that button it's setting the view type to gallery and it's displaying the appropriate data template to view it so the next thing I want to show you here is going to open the project pane I'm going to add a new map to pro so then I add a new map to pro there is quite a bit of system activity and when this is happening I'm going to display a circular animation control you can see that right here on the top so this is indicating system activity and once the map has drawn in Pro you I'm just hiding that control that's the circular animation control so now that I've added a new map as you can see there are no bookmarks in it so now if I select the new map you can notice that my list box control disappears and I get an information message saying please open a map in bookmarks so now I can open my crimes map again and you have your bookmark control and the label disappears and I want to show you one more thing right here about the list box I have a search text box you would have seen this while you work with Pro there this is the exact same search text box that we have now provided you in your add in development work so over here I can type in suppose I have many bookmarks for example I'm gonna see do I have a police station bookmark so I type that and I click this and you can see that the police bookmark police Central Precinct bookmark is selected and my bookmark has my map as zoom to that so that has been implemented again in zamel you can see that right about the list box right here so this is my search text box it has lots of attributes but the most interesting one over here is the text attribute I have a binding to a search text property defined in my view model and that's where I performing the search functionality so that's it about the framework elements let's go back to the slides and I want to focus now about on the gallery framework element it's a container control and it has a very rich representation of data as you can see in these screenshots over here and it's very customary to give a little nail of the item inside the gallery the when you have too many items in the gallery you can expand it using the little expand arrow at the bottom the contents are usually populated at runtime and the gallery derives from a gallery class defined by the pro framework so you can design this gallery using the gallery template it comes with your archer's pro sdk templates and there are two types of galleries the one on the right it shows you the bookmark gallery if you can see the split button defined here on the ribbon so when you click on that the contents of the gallery gets exposed so another type of gallery is the one on the left over here it's the analysis tools gallery and basically here all the items are placed directly on the ribbon so the SDK templates we provide the item templates for both these type of galleries so in the important thing to remember about the first type of gallery that expands with the split button the code initialization happens on the on drop-down opened override we will see that in the demo next and then you add items to the gallery you use the add method and when you click on an item you call the on click method and the gallery item is passed as the parameter so this slide basically shows you a little more information on the how a gallery is defined in demo so the first snippet over here is a gallery definition in demo it this is where you get to define things like how many items you want in a row and how many rows you want and then you make a reference to your zamel file where you design the appearance of the gallery and at the bottom is a small code snippet of the sama file the main thing to note here is notice that the data templates key it matches the data template file that you define in demo so that's the connection okay let's check the demo up now so over here in Visual Studio I have an add-in project type and I've added a gallery item template straight out of the box using the pro SDK I've made a few little customizations so that it will display an inline gallery on the pro rebel my gallery is going to contain a collection of web map items from our chairs online when you click on each item that web map will open up in pro so the first thing here this is the conflict or demo and you can see that the gallery is defined here this is all done with the SDKs so things like the caption and easy to modify the next thing is the web Maps gallery class file so this is my gallery this is the one that's going to contain my web mabye web map items from our chairs online you can see that it inherits from the frameworks a gallery base class and it implements the on drop-down opened override and the on click method so the on drop-down override is what I'm going to initialize the contents of my gallery so within this initialize method right here I forget web Maps async method this is my method I have used every HTTP client to communicate without chairs online to get web Maps I'm not going to go over that here but Wolfe is presenting a session on that tomorrow so you can attend that to see how I wrote this method so then I have a non click method very straightforward when you click on the gallery item it calls the open web map async method I'm going to step into that method shortly so let's start pro and see how this looks and I just wild Pro is starting up I want to show one more thing so I have initialized my collection of items you saw that in the gallery class and I've also coded the onclick method but what about styling the gallery so this is the default styling that comes to the pro SDK so it's really simple it has a little image the source of the image is has a binding to an icon property and it has a textbox element binding to a text property so luckily my web map item has these properties so I'm just going to use the default styling provided by the SDK so now I'm going to open my gallery project it's pretty much an empty project right now so notice the split button created right here so I'm going to click on that now my initialize method is triggered in the on drop-down opened override you're going to step into that method and you can see that my gallery has displayed that the styling is pretty cheesy you can see that the thumbnails are pretty small but you know it actually works you click on this you can see that it's calling the on click method continue and we'll step through this shortly actually yeah why not right now so let's see the first thing is I am calling the item factories create method this is a pro API method I am passing in the ID of the web map item from ArcGIS online and then I'm specifying that it's a portal item so with this call I get an item object back I'm going to step over that and then I am here calling the map factories create map async method it accepts the item object and I get an actual map object back so then using this map object I am all I'm doing here is creating a view pane to view and display the map object so I'm going to continue and pro is drawing the map from our chairs online so now let's make this display a little better so now I'm going to stop debugging now if you go into our sam'l file I'm gonna comment out this default style styling provided by the SDK and I have a code snippet over here that does some custom styling I'm gonna comment this out there you go so let's look at this in detail so it's very similar to the default styling it just has a little extra polish to make it look better hopefully there is an image element again and it has you can notice that I have little extra styling here with some drop shadow effect notice that for the color I'm using an ESRI resource and for the source of the image I'm binding it to the thumbnail of the web map item on ArcGIS online and then when you hover over the item I have a tooltip that i'm using the snippet of the web map and then just like before I have a text block text block that specifies the name of the web map so now let's see how this looks good disable my breakpoints so that that definitely looks much better so when I hover over it you can see that I get a little snippet with an extra descriptive text and what the web map is about yes I'll try to do that again there you go so when I click on it again the streets web map opens up so I'm not done yet I have one more thing to do so now I'm gonna stop debugging and I want to convert this gallery into an inline gallery very simple you go into your config dot demo there is an inline attribute for the gallery reference over here I change that to true inline was false and now it's true then since this is an inline gallery where all the items are displayed directly on the probable I'm going to initialize the contents of the gallery within the constructor and then I'm I don't need the on drop-down opened anymore so now let's see how that looks then it is just with a few changes I was able to change my gallery from a split button displayed to an inline gallery so that concludes my demo on the gallery item and back to the slides and I think that's about it I have a couple of slides with some information on other sessions that you might find useful perhaps you can take a picture of all these sessions that we provide on the pro SDK there is the one on Wednesday is the one that Wolfe is presenting or not just online that talks about communicating with pro and this is the couple of demo theater sessions and we have an archers Pro SDK road ahead session coming up and a new this year we actually have a instructor-led training class it's called extending archers pro with add-ins it's a three day class coming up in April and I just heard that there are some seats available still so if you're interested please register for that and if you have any questions we would like to answer them yeah I think I want to mention one more thing the samples that you saw today they are available in one or the other forum on our our chess Pro SDK website if you search in google for arcgis pro sdk you'll get to this landing page and from here you can reach the API reference community samples and our pro concepts documentation so all the samples you saw today if you go to the samples you will see that they are available here in one or the other form and they are they're organized by namespace and then when you go into this specific sample you'll see pictures and documentation how to build and how to run and use the sample data is available on the community samples page as well and yeah so let's go to the questions do we have any questions there is a question slide before that was an easy question thank you pay or five bucks for that question yes sir yes the the API of reference so the question was when do you know that a method is fine-grained versus its coarse-grained oh okay so the question was from argh objects moving to pro is yeah well no the short answer is no there's no there's no comparison list yeah yeah we try to if you want to know about functionality there is I would look at the samples first and see what the samples provide we try to provide samples for all the capabilities that we have and you know you see the pictures and not everything is equivalent with ARC objects so there might be some differences but you know the functionality might be there in a different form so no no you know now when it comes to some of the API functionality there it's virtual equivalency like if you look at the geometry API it's very similar there you know what pretty much whatever there was in our cobb jects is also available in one or the other form in pro but you know many of the other api's are not quite on par alright thank you very much if you have any other questions you can come forward after that amulet will try to answer or you see us on the on the pro Island showcase thank you [Applause]

Channel: Esri Events

Views: 3,713

Rating: 4.7647057 out of 5

Keywords: Esri, ArcGIS, GIS, Esri Events, add-ins, ArcGIS Pro SDK for .NET, UI, MVVM

Id: 5PgaeZycWXc

Length: 61min 19sec (3679 seconds)

Published: Wed Mar 29 2017