在 WPF 中对 TabControl 进行数据绑定时,如何使用自定义 TabItem 控件?

发布于 2024-07-23 08:13:18 字数 3618 浏览 8 评论 0原文

我有一个派生自 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

女中豪杰 2024-07-30 08:13:18

找到了一个方法,
从 TabControl 派生一个类并重写此函数,在我的例子中,我希望选项卡控件的项目(绑定时)为 CloseableTabItems

public class CloseableTabControl : TabControl
    {
        protected override DependencyObject GetContainerForItemOverride()
        {
            return new CloseableTabItem();
        }
    }

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

public class CloseableTabControl : TabControl
    {
        protected override DependencyObject GetContainerForItemOverride()
        {
            return new CloseableTabItem();
        }
    }

HTH Someone

Sam

走走停停 2024-07-30 08:13:18

在这种情况下,您不想设置 DataTemplateDataType。 每当需要添加新项目时,都会使用 ItemTemplate 属性的值,对于选项卡控件,它将用于创建新的 TabItem。 您应该在 DataTemplate 本身中声明您的类的实例:

<TabControl x:Name="tabCases" IsSynchronizedWithCurrentItem="True" Controls:ClosableTabItem.TabClose="TabClosed">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <Controls:ClosableTabItem>
                <TextBlock Text="{Binding Path=Id}" />
            </Controls:ClosableTabItem>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate DataType="{x:Type Entities:Case}">
            <CallLog:CaseReadOnlyDisplay DataContext="{Binding}" />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

每当将新选项卡添加到 TabControlClosableTabItem代码>.

更新; 从您的评论来看,听起来 ItemTemplate 控制 TabItem 中创建的内容,而不是更改 TabItem 本身。 要执行您想做的操作,但对于 TreeView,您需要设置 HeaderTemplate。 不幸的是,我没有看到 TabControlHeaderTemplate 属性。

我做了一些搜索,本教程通过向 TabItem.Header 添加控件来修改选项卡标题的内容。 也许您可以为您的 TabItems 创建一个 Style 来添加您的类当前正在添加的关闭按钮?

You don't want to set the DataType of the DataTemplate in this case. The value of the ItemTemplate 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 new TabItem. You should declare an instance of your class within the DataTemplate itself:

<TabControl x:Name="tabCases" IsSynchronizedWithCurrentItem="True" Controls:ClosableTabItem.TabClose="TabClosed">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <Controls:ClosableTabItem>
                <TextBlock Text="{Binding Path=Id}" />
            </Controls:ClosableTabItem>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate DataType="{x:Type Entities:Case}">
            <CallLog:CaseReadOnlyDisplay DataContext="{Binding}" />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

This will cause a new ClosableTabItem to be created whenever a new tab is added to the TabControl.

Update; From your comment, it sounds like that the ItemTemplate controls what is created within the TabItem, rather than changing the TabItem itself. To do what you want to do, but for a TreeView, you would set the HeaderTemplate. Unfortunately, I don't see a HeaderTemplate property of TabControl.

I did some searching, and this tutorial modifies the contents of the tab headers by adding controls to TabItem.Header. Maybe you could create a Style for your TabItems that would add the close button that your class is currently adding?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文