How to hide the close button in WPF TabSplitter ?

1 min read

You can hide the close button on top-right position of TabSplitter to close TabSplitter items by customizing it’s template. The template of TabSplitter can be customized by following steps.

Right click on TabSplitter control in MainWindow designer.
Select Edit Template à Edit a Copy.

Template customizing

Style for TabSplitter control will be created in MainWindow.xaml.
Change the visibility of ToggleButton named PART_CloseButton.

MainWindow.xaml

<Window.Resources>
<Style x:Key="TabSplitterStyle1" TargetType="{x:Type syncfusion:TabSplitter}">
<Setter Property="Template">
.
.
.
<ToggleButton x:Name="PART_CloseButton" AllowDrop="False" DockPanel.Dock="Right" Focusable="False" Height="15" Width="15" Visibility="Collapsed">                                                                            <ToggleButton.Command>                                                                   
         <RoutedCommand/>  
 </ToggleButton.Command> 
 <ToggleButton.Template>           
 <ControlTemplate TargetType="{x:Type ButtonBase}"> 
     <syncfusion:Border3D x:Name="brdBack" BorderBrush="Transparent" BorderThickness="1" Margin="1"> 
            <Path x:Name="pathButton" Data="M109,51L216,142 M215,52L109,142" HorizontalAlignment="Center" Height="8" Stretch="Fill" SnapsToDevicePixels="False" Stroke="Black" StrokeThickness="1.5" VerticalAlignment="Center" Width="9"/> 
     </syncfusion:Border3D>
  <ControlTemplate.Triggers> 
         <Trigger Property="IsPressed" Value="True">
                 <Setter Property="IsInverted" TargetName="brdBack" Value="True"/>     
                 <Setter Property="Content" Value="1,1,-1,-1"/>
        </Trigger>
         <Trigger Property="IsMouseOver" Value="True"> 
                 <Setter Property="Background" TargetName="brdBack" Value="#FFCEEDFA"/>
                 <Setter Property="BorderBrush" TargetName="brdBack" Value="#FF3E89F9"/> 
                 <Setter Property="Stroke" TargetName="pathButton" Value="Black"/> 
                 <Setter Property="Fill" TargetName="pathButton" Value="Black"/> 
           </Trigger> 
      </ControlTemplate.Triggers>
 </ControlTemplate>  
</ToggleButton.Template>                                                                    
</ToggleButton>
.
.
.
<Setter Property="MouseOverForeground" Value="Black"/>
</Style>
</Window.Resources>
<Grid>
        <syncfusion:TabSplitter Name="Tabsplit" HideHeaderOnSingleChild="True" Style="{DynamicResource TabSplitterStyle1}">
            <syncfusion:TabSplitterItem Header="tab1">
                <syncfusion:TabSplitterItem.TopPanelItems>
                    <syncfusion:SplitterPage Header="Split1"></syncfusion:SplitterPage>
                </syncfusion:TabSplitterItem.TopPanelItems>
                <syncfusion:TabSplitterItem.BottomPanelItems>
                    <syncfusion:SplitterPage Header="Split2"></syncfusion:SplitterPage>
                </syncfusion:TabSplitterItem.BottomPanelItems>
            </syncfusion:TabSplitterItem>
        </syncfusion:TabSplitter>
</Grid>

Screenshots: TabSplitter_hide close button

View sample in GitHub

Did you find this information helpful?

Yes

Comments (0)

How to hide the close button in WPF TabSplitter ?

Access denied