在 WPF 中对 TabControl 进行数据绑定时,如何使用自定义 TabItem 控件?
我有一个派生自 TabItem
的自定义控件,我想将该自定义 TabItem
数据绑定到库存 TabControl
。 我宁愿避免为这种罕见的情况创建一个新的 TabControl
。
这就是我所拥有的,但我没有运气加载正确的控件。 在本例中,我想使用我的 ClosableTabItem
控件而不是常用的 TabItem
控件。
<TabControl x:Name="tabCases" IsSynchronizedWithCurrentItem="True"
Controls:ClosableTabItem.TabClose="TabClosed" >
<TabControl.ItemTemplate>
<DataTemplate DataType="{x:Type Controls:ClosableTabItem}" >
<TextBlock Text="{Binding Path=Id}" />
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate DataType="{x:Type Entities:Case}">
<CallLog:CaseReadOnlyDisplay DataContext="{Binding}" />
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
编辑:这就是我最终得到的结果,而不是尝试绑定自定义控件。 “关闭命令”我从 上一个问题。
<Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource {x:Type TabItem}}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border
Name="Border"
Background="LightGray"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="25,0,0,0"
SnapsToDevicePixels="True">
<StackPanel Orientation="Horizontal">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="20,1,5,1"/>
<Button
Command="{Binding Path=CloseCommand}"
Cursor="Hand"
DockPanel.Dock="Right"
Focusable="False"
Margin="1,1,5,1"
Background="Transparent"
BorderThickness="0">
<Image Source="/Russound.Windows;component/Resources/Delete.png" Height="10" />
</Button>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold" />
<Setter TargetName="Border" Property="Background" Value="LightBlue" />
<Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
<Setter TargetName="Border" Property="BorderBrush" Value="DarkBlue" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have a custom control that is derived from TabItem
, and I want to databind that custom TabItem
to a stock TabControl
. I would rather avoid creating a new TabControl
just for this rare case.
This is what I have and I'm not having any luck getting the correct control to be loaded. In this case I want to use my ClosableTabItem
control instead of the stock TabItem
control.
<TabControl x:Name="tabCases" IsSynchronizedWithCurrentItem="True"
Controls:ClosableTabItem.TabClose="TabClosed" >
<TabControl.ItemTemplate>
<DataTemplate DataType="{x:Type Controls:ClosableTabItem}" >
<TextBlock Text="{Binding Path=Id}" />
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate DataType="{x:Type Entities:Case}">
<CallLog:CaseReadOnlyDisplay DataContext="{Binding}" />
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
EDIT: This is what I ended up with, rather than trying to bind a custom control.
The "CloseCommand" im getting from a previous question.
<Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource {x:Type TabItem}}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border
Name="Border"
Background="LightGray"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="25,0,0,0"
SnapsToDevicePixels="True">
<StackPanel Orientation="Horizontal">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="20,1,5,1"/>
<Button
Command="{Binding Path=CloseCommand}"
Cursor="Hand"
DockPanel.Dock="Right"
Focusable="False"
Margin="1,1,5,1"
Background="Transparent"
BorderThickness="0">
<Image Source="/Russound.Windows;component/Resources/Delete.png" Height="10" />
</Button>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold" />
<Setter TargetName="Border" Property="Background" Value="LightBlue" />
<Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
<Setter TargetName="Border" Property="BorderBrush" Value="DarkBlue" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
找到了一个方法,
从 TabControl 派生一个类并重写此函数,在我的例子中,我希望选项卡控件的项目(绑定时)为 CloseableTabItems
HTH Somer
Sam
found a way,
derive a class from TabControl and override this function, in my case I want the items of the tab control (when bound) to be CloseableTabItems
HTH Someone
Sam
在这种情况下,您不想设置
DataTemplate
的DataType
。 每当需要添加新项目时,都会使用ItemTemplate
属性的值,对于选项卡控件,它将用于创建新的TabItem
。 您应该在DataTemplate
本身中声明您的类的实例:每当将新选项卡添加到
TabControlClosableTabItem
代码>.更新; 从您的评论来看,听起来
ItemTemplate
控制TabItem
中创建的内容,而不是更改TabItem
本身。 要执行您想做的操作,但对于TreeView
,您需要设置HeaderTemplate
。 不幸的是,我没有看到TabControl
的HeaderTemplate
属性。我做了一些搜索,本教程通过向
TabItem.Header
添加控件来修改选项卡标题的内容。 也许您可以为您的TabItems
创建一个Style
来添加您的类当前正在添加的关闭按钮?You don't want to set the
DataType
of theDataTemplate
in this case. The value of theItemTemplate
property is used whenever a new item needs to be added, and in the case of a tab control it will be used to create a newTabItem
. You should declare an instance of your class within theDataTemplate
itself:This will cause a new
ClosableTabItem
to be created whenever a new tab is added to theTabControl
.Update; From your comment, it sounds like that the
ItemTemplate
controls what is created within theTabItem
, rather than changing theTabItem
itself. To do what you want to do, but for aTreeView
, you would set theHeaderTemplate
. Unfortunately, I don't see aHeaderTemplate
property ofTabControl
.I did some searching, and this tutorial modifies the contents of the tab headers by adding controls to
TabItem.Header
. Maybe you could create aStyle
for yourTabItems
that would add the close button that your class is currently adding?