首页 文章

如何向WPF TabControl添加额外内容？

提问于
浏览 次
5

我有一个自定义ControlTemplate用于WPF TabControl，它在TabItem Headers 的左侧和右侧添加了按钮 . 目前这不是命名部分，因为按钮命令绑定在ControlTemplates XAML中，不需要在ControlTemplate之外公开 .

这适用于按钮，但如果我想将内容添加到TabItemHeaders的左侧（或右侧），可以绑定到ControlTemplate之外，以便我的TabControl变得更灵活，该怎么办？

我的想法是继承TabControl并在ControlTemplate中有两个命名部分，并将它们作为新控件的属性公开; CustomTabControl.LeftContentArea和CustomTabControl.RightContentArea分别 . 每个命名的部分都是一个ContentPresenter，每个ContentPresenters Content属性都由上面提到的属性公开 .

但是，当我尝试这个时，我无法将内容放入左右内容区域 .

编辑：为了清楚我已经包含了一个图像 . 红色矩形显示我希望能够放置额外内容的位置 .

alt text

更新：下面是我到目前为止取得的进展的屏幕截图，希望这将有助于解释我的问题 .

屏幕截图显示了我的自定义选项卡控件，其中有两个空白选项卡和三个当前位于TabItem Headers 区域右侧的按钮 . 这些按钮当前在TabControls自定义ControlTemplate I.E中定义 . ControlTemplates Grid中有一个ColumnDefinition，它包含一个托管3个按钮的StackPanel .

alt text

我正在寻找的是一种允许选项卡控件的消费者决定选项卡旁边区域内容的内容的方法 . 例如 . 用户应该能够做这样的事情：

<local:CustomTabControl>
    <local:CustomTabControl.RightContentArea>
        <!-- This can be changed to ANY content that the user wants -->
        <StackPanel Orientation="Horizontal">
            <Button Content="Test" />
            <Button Content="Test" />
            <Button Content="Test" />
        </StackPanel>
    </local:CustomTabControl.RightContentArea>

    <!-- TabItems are added as normal -->
    <TabItem Header="Tab One" />
    <TabItem Header="Tab Two" />

</local:CustomTabControl>
c# wpf xaml wpf-controls

3 回答

  • 2

    我尝试了另一种（懒惰）方式，即创建另一个与TabControl占用相同空间的网格，即两者都在Grid.Row = 0中 . 我已将网格高度绑定到第一个标签的高度，因此如果标签更改高度，则其他控件将保持居中 . 我在窗口上设置了MinWidth，因此控件不会与选项卡重叠 .

    将此代码粘贴到新的WPF窗口中......

    <Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="306" Width="490" MinWidth="300">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TabControl Grid.Row="0" x:Name="tabControl">
        <TabItem x:Name="tabItem" Header="TabItem" Height="50">
            <Grid Background="#FFE5E5E5"/>
        </TabItem>
        <TabItem Header="TabItem">
            <Grid Background="#FFE5E5E5"/>
        </TabItem>
    </TabControl>

    <Grid Grid.Row="0" Height="{Binding ActualHeight, ElementName=tabItem}" 
       VerticalAlignment="Top" Margin="0,2,0,0">
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" 
                VerticalAlignment="Center" Margin="20,0">
            <TextBlock VerticalAlignment="Center" Margin="10,0" FontSize="16" 
                   Foreground="Red" FontFamily="Calibri">My Text</TextBlock>
            <Button Content="My Button" />
        </StackPanel>
    </Grid>

</Grid>
</Window>

    ......你会得到这个：

    enter image description here

    回复于
  • 3

    根据您需要多少灵活性，有一些方法比其他方法更合适，我自己尝试使用DynamicResources，因为它通常比创建新的用户控件麻烦 .

    以下是如何在Tab-Header左侧添加其他内容的示例：

    <TabControl>

    <TabControl.Resources>
        <DataTemplate x:Key="AugmentedTabItem">
            <StackPanel Orientation="Horizontal">
                <ContentPresenter Content="{DynamicResource ContentLeft}" Margin="0,0,5,0"/>
                <ContentPresenter Content="{Binding}"/>
            </StackPanel>
        </DataTemplate>     
    </TabControl.Resources>

    <TabItem Header="ÜberTab" HeaderTemplate="{StaticResource AugmentedTabItem}">
       <TabItem.Resources>
            <TextBlock x:Key="ContentLeft" Text=">>>" Foreground="Blue"/>           

        </TabItem.Resources>
    </TabItem>      
</TabControl>

    希望有所帮助，如果有什么不清楚或者这还不够，请发表评论 .

    回复于
  • 3

    对于任何感兴趣的人this stackoverflow post完美地回答了我的问题 .

    回复于

相关问题