Skip to content

Commit a09ffc3

Browse files
Manivannan-EManivannan-E
authored
Merge pull request #1531 from syncfusion-content/WPF-880302-Add-code-snippet-in-Accordion-control-hotfix
WPF-880302 : Add code snippets example for Selecting item using SelectedItem and SelectedIndex in Accordion control
2 parents c468e9a + 5ef1673 commit a09ffc3

File tree

3 files changed

+147
-0
lines changed

3 files changed

+147
-0
lines changed

‎wpf/Accordion/Selecting-Items-images/wpf-accordion-selected-index-selection.png

12.2 KB
Loading

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

12.2 KB
Loading

‎wpf/Accordion/Selecting-Items.md

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,157 @@ 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+
<layout:SfAccordion SelectedIndex="2" Width="500" Height="200">
22+
<layout:SfAccordionItem Header="WPF"
23+
Content="WPF is a framework for building rich Windows desktop applications"/>
24+
<layout:SfAccordionItem Header="UWP"
25+
Content="UWP is a framework for building cross-platform Windows applications."/>
26+
<layout:SfAccordionItem Header="WinUI"
27+
Content="WinUI is a modern framework for building Windows desktop applications."/>
28+
<layout:SfAccordionItem Header="Windows Forms"
29+
Content="Windows Forms is a UI framework for building classic Windows desktop applications."/>
30+
<layout:SfAccordionItem Header="Metro Studio"
31+
Content="Metro Studio is an icon library with customizable flat and wireframe icon templates."/>
32+
</layout:SfAccordion>
33+
{% endhighlight %}
34+
35+
{% highlight C# %}
36+
37+
// Create SfAccordion control
38+
SfAccordion accordion = new SfAccordion();
39+
accordion.Width = 500;
40+
accordion.Height = 200;
41+
42+
// Create SfAccordionItems
43+
SfAccordionItem wpfItem = new SfAccordionItem
44+
{
45+
Header = "WPF",
46+
Content = "WPF is a framework for building rich Windows desktop applications"
47+
};
48+
SfAccordionItem uWPItem = new SfAccordionItem
49+
{
50+
Header = "UWP",
51+
Content = "UWP is a framework for building cross-platform Windows applications."
52+
};
53+
54+
SfAccordionItem winUIItem = new SfAccordionItem
55+
{
56+
Header = "WinUI",
57+
Content = "WinUI is a modern framework for building Windows desktop applications."
58+
};
59+
60+
SfAccordionItem windowsFormsItem = new SfAccordionItem
61+
{
62+
Header = "Windows Forms",
63+
Content = "Windows Forms is a UI framework for building classic Windows desktop applications."
64+
};
65+
66+
SfAccordionItem metroStudioItem = new SfAccordionItem
67+
{
68+
Header = "Metro Studio",
69+
Content = "Metro Studio is an icon library with customizable flat and wireframe icon templates."
70+
};
71+
72+
// Add the items to the accordion
73+
accordion.Items.Add(wpfItem);
74+
accordion.Items.Add(uWPItem);
75+
accordion.Items.Add(winUIItem);
76+
accordion.Items.Add(windowsFormsItem);
77+
accordion.Items.Add(metroStudioItem);
78+
accordion.SelectedIndex = 2;
79+
80+
{% endhighlight %}
81+
82+
{% endtabs %}
83+
84+
![WPF Accordion item selection using SelectedIndex](Selecting-Items-images/wpf-accordion-selected-index-selection.png)
85+
1886
## Selecting item using SelectedItem
1987

2088
[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.
2189

90+
{% tabs %}
91+
92+
{% highlight XAML %}
93+
94+
<Grid>
95+
<Grid.DataContext>
96+
<local:AccordionViewModel/>
97+
</Grid.DataContext>
98+
<StackPanel>
99+
<layout:SfAccordion ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedAccordionItem, Mode=TwoWay}" Width="500" Height="200" Margin="50">
100+
<layout:SfAccordion.HeaderTemplate>
101+
<DataTemplate>
102+
<TextBlock Text="{Binding Name}"/>
103+
</DataTemplate>
104+
</layout:SfAccordion.HeaderTemplate>
105+
<layout:SfAccordion.ContentTemplate>
106+
<DataTemplate>
107+
<TextBlock Text="{Binding Description}"/>
108+
</DataTemplate>
109+
</layout:SfAccordion.ContentTemplate>
110+
</layout:SfAccordion>
111+
</StackPanel>
112+
</Grid>
113+
114+
{% endhighlight %}
115+
116+
{% highlight C# %}
117+
118+
public class AccordionViewModel
119+
{
120+
private object _selectedItem;
121+
public object SelectedItem
122+
{
123+
get { return _selectedItem; }
124+
set
125+
{
126+
_selectedItem = value;
127+
OnPropertyChanged(nameof(SelectedItem));
128+
}
129+
}
130+
131+
private ObservableCollection<AccordionItem> _items;
132+
public ObservableCollection<AccordionItem> Items
133+
{
134+
get { return _items; }
135+
set
136+
{
137+
_items = value;
138+
OnPropertyChanged(nameof(Items));
139+
}
140+
}
141+
142+
public AccordionViewModel()
143+
{
144+
Items = new ObservableCollection<AccordionItem>
145+
{
146+
new AccordionItem { Name = "WPF", Description = "WPF is a framework for building rich Windows desktop applications."},
147+
new AccordionItem { Name = "UWP", Description = "UWP is a framework for building cross-platform Windows applications." },
148+
new AccordionItem { Name = "WinUI", Description = "WinUI is a modern framework for building Windows desktop applications." },
149+
new AccordionItem { Name = "Windows Form", Description = "Windows Forms is a UI framework for building classic Windows desktop applications." },
150+
new AccordionItem { Name = "Metro Studio", Description = "Metro Studio is an icon library with customizable flat and wireframe icon templates." }
151+
};
152+
153+
SelectedItem = Items[4];
154+
}
155+
}
156+
157+
public class AccordionItem
158+
{
159+
public string Name { get; set; }
160+
public string Description { get; set; }
161+
}
162+
163+
{% endhighlight %}
164+
165+
{% endtabs %}
166+
167+
![WPF Accordion item selection using SelectedItem](Selecting-Items-images/wpf-accordion-selected-item-selection.png)
168+
22169
## Retrieving the selected items
23170

24171
[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)