|
1 | | -# How-to-set-the-BindingContext-for-SfTabItem-using-various-pages |
2 | | -This repository contains a sample explaining how to set the BindingContext for SfTabItem using various pages. |
| 1 | +When working with the [SfTabView,](https://www.syncfusion.com/maui-controls/maui-tab-view) it's important to ensure that data binding is correctly set up so that the data is displayed within the tabs as expected. This article provides a guide on how to bind data to the respective fields within tab pages of the SfTabView. |
| 2 | + |
| 3 | +**Step 1:** Create a new sample in the .NET MAUI and initialize TabView within the page with `BindingContext.` |
| 4 | + |
| 5 | +**XAML** |
| 6 | +``` |
| 7 | +<contentpage.bindingcontext> |
| 8 | + <local:viewmodel> |
| 9 | +</local:viewmodel></contentpage.bindingcontext> |
| 10 | +<tabview:sftabview items="{Binding Items}"> |
| 11 | +``` |
| 12 | + |
| 13 | +**Step 2:** Create different content pages that you need to display as a `TabItem` and for each content page, set `BindingContext` from its respective ViewModel. For example, |
| 14 | + |
| 15 | +**XAML** |
| 16 | +``` |
| 17 | +<contentpage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:class="TabView.TabViewPage1" title="TabViewPage1" xmlns:local="clr-namespace:TabView"> |
| 18 | + <contentpage.bindingcontext> |
| 19 | + <local:tabviewpage1viewmodel> |
| 20 | + </local:tabviewpage1viewmodel></contentpage.bindingcontext> |
| 21 | + <verticalstacklayout verticaloptions="Center"> |
| 22 | + <label text="{Binding Title}" verticaloptions="Center" horizontaloptions="Center"> |
| 23 | + </label></verticalstacklayout> |
| 24 | +</contentpage> |
| 25 | +``` |
| 26 | + |
| 27 | +**C#** |
| 28 | + |
| 29 | +``` |
| 30 | +public class TabViewPage1ViewModel |
| 31 | +{ |
| 32 | + public string Title { get; set; } |
| 33 | +
|
| 34 | + public TabViewPage1ViewModel() |
| 35 | + { |
| 36 | + Title = "Welcome to .NET MAUI!"; |
| 37 | + } |
| 38 | +} |
| 39 | +``` |
| 40 | + |
| 41 | +Create as many content pages as you need for display within the `TabItem` and its respective view model, like above. |
| 42 | + |
| 43 | +**Step 3:** To bind data to the tab pages, you need to set up your ViewModel to manage the data for each tab. Here's an example of how you can initialize your tab items and bind the context to each page: |
| 44 | + |
| 45 | +**C#** |
| 46 | +```csharp |
| 47 | +// ViewModel.cs |
| 48 | +
|
| 49 | +public class ViewModel : INotifyPropertyChanged |
| 50 | +{ |
| 51 | +private TabItemCollection items; |
| 52 | +public event PropertyChangedEventHandler PropertyChanged; |
| 53 | +public TabItemCollection Items |
| 54 | +{ |
| 55 | + get { return items; } |
| 56 | + set |
| 57 | + { |
| 58 | + items = value; |
| 59 | + OnPropertyChanged("Items"); |
| 60 | + } |
| 61 | +} |
| 62 | + |
| 63 | +protected virtual void OnPropertyChanged(string propertyName) |
| 64 | +{ |
| 65 | + PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); |
| 66 | +} |
| 67 | + |
| 68 | +public ViewModel() |
| 69 | +{ |
| 70 | + SetItems(); |
| 71 | +} |
| 72 | + |
| 73 | +internal void SetItems() |
| 74 | +{ |
| 75 | + Items = new TabItemCollection(); |
| 76 | + TabViewPage1 page1 = new TabViewPage1(); |
| 77 | + TabViewPage2 page2 = new TabViewPage2(); |
| 78 | + TabViewPage3 page3 = new TabViewPage3(); |
| 79 | + TabViewPage3 page4 = new TabViewPage3(); |
| 80 | + SfTabItem firstTabitem = new SfTabItem{ Content = page1.Content, Header = "Page1" }; |
| 81 | + firstTabitem.Content.BindingContext = page1.BindingContext; |
| 82 | + |
| 83 | + SfTabItem secondTabitem = new SfTabItem { Content = page2.Content, Header = "Page2" }; |
| 84 | + secondTabitem.Content.BindingContext = page2.BindingContext; |
| 85 | + |
| 86 | + SfTabItem thirdTabitem = new SfTabItem { Content = page3.Content, Header = "Page3" }; |
| 87 | + thirdTabitem.Content.BindingContext = page3.BindingContext; |
| 88 | + |
| 89 | + SfTabItem fourthTabitem = new SfTabItem { Content = page4.Content, Header = "Page4" }; |
| 90 | + fourthTabitem.Content.BindingContext = page4.BindingContext; |
| 91 | + |
| 92 | + Items.Add(firstTabitem); |
| 93 | + Items.Add(secondTabitem); |
| 94 | + Items.Add(thirdTabitem); |
| 95 | + Items.Add(fourthTabitem); |
| 96 | + |
| 97 | +} |
| 98 | +} |
| 99 | +``` |
| 100 | + |
| 101 | +In this example, each `SfTabItem` is initialized with the content and header, and the `BindingContext` of the content is set to the `BindingContext` of the respective page. |
| 102 | + |
| 103 | +Please note that the code snippets provided in this article are for illustrative purposes and may require adjustments to fit the specific requirements of your application. |
| 104 | + |
| 105 | +**Output** |
| 106 | + |
| 107 | + |
| 108 | + |
| 109 | + |
| 110 | + :::Info |
| 111 | +**Important note for prism framework** |
| 112 | + |
| 113 | +If you are using the `Prism framework,` it's important to note that the SfTabView may not work as expected due to the way Prism `auto-wires` the binding context. Since the SfTabView is a `content view` control, and the content of the page is assigned to the tab item content, the page's binding context is set to null. This results in the ViewModel not being recognized when setting the page content to the tab item content. Therefore, the SfTabView may not be suitable for use with the Prism framework. |
| 114 | + ::: |
0 commit comments