Skip to content

Commit 736072f

Browse files
authored
Update README.md
1 parent 269ec7e commit 736072f

1 file changed

Lines changed: 131 additions & 12 deletions

File tree

README.md

Lines changed: 131 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,138 @@
1-
# How to Expand or Collapse the WPF TaskBar Programmatically Using the MVVM Pattern
2-
This repository contains a sample that demonstrates how to programmatically expand or collapse the Syncfusion WPF TaskBar control while following the MVVM (Model–View–ViewModel) pattern. The approach ensures a clean separation of concerns and avoids code‑behind logic, making the implementation maintainable and testable.
1+
# Expand or Collapse the TaskBar Programmatically Using MVVM in WPF
2+
3+
This sample demonstrates how to **programmatically expand and collapse the Syncfusion WPF TaskBar control using the MVVM pattern**.
4+
5+
It shows how to manage the open/close state of `TaskBarItem` instances using data binding, without manipulating UI elements directly from code‑behind.
6+
7+
---
38

49
## Overview
5-
In many real‑world WPF applications, the TaskBar state needs to be controlled dynamically based on application logic, user interaction, or workflow transitions. This sample illustrates how to bind TaskBar state changes to ViewModel properties and commands, enabling seamless control from the ViewModel layer.
10+
11+
The **Syncfusion WPF TaskBar** control is used to display expandable panels containing grouped content.
12+
In MVVM‑based applications, UI state (such as expanded or collapsed panels) is controlled through **bindable properties** in the ViewModel.
13+
14+
This sample illustrates:
15+
- Binding TaskBar items to a ViewModel
16+
- Expanding or collapsing TaskBar items programmatically
17+
- Displaying custom content using DataTemplates
18+
- Selecting templates dynamically using a DataTemplateSelector
19+
20+
---
621

722
## What This Sample Demonstrates
8-
Expanding and collapsing the TaskBar programmatically
9-
Using MVVM‑friendly bindings and commands
10-
Maintaining separation between UI and business logic
11-
Updating TaskBar state based on ViewModel changes
23+
24+
- Implementing TaskBar using the MVVM pattern
25+
- Binding `IsOpened` property to expand or collapse items
26+
- Populating TaskBar content dynamically
27+
- Using `ItemTemplate` and `HeaderTemplate`
28+
- Displaying different content layouts using a `DataTemplateSelector`
29+
30+
---
31+
32+
## Key MVVM Concept
33+
34+
The **expanded or collapsed state of a TaskBarItem** is controlled by the `IsOpened` property in the model:
35+
36+
```csharp
37+
public bool IsOpened
38+
{
39+
get { return isOpen; }
40+
set
41+
{
42+
isOpen = value;
43+
this.RaisePropertyChanged(nameof(IsOpened));
44+
}
45+
}
46+
```
47+
## DataModels
48+
49+
### TaskBarModel
50+
```Csharp
51+
public class TaskBarModel : NotificationObject
52+
{
53+
public string Header { get; set; }
54+
55+
private bool isOpen;
56+
public bool IsOpened
57+
{
58+
get { return isOpen; }
59+
set
60+
{
61+
isOpen = value;
62+
RaisePropertyChanged(nameof(IsOpened));
63+
}
64+
}
65+
66+
public List<Contentmodel> TaskbarContentItems { get; set; }
67+
68+
public TaskBarModel()
69+
{
70+
TaskbarContentItems = new List<Contentmodel>();
71+
}
72+
}
73+
```
74+
75+
### ContentModel
76+
```Csharp
77+
public class Contentmodel
78+
{
79+
public string Name { get; set; }
80+
public string DateOfBirth { get; set; }
81+
public string Geneder { get; set; }
82+
public string Position { get; set; }
83+
public string DateOfJoining { get; set; }
84+
public string ImageSource { get; set; }
85+
}
86+
```
87+
88+
### ViewModel
89+
The ViewModel exposes a collection of TaskBarModel items. Each item controls its own expanded or collapsed state through IsOpened.
90+
```Csharp
91+
public class TaskBarViewModel : NotificationObject
92+
{
93+
public ObservableCollection<TaskBarModel> TaskBarItems { get; set; }
94+
95+
public TaskBarViewModel()
96+
{
97+
TaskBarItems = new ObservableCollection<TaskBarModel>();
98+
PopulateCollection();
99+
}
100+
101+
private void PopulateCollection()
102+
{
103+
TaskBarItems.Add(
104+
new TaskBarModel()
105+
{
106+
Header = "Employee1 Personal Details",
107+
IsOpened = false,
108+
TaskbarContentItems =
109+
{
110+
new Contentmodel
111+
{
112+
Name = "Name : Alicia Mendez",
113+
DateOfBirth = "Date Of Birth : 06-03-1981",
114+
Geneder = "Gender : Female",
115+
DateOfJoining = "Date Of Joining : 06-03-2003",
116+
ImageSource = "/Assets/People/People_Circle0.png"
117+
}
118+
}
119+
});
120+
121+
TaskBarItems.Add(
122+
new TaskBarModel()
123+
{
124+
Header = "Employee3 Personal Details",
125+
IsOpened = true
126+
});
127+
}
128+
}
129+
```
130+
---
12131

13132
## Key Benefits
14-
Clean, maintainable MVVM implementation
15-
No direct UI manipulation from code‑behind
16-
Easy integration into existing WPF applications
17-
Ideal for dashboards, navigation panels, and workflow‑driven UIs
133+
- Clean, maintainable MVVM implementation
134+
- No direct UI manipulation from code‑behind
135+
- Easy integration into existing WPF applications
136+
- Ideal for dashboards, navigation panels, and workflow‑driven UIs
18137

19-
This sample serves as a practical reference for developers looking to control the WPF TaskBar dynamically while adhering to MVVM best practices.
138+
This sample serves as a practical reference for developers looking to control the WPF TaskBar dynamically while adhering to MVVM best practices.

0 commit comments

Comments
 (0)