在Telerik RadTabControl中的Tab Header添加关闭按钮

最新推荐文章于 2024-12-19 11:21:48 发布

最新推荐文章于 2024-12-19 11:21:48 发布 · 253 阅读

本文介绍如何在Telerik RadTabControl中通过HeaderTemplate自定义添加关闭按钮的方法。客户希望能在每个Tab页上都拥有一个关闭选项，这并非TelerikRadTabControl默认支持的功能。通过使用XAML代码，我们可以在每个Tab项中加入一个带有关闭图标的小按钮。

客户要求在TabStrip中增加一个关闭按钮，Telerik RadTabControl 默认并不支持此功能，但是可通过HeaderTemplate来实现

在RadTabControl的TabStrip中实现Close Button

xaml片段：

<telerikNavigation:RadTabControl x:Name="tabMain" Background="#FFFFFFFF"
ItemsSource="{Binding Tabs}" SelectedItem="{Binding SelectedItem}">
<telerikNavigation:RadTabControl.ItemContainerStyle>
<Style TargetType="telerikNavigation:RadTabItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Grid Margin="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Path=Header}" Cursor="Hand"
Grid.Column="1" Margin="5 0 5 0" VerticalAlignment="Center" />
<Button VerticalAlignment="Center" ToolTipService.ToolTip="Close"
Grid.Column="2" Margin="2,0,0,0" Width="16" Height="16"
Cursor="Hand" Click="CloseButton_Click">
<StackPanel>
<Image Source="images/red_cross.png" />
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<ContentControl Content="{Binding Content}" HorizontalContentAlignment="Stretch" ></ContentControl>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</telerikNavigation:RadTabControl.ItemContainerStyle>
</telerikNavigation:RadTabControl>