GroupBar setting GroupItem to open by default and binding click events

[Steve]

Hello team,

I am attempting to use the GroupBar control as a simple menu. I have written a WPF User Control using GroupBar to act as the menu using the MVVM pattern (think a "ConnectWise" like menu on the left of the screen).

In accordance with the MVVM pattern, there is no logic in the code behind for this control (view). All logic will be in a separate class file (viewmodel).

Given the following mockup XAML of:

<syncfusion:GroupBar x:Name="Menu"
                                 DockPanel.Dock="Left"
                                 HorizontalAlignment="Left"
                                 AnimationType="Slide"
                                 AnimationSpeed="10" 
                                 MinWidth="150"
                                 MinHeight="100"
                                 VisualMode="Default"
                                 VerticalAlignment="Top" 
                                 AllowCollapse="True"
                                 Width="200"
                                 syncfusion:SkinStorage.VisualStyle="Transparent">
               
                <syncfusion:GroupBarItem ContentBreadth="0"
                                         ContentLength="0"
                                         HeaderText="Group 1"
                                         ShowInGroupBar="True" >
                    <syncfusion:GroupView IsListViewMode="True">
                        <syncfusion:GroupViewItem Text="Group 1 Selection 1"/>
                        <syncfusion:GroupViewItem Text="Group 1 Selection 2"/>
                        <syncfusion:GroupViewItem Text="Group 1 Selection 2"/>
                    </syncfusion:GroupView>
                </syncfusion:GroupBarItem>
               
                <syncfusion:GroupBarItem ContentBreadth="0"
                                         ContentLength="0"
                                         HeaderText="Group 2"
                                         ShowInGroupBar="True">
                    <syncfusion:GroupView IsListViewMode="True">
                        <syncfusion:GroupViewItem Text="Group 2 Selection 1"/>
                        <syncfusion:GroupViewItem Text="Group 2 Selection 2"/>
                        <syncfusion:GroupViewItem Text="Group 2 Selection 3"/>
                        <syncfusion:GroupViewItem Text="Group 2 Selection 4"/>
                    </syncfusion:GroupView>
                </syncfusion:GroupBarItem>
               
                <syncfusion:GroupBarItem ContentBreadth="0"
                                         ContentLength="0"
                                         HeaderText="Group 3"
                                         ShowInGroupBar="True">
                    <syncfusion:GroupView IsListViewMode="True">
                        <syncfusion:GroupViewItem Text="Group 3 Selection 1"/>
                        <syncfusion:GroupViewItem Text="Group 3 Selection 2"/>
                        <syncfusion:GroupViewItem Text="Group 3 Selection 2"/>
                    </syncfusion:GroupView>
                </syncfusion:GroupBarItem>
               
            </syncfusion:GroupBar>

I have two questions:

1. How do I make a GroupBarItem to be opened by default (ie, in the above code, "Group 1" open on displaying the control).
2. Can I do a binding for the OnClick event of the GroupViewItem to an ICommand? I would like to open/change another user control on a different section of the app.

Thanks for your assistance

[Durga Rajan]

Hi Steve, 

Thanks for contacting Syncfusion support. 

Query 1 : How do I make a GroupBarItem to be opened by default (ie, in the above code, "Group 1" open on displaying the control). 

We suggest you to set the property IsExpanded as true to display all the groupviewitems in the GroupBarItem. Please refer the below code snippet, 

<syncfusion:GroupBarItem ContentBreadth="0"  

                                         ContentLength="0" IsExpanded="True" 

                                         HeaderText="Group 1" 

                                         ShowInGroupBar="True" > 

Query 2 : Can I do a binding for the OnClick event of the GroupViewItem to an ICommand? I would like to open/change another user control on a different section of the app. 

We have checked your query and prepared sample which tries to meet your requirement. In this sample we have bound the SelectedCommand of ViewModel to the SelectionChanged event using EventToCommand class. Please download the sample for the same from below location, 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/GroupBar_MVVM_Sample112516842.zip 

Please get back to us with more details if you are facing any issues with above sample or if we have misunderstood your query or in case of any concern. This would help us to provide solution t earliest. 

Regards, 

Durga S. 

[Steve]

Hi Team,

Thanks for your rapid reply and sample code.

This has given me the information I was missing to continue with my project.

Steve.,

[Durga Rajan]

Hi Steve,

Thanks for the update. Please let us know whether you need any further assistance.

Regards,
Durga S.

[Durga Rajan]

Hi Steve,

Thanks for the update. Please let us know whether you need any further assistance.

Regards,
Durga S.