Skip to content

Commit 03af5b5

Browse files
naveenkumar-sanjeevirayannaveenkumar-sanjeevirayan
authored
Merge pull request #2 from SyncfusionExamples/sample
Updated the README.md
2 parents 18f01ae + 435e7ab commit 03af5b5

File tree

1 file changed

+59
-62
lines changed

1 file changed

+59
-62
lines changed

‎README.md‎

Lines changed: 59 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,31 @@
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.
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 Tab View.
22

3-
**Step 1:** Create a new sample in the .NET MAUI and initialize TabView within the page with `BindingContext.`
3+
**Step 1:** Create a new sample in the .NET MAUI and initialize Tab View within the page with `BindingContext.`
44

55
**XAML**
66
```
7-
<contentpage.bindingcontext>
8-
<local:viewmodel>
9-
</local:viewmodel></contentpage.bindingcontext>
10-
<tabview:sftabview items="{Binding Items}">
7+
<ContentPage.BindingContext>
8+
<local:ViewModel/>
9+
</ContentPage.BindingContext>
10+
<tabView:SfTabView Items="{Binding Items}"/>
1111
```
1212

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,
13+
**Step 2:** Create different content pages that you need to display as a `Tab Item` and for each content page, set `BindingContext` from its respective ViewModel. For example,
1414

1515
**XAML**
1616
```
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>
17+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
18+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
19+
x:Class="TabView.TabViewPage1"
20+
Title="TabViewPage1"
21+
xmlns:local="clr-namespace:TabView">
22+
<ContentPage.BindingContext>
23+
<local:TabViewPage1ViewModel/>
24+
</ContentPage.BindingContext>
25+
<VerticalStackLayout VerticalOptions="Center">
26+
<Label Text="{Binding Title}" VerticalOptions="Center" HorizontalOptions="Center" />
27+
</VerticalStackLayout>
28+
</ContentPage>
2529
```
2630

2731
**C#**
@@ -38,7 +42,7 @@ public class TabViewPage1ViewModel
3842
}
3943
```
4044

41-
Create as many content pages as you need for display within the `TabItem` and its respective view model, like above.
45+
Create as many content pages as you need for display within the `Tab Item` and its respective view model, like above.
4246

4347
**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:
4448

@@ -48,67 +52,60 @@ Create as many content pages as you need for display within the `TabItem` and it
4852
4953
public class ViewModel : INotifyPropertyChanged
5054
{
51-
private TabItemCollection items;
52-
public event PropertyChangedEventHandler PropertyChanged;
53-
public TabItemCollection Items
54-
{
55-
get { return items; }
56-
set
55+
private TabItemCollection items;
56+
public event PropertyChangedEventHandler PropertyChanged;
57+
public TabItemCollection Items
5758
{
58-
items = value;
59-
OnPropertyChanged("Items");
59+
get { return items; }
60+
set
61+
{
62+
items = value;
63+
OnPropertyChanged("Items");
64+
}
6065
}
61-
}
6266

63-
protected virtual void OnPropertyChanged(string propertyName)
64-
{
65-
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
66-
}
67+
protected virtual void OnPropertyChanged(string propertyName)
68+
{
69+
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
70+
}
6771

68-
public ViewModel()
69-
{
70-
SetItems();
71-
}
72+
public ViewModel()
73+
{
74+
SetItems();
75+
}
7276

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;
77+
internal void SetItems()
78+
{
79+
Items = new TabItemCollection();
80+
TabViewPage1 page1 = new TabViewPage1();
81+
TabViewPage2 page2 = new TabViewPage2();
82+
TabViewPage3 page3 = new TabViewPage3();
83+
TabViewPage3 page4 = new TabViewPage3();
84+
SfTabItem firstTabitem = new SfTabItem{ Content = page1.Content, Header = "Page1" };
85+
firstTabitem.Content.BindingContext = page1.BindingContext;
8286

83-
SfTabItem secondTabitem = new SfTabItem { Content = page2.Content, Header = "Page2" };
84-
secondTabitem.Content.BindingContext = page2.BindingContext;
87+
SfTabItem secondTabitem = new SfTabItem { Content = page2.Content, Header = "Page2" };
88+
secondTabitem.Content.BindingContext = page2.BindingContext;
8589

86-
SfTabItem thirdTabitem = new SfTabItem { Content = page3.Content, Header = "Page3" };
87-
thirdTabitem.Content.BindingContext = page3.BindingContext;
90+
SfTabItem thirdTabitem = new SfTabItem { Content = page3.Content, Header = "Page3" };
91+
thirdTabitem.Content.BindingContext = page3.BindingContext;
8892

89-
SfTabItem fourthTabitem = new SfTabItem { Content = page4.Content, Header = "Page4" };
90-
fourthTabitem.Content.BindingContext = page4.BindingContext;
93+
SfTabItem fourthTabitem = new SfTabItem { Content = page4.Content, Header = "Page4" };
94+
fourthTabitem.Content.BindingContext = page4.BindingContext;
9195

92-
Items.Add(firstTabitem);
93-
Items.Add(secondTabitem);
94-
Items.Add(thirdTabitem);
95-
Items.Add(fourthTabitem);
96+
Items.Add(firstTabitem);
97+
Items.Add(secondTabitem);
98+
Items.Add(thirdTabitem);
99+
Items.Add(fourthTabitem);
96100

97-
}
101+
}
98102
}
99103
```
100104

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.
105+
In this example, each `Tab Item` is initialized with the content and header, and the `BindingContext` of the content is set to the `BindingContext` of the respective page.
102106

103107
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.
104108

105109
**Output**
106110

107-
![ezgif.com-video-to-gif (9).gif](https://support.syncfusion.com/kb/agent/attachment/article/14410/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjE0ODg2Iiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.VeZIlJvk_lBwkDgAMxLxp2Uql6ap6gzG1mjYNNBF4_8)
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-
:::
111+
![ezgif.com-video-to-gif (9).gif](https://support.bolddesk.com/kb/agent/attachment/article/14410/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjE0ODg2Iiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5ib2xkZGVzay5jb20ifQ.LjUylqLMBz07RXcMFFNT56Rsy_JJV7yT9DVDHiBOMlQ)

0 commit comments

Comments
 (0)