How to customize the Collapse Button in the GroupBar control?

1 min read

To customize the collapse button use CollapseButtonTemplate property of the GroupBar. The target type should be of type toggle button

Use the following code example for setting a template for the CollapseButton

XAML

<syncfusion:GroupBar Height="300" Width="230" x:Name="groupBar" AllowCollapse="True" VisualMode="StackMode">
            <syncfusion:GroupBar.CollapseButtonTemplate>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border Height="16" Width="16">
                        <Path Name="path" Data="M0,0L3.5,4 7,0z" Fill="Black" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Data" TargetName="path" Value="M 3 1 L 7 5 L 3 9 z"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </syncfusion:GroupBar.CollapseButtonTemplate>
 
          
            <syncfusion:GroupBarItem  Header="WPF">
 
             
                <syncfusion:GroupView  IsListViewMode="True">
                    <syncfusion:GroupViewItem Text="AutoComplete"/>
                    <syncfusion:GroupViewItem Text="Busy Indicator"/>
                    <syncfusion:GroupViewItem Text="Carousel"/>
                </syncfusion:GroupView>
            </syncfusion:GroupBarItem>
        </syncfusion:GroupBar>

The above code generates the following output

Did you find this information helpful?

Yes

Comments (0)

How to customize the Collapse Button in the GroupBar control?

Access denied