Skip to content

Commit e371efe

Browse files
Elakkiya1730Elakkiya1730
authored
Updated the content
1 parent 5279e2e commit e371efe

1 file changed

Lines changed: 257 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 257 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,259 @@
11
# How-to-Expand-or-Collapse-the-Taskbar-programmatically-using-the-MVVM-pattern-in-WPF-TaskBar-control
22
This repository contains the sample that how to expand or collapse the Taskbar programmatically using the MVVM pattern in WPF TaskBar control.
3+
The Taskbar can be expand or collapse by populating the items through ViewModel by using IsOpened property of TaskBar . Different content for each TaskBarItem, can be set by using the ContentTemplateSelector property of ContentPresenter .
4+
5+
```XAML
6+
<Window.Resources>
7+
<DataTemplate x:Key="DefaultTemplate">
8+
<StackPanel>
9+
<TextBlock Text="Default content" />
10+
</StackPanel>
11+
</DataTemplate>
12+
<DataTemplate x:Key="NormalTemplate">
13+
<Grid>
14+
<Grid.ColumnDefinitions>
15+
<ColumnDefinition/>
16+
<ColumnDefinition/>
17+
</Grid.ColumnDefinitions>
18+
<StackPanel Margin="5">
19+
<TextBlock Margin="2" Text="{Binding Name}" />
20+
<TextBlock Margin="2" Text="{Binding DateOfBirth}" />
21+
<TextBlock Margin="2" Text="{Binding Geneder}" />
22+
<TextBlock Margin="2" Text="{Binding DateOfJoining}"/>
23+
</StackPanel>
24+
<StackPanel Grid.Column="1" Margin="5">
25+
<TextBlock
26+
Margin="2"
27+
HorizontalAlignment="Center"
28+
VerticalAlignment="Center">
29+
Employee Photo
30+
</TextBlock>
31+
<Image
32+
Margin="2"
33+
Height="100"
34+
VerticalAlignment="Top"
35+
Source="{Binding ImageSource}" />
36+
</StackPanel>
37+
</Grid>
38+
</DataTemplate>
39+
<local:PremiumUserDataTemplateSelector
40+
x:Key="TaskBarContentTemplateSelector"
41+
DefaultTemplate="{StaticResource DefaultTemplate}"
42+
NormalTemplate="{StaticResource NormalTemplate}" />
43+
</Window.Resources>
44+
45+
46+
<Grid>
47+
<syncfusion:TaskBar
48+
Name="taskBar"
49+
Width="500"
50+
Height="300"
51+
Margin="0,10,0,0"
52+
VerticalAlignment="Top"
53+
ScrollViewer.HorizontalScrollBarVisibility="Auto"
54+
ItemsSource="{Binding TaskBarItems}">
55+
<syncfusion:TaskBar.ItemContainerStyle>
56+
<Style TargetType="{x:Type syncfusion:TaskBarItem}">
57+
<Setter Property="Header" Value="{Binding Header}" />
58+
<Setter Property="syncfusion:TaskBar.IsOpened" Value="{Binding IsOpened}" />
59+
<Setter Property="ItemsSource" Value="{Binding TaskbarContentItems}" />
60+
<Setter Property="ItemContainerStyle">
61+
<!--ContentTemplateSelector used to set different content for each TaskBarItem-->
62+
<Setter.Value>
63+
<Style TargetType="ContentPresenter">
64+
<Setter Property="ContentTemplateSelector" Value="{StaticResource TaskBarContentTemplateSelector}" />
65+
</Style>
66+
</Setter.Value>
67+
</Setter>
68+
</Style>
69+
</syncfusion:TaskBar.ItemContainerStyle>
70+
</syncfusion:TaskBar>
71+
</Grid>
72+
```
73+
74+
```C#
75+
76+
public class PremiumUserDataTemplateSelector : DataTemplateSelector
77+
{
78+
public DataTemplate DefaultTemplate { get; set; }
79+
public DataTemplate NormalTemplate { get; set; }
80+
public override DataTemplate SelectTemplate(object item, DependencyObject container)
81+
{
82+
FrameworkElement elemnt = container as FrameworkElement;
83+
// Set the different content for taskbaritem according your desire
84+
if ((item as Contentmodel).Name == "Content1")
85+
{
86+
return elemnt.FindResource("DefaultTemplate") as DataTemplate;
87+
}
88+
89+
return elemnt.FindResource("NormalTemplate") as DataTemplate;
90+
}
91+
}
92+
```
93+
94+
ViewModel
95+
```
96+
public class TaskBarViewModel : NotificationObject
97+
{
98+
99+
private ObservableCollection<TaskBarModel> taskbarItems;
100+
public ObservableCollection<TaskBarModel> TaskBarItems
101+
{
102+
get { return taskbarItems; }
103+
set
104+
{
105+
taskbarItems = value;
106+
this.RaisePropertyChanged(nameof(TaskBarItems));
107+
}
108+
}
109+
public TaskBarViewModel()
110+
{
111+
taskbarItems = new ObservableCollection<TaskBarModel>();
112+
PopulateCollection();
113+
}
114+
115+
public void PopulateCollection()
116+
{
117+
//Adding the tileview items into the collection
118+
List<Contentmodel> ContentItem1 = new List<Contentmodel>();
119+
120+
121+
ContentItem1.Add(new Contentmodel() { Name = "Name : Alicia Mendez", DateOfBirth = "Date Of Birth : 06-03-1981", Geneder = "Gender : Female", DateOfJoining = "Date Of Joining : 06-03-2003" ,ImageSource= "/Taskbar_Mvvm;component/Assets/People/People_Circle0.png" });
122+
123+
TaskBarItems.Add(new TaskBarModel() { Header = "Employee1 Personal Details", TaskbarContentItems = ContentItem1, IsOpened = false });
124+
125+
List<Contentmodel> ContentItem2 = new List<Contentmodel>();
126+
127+
ContentItem2.Add(new Contentmodel() { Name = "Name : Danial William", DateOfBirth = "Date Of Birth : 04-03-1982", Geneder = "Gender : Male", DateOfJoining = "Date Of Joining : 09-03-2004", ImageSource = "/Taskbar_Mvvm;component/Assets/People/People_Circle2.png" });
128+
TaskBarItems.Add(new TaskBarModel() { Header = "Employee2 Personal Details", TaskbarContentItems = ContentItem2, IsOpened = false });
129+
130+
List<Contentmodel> ContentItem3 = new List<Contentmodel>();
131+
132+
ContentItem3.Add(new Contentmodel() { Name = "Name : Kinsley Elena", DateOfBirth = "Date Of Birth :08-09-1983", Geneder = "Gender : Female", DateOfJoining = "Date Of Joining : 09-03-2005", ImageSource = "/Taskbar_Mvvm;component/Assets/People/People_Circle1.png" });
133+
TaskBarItems.Add(new TaskBarModel() { Header = "Employee3 Personal Details", TaskbarContentItems = ContentItem3, IsOpened = true });
134+
135+
}
136+
}
137+
```
138+
139+
Model
140+
```
141+
TaskBarModel cs file
142+
143+
public class TaskBarModel : NotificationObject
144+
{
145+
public string Header { get; set; }
146+
147+
148+
public TaskBarModel()
149+
{
150+
taskbarContentItems = new List<Contentmodel>();
151+
152+
}
153+
154+
private bool isOpen;
155+
156+
public bool IsOpened
157+
{
158+
get { return isOpen; }
159+
set
160+
{
161+
isOpen = value;
162+
this.RaisePropertyChanged(nameof (IsOpened));
163+
}
164+
}
165+
166+
167+
private int invokeParameter = 1;
168+
169+
public int InvokeParameter
170+
{
171+
get { return invokeParameter; }
172+
set { invokeParameter = value; RaisePropertyChanged("InvokeParameter"); }
173+
}
174+
175+
private List<Contentmodel> taskbarContentItems;
176+
177+
public List<Contentmodel> TaskbarContentItems
178+
{
179+
get { return taskbarContentItems; }
180+
set
181+
{
182+
taskbarContentItems = value;
183+
this.RaisePropertyChanged(nameof(TaskbarContentItems));
184+
}
185+
}
186+
}
187+
188+
Contentmodel cs file
189+
190+
public class Contentmodel
191+
{
192+
private string name;
193+
public string Name
194+
{
195+
get
196+
{
197+
return name;
198+
}
199+
set { name = value; }
200+
}
201+
202+
private string dateOfBirth;
203+
public string DateOfBirth
204+
{
205+
get
206+
{
207+
return dateOfBirth;
208+
}
209+
set { dateOfBirth = value; }
210+
}
211+
212+
213+
private string gender;
214+
public string Geneder
215+
{
216+
get
217+
{
218+
return gender;
219+
}
220+
set { gender = value; }
221+
}
222+
223+
private string position;
224+
public string Position
225+
{
226+
get
227+
{
228+
return position;
229+
}
230+
set { position = value; }
231+
}
232+
233+
private string dateOfJoining;
234+
public string DateOfJoining
235+
{
236+
get
237+
{
238+
return dateOfJoining;
239+
}
240+
set { dateOfJoining = value; }
241+
}
242+
243+
244+
private string imageSource;
245+
public string ImageSource
246+
{
247+
get
248+
{
249+
return imageSource;
250+
}
251+
set { imageSource = value; }
252+
}
253+
}
254+
255+
```
256+
Output:
257+
258+
259+

0 commit comments

Comments
 (0)