|
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 | +--- |
3 | 8 |
|
4 | 9 | ## 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 | +--- |
6 | 21 |
|
7 | 22 | ## 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 | +--- |
12 | 131 |
|
13 | 132 | ## 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 |
18 | 137 |
|
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