I am able to access properties of an XAML control items directly. For instance, changing a header of a tab in a Dockpane XAML (View): C# (Model):private void FavoritesTabs_Initialized(object sender, EventArgs e){ Tab1.Header = "MyFavoriteTab";} However, I know it this is not right/proper way and I would like to use MVVM. I would like to bind tab Headers to Model by using MVVM. How can I achieve that? I think XAML would be XAML: What else I should add Dockpane1ViewModel.cs (View Model) and Dockpane1.xaml.cs (Model)?

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

What is the proper way binding from XAML to the Model in ArcGIS Pro SDK framework

Amadeus111

I am able to access properties of an XAML control items directly. For instance, changing a header of a tab in a Dockpane

<CODE><SPAN class="" style="border: 0px; font-weight: inherit; font-size: 14px;"><SPAN style="border: 0px; font-weight: inherit; font-size: 14px;">XAML (View):</SPAN>
</SPAN>
<TabControl x:Name="FavoritesTabs" HorizontalAlignment="Stretch" Height="23" Initialized="FavoritesTabs_Initialized" Margin="8,0,7,0" >
<TabItem x:Name="Tab1" Height="20" Width="75"> </TabItem>
 <TabItem x:Name="Tab2" Height="20" Width="75"></TabItem>
</TabControl>
<SPAN style="color: #000000;"><SPAN class="" style="border: 0px; font-weight: inherit; font-size: 14px;">
C# (Model):

private void FavoritesTabs_Initialized(object sender, EventArgs e)
{
 &nbsp;&nbsp;&nbsp;Tab1.Header = "MyFavoriteTab";
}</SPAN><SPAN class="" style="border: 0px; font-weight: inherit; font-size: 14px;">
</SPAN></SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">
</SPAN>

However, I know it this is not right/proper way and I would like to use MVVM. I would like to bind tab Headers to Model by using MVVM. How can I achieve that?

I think XAML would be

<SPAN class="" style="border: 0px; font-weight: inherit; font-size: 14px;"><SPAN style="border: 0px; font-weight: inherit; font-size: 14px;">XAML:</SPAN>
</SPAN>
<TabControl x:Name="FavoritesTabs" HorizontalAlignment="Stretch" Height="23" Initialized="FavoritesTabs_Initialized" Margin="8,0,7,0" >
<TabItem x:Name="Tab1" Header="{Binding MyFavorite1}" Height="20" Width="75"> </TabItem>
 <TabItem x:Name="Tab2" Header="{Binding MyFavorite2}" Height="20" Width="75"></TabItem>
</TabControl>
<SPAN style="color: #000000;"><SPAN class="" style="border: 0px; font-weight: inherit; font-size: 14px;">
</SPAN><SPAN class="" style="border: 0px; font-weight: inherit; font-size: 14px;">
</SPAN></SPAN>

What else I should add Dockpane1ViewModel.cs (View Model) and Dockpane1.xaml.cs (Model)?

Find more posts tagged with

Accepted answers

GKmieliauskas

Hi,

It is long discussion about about MVVM, pure MVVM and etc, You can find more information on web.

In pure MVVM xyz..xaml.cs should contain only code for setting a page's data context.

Dockpane.xaml and Dockpane.xaml.cs both comprise View in MVVM? To simplify things I could say "Yes"

If I need to do any changes on the observable collection, I should do it in DockpaneViewModel.cs, right? Yes. Your observable collection must contain items which implement INotifyPropertyChanged. To get selection you need to bind SelectItem to view model property and etc.

As I said in previous reply all what you need to do is edit Dockpane.xaml using designer and code in

DockpaneViewModel.cs . Remember about Dockpane.xaml.cs only when you want to rename your classes.

More info on youtube

ArcGIS Pro SDK for .NET: UI Design and MVVM:

https://www.youtube.com/watch?v=5PgaeZycWXc

All comments

GKmieliauskas

Hi,

You can create new Dockpane from Visual Studio ArcGIS templates and you will see how Dockpane headers are binded. Main header is specified in config.daml file as 'caption' value:

<dockPane id="MyDockpaneID" caption="My Dockpane".

Second one header binding property will be created in dockpane mvvm file:

/// <summary>
/// Text shown near the top of the DockPane.
/// </summary>
private string _heading = "MyFavoritTab";
public string Heading
{
get { return _heading; }
set
{
SetProperty(ref _heading, value, () => Heading);
}
}

In xaml:

Amadeus111

Thank you @GKmieliauskas I will check it out As soon as I get time.

Amadeus111

Ok, inside which file I will create private and public headings (Heading and _heading) and how I will access to those headings from the model (Dockpane.xaml.cs) to modify a tab's heading property?

GKmieliauskas

Hi,

In MVVM you do not need to access xaml controls from View class (.xaml.cs) except some special cases. To do that you need to assign name to control in xaml with "x:Name".

I would recommend to open one of Esri samples from github with Dockpane and study with debugger how it works.

https://github.com/Esri/arcgis-pro-sdk-community-samples/blob/master/Framework/DockpaneSimple

https://github.com/Esri/arcgis-pro-sdk-community-samples/tree/master/Framework/DockPaneBookmarkAdvanced

More about dockpanes:

https://github.com/esri/arcgis-pro-sdk/wiki/ProGuide-Dockpanes

Amadeus111

@GKmieliauskas Thank you for your answer. I already saw many examples and read some articles about MVVM but I still have not understood completely. As you said I name the controls via "x:Name" and access them through Dockpane.xaml.cs (I just figured out that this file also part of the view in MVVM) and I know how controls work. I already built a functional dockpane but I would like to organize it in a proper MVVM pattern.

Dockpane.xaml and Dockpane.xaml.cs both comprise View in MVVM? Dockpane.xaml takes care of Visual elements in UI whereas Dockpane.xaml.cs takes care of events user clicks/selections, initializations etc.

DockpaneViewModel.cs binds sources to the view. For example, an observable collection points to a listbox as items source. If I need to do any changes on the observable collection, I should do it in DockpaneViewModel.cs, right?

Now, why I need a model then and which one is model file or class in a dockpane module?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.