Skip to content

Commit 452b195

Browse files
Priyanka-VijayasankarPriyanka-Vijayasankar
Priyanka-Vijayasankar
authored and
Priyanka-Vijayasankar
committed
Added code snippet for Accordion control.
1 parent c468e9a commit 452b195

File tree

3 files changed

+150
-0
lines changed

3 files changed

+150
-0
lines changed

‎wpf/Accordion/Selecting-Items-images/wpf-accordion-selected-item-selectedindex.png

10.6 KB
Loading

‎wpf/Accordion/Selecting-Items-images/wpf-accordion-selected-item-selecteditem.png

10.6 KB
Loading

‎wpf/Accordion/Selecting-Items.md

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,160 @@ Items can be selected programmatically using the properties [SelectedIndex](http
1515

1616
[SelectedIndex](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Layout.SfAccordion.html#Syncfusion_Windows_Controls_Layout_SfAccordion_SelectedIndex) property is used to select an item using its index. It contains the index of most recently selected item in case of OneOrMore, ZeroOrMore SelectionModes.
1717

18+
{% tabs %}
19+
20+
{% highlight XAML %}
21+
22+
<Grid>
23+
<StackPanel>
24+
<layout:SfAccordion SelectedIndex="2" Width="500" Height="200">
25+
<layout:SfAccordionItem Header="WPF" Content="Essential Studio for WPF"/>
26+
<layout:SfAccordionItem Header="SilverLight" Content="Essential Studio for WPF"/>
27+
<layout:SfAccordionItem Header="WinRT" Content="Essential Studio for WPF"/>
28+
<layout:SfAccordionItem Header="Windows Phone" Content="Essential Studio for WPF"/>
29+
<layout:SfAccordionItem Header="Universal" Content="Essential Studio for WPF"/>
30+
</layout:SfAccordion>
31+
</StackPanel>
32+
</Grid>
33+
34+
{% endhighlight %}
35+
36+
{% highlight C# %}
37+
38+
// Create SfAccordion control
39+
SfAccordion accordion = new SfAccordion();
40+
accordion.Width = 500;
41+
accordion.Height = 200;
42+
43+
// Create SfAccordionItems
44+
SfAccordionItem wpfItem = new SfAccordionItem
45+
{
46+
Header = "WPF",
47+
Content = "Essential Studio for WPF"
48+
};
49+
50+
SfAccordionItem silverlightItem = new SfAccordionItem
51+
{
52+
Header = "SilverLight",
53+
Content = "Essential Studio for WPF"
54+
};
55+
56+
SfAccordionItem winrtItem = new SfAccordionItem
57+
{
58+
Header = "WinRT",
59+
Content = "Essential Studio for WPF"
60+
};
61+
62+
SfAccordionItem windowsPhoneItem = new SfAccordionItem
63+
{
64+
Header = "Windows Phone",
65+
Content = "Essential Studio for WPF"
66+
};
67+
68+
SfAccordionItem universalItem = new SfAccordionItem
69+
{
70+
Header = "Universal",
71+
Content = "Essential Studio for WPF"
72+
};
73+
74+
// Add the items to the accordion
75+
accordion.Items.Add(wpfItem);
76+
accordion.Items.Add(silverlightItem);
77+
accordion.Items.Add(winrtItem);
78+
accordion.Items.Add(windowsPhoneItem);
79+
accordion.Items.Add(universalItem);
80+
accordion.SelectedIndex = 2;
81+
this.Content = accordion;
82+
83+
{% endhighlight %}
84+
85+
{% endtabs %}
86+
87+
![WPF Accordion Item with SelectedIndex](Selecting-Items-images/wpf-accordion-selected-item-selectedindex.png)
88+
1889
## Selecting item using SelectedItem
1990

2091
[SelectedItem](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Layout.SfAccordion.html#Syncfusion_Windows_Controls_Layout_SfAccordion_SelectedItem) property is used to select an item using its instance. It contains the instance of most recently selected item in case of OneOrMore, ZeroOrMore SelectionModes.
2192

93+
{% tabs %}
94+
95+
{% highlight XAML %}
96+
97+
<Grid>
98+
<Grid.DataContext>
99+
<local:AccordionViewModel/>
100+
</Grid.DataContext>
101+
<StackPanel>
102+
<layout:SfAccordion ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedAccordionItem, Mode=TwoWay}" Width="500" Height="200" Margin="50">
103+
<layout:SfAccordion.HeaderTemplate>
104+
<DataTemplate>
105+
<TextBlock Text="{Binding Name}"/>
106+
</DataTemplate>
107+
</layout:SfAccordion.HeaderTemplate>
108+
<layout:SfAccordion.ContentTemplate>
109+
<DataTemplate>
110+
<TextBlock Text="{Binding Description}"/>
111+
</DataTemplate>
112+
</layout:SfAccordion.ContentTemplate>
113+
</layout:SfAccordion>
114+
</StackPanel>
115+
</Grid>
116+
117+
{% endhighlight %}
118+
119+
{% highlight C# %}
120+
121+
public class AccordionViewModel
122+
{
123+
private object _selectedAccordionItem;
124+
public object SelectedAccordionItem
125+
{
126+
get { return _selectedAccordionItem; }
127+
set
128+
{
129+
_selectedAccordionItem = value;
130+
OnPropertyChanged(nameof(SelectedAccordionItem));
131+
}
132+
}
133+
134+
private ObservableCollection<AccordionItem> _items;
135+
public ObservableCollection<AccordionItem> Items
136+
{
137+
get { return _items; }
138+
set
139+
{
140+
_items = value;
141+
OnPropertyChanged(nameof(Items));
142+
}
143+
}
144+
145+
public AccordionViewModel()
146+
{
147+
Items = new ObservableCollection<AccordionItem>
148+
{
149+
new AccordionItem { Name = "WPF", Description = "Essential Studio for WPF"},
150+
new AccordionItem { Name = "SilverLight", Description = "Essential Studio for Silverlight" },
151+
new AccordionItem { Name = "WinRT", Description = "Essential Studio for WinRT" },
152+
new AccordionItem { Name = "Windows Phone", Description = "Essential Studio for Windows Phone" },
153+
new AccordionItem { Name = "Universal", Description = "Essential Studio for Universal" }
154+
};
155+
156+
SelectedAccordionItem = Items[4];
157+
}
158+
}
159+
160+
public class AccordionItem
161+
{
162+
public string Name { get; set; }
163+
public string Description { get; set; }
164+
}
165+
166+
{% endhighlight %}
167+
168+
{% endtabs %}
169+
170+
![WPF Accordion Item with SelectedItem](Selecting-Items-images/wpf-accordion-selected-item-selecteditem.png)
171+
22172
## Retrieving the selected items
23173

24174
[SelectedItems](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Layout.SfAccordion.html#Syncfusion_Windows_Controls_Layout_SfAccordion_SelectedItems) property contains a collection of selected items instances for all the SelectionModes. It is a read only property and it cannot be set.

0 commit comments

Comments
 (0)