How to customize the Collapse Button in the GroupBar control?
How to customize the Collapse Button in the GroupBar control?
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
