Question

我使用TabControl来托管工作区，使用John Smith撰写的This amazing文章中概述的方法。我想知道是否有一种方法可以在没有标签的情况下向标签控件添加内容，如图像。排序默认或空行为。我想要一个应用程序徽标，或者一些有用的箭头，这是Chrome首次使用的标签。

修改：这可能有点复杂。我在下面的标准tabcontrol上尝试了Chad的解决方案。但是，我用于工作空间的tabcontrol是由使用datatemplate的内容控件呈现的，我无法使用它来解决它的问题。 HB的解决方案有一些变化。

<DataTemplate x:Key="WorkspacesTemplate">
    <Grid>
        <Image Name="image1" Stretch="Uniform" Source="/Affinity;component/Images/affinity_logo.png" Margin="20"/>
        <TabControl IsSynchronizedWithCurrentItem="True" ItemsSource="{Binding}" 
                ItemTemplate="{StaticResource ClosableTabItemTemplate}" Margin="4">
            <TabControl.Style>
                <Style TargetType="TabControl">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Items.Count, RelativeSource={RelativeSource Self}}"
                        Value="0">
                            <Setter Property="Visibility" Value="Hidden" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TabControl.Style>
        <TabControl.Template>
            <ControlTemplate TargetType="TabControl">
                <Grid Background="White">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <ScrollViewer HorizontalScrollBarVisibility="Auto"  VerticalScrollBarVisibility="Hidden" >
                        <StackPanel x:Name="HeaderPanel"
                            Orientation="Horizontal"
                            Panel.ZIndex ="1" 
                            KeyboardNavigation.TabIndex="1"
                            Grid.Column="0"
                            Grid.Row="0"
                            Margin="2,2,2,0"
                            IsItemsHost="true"/>
                    </ScrollViewer>
                        <ContentPresenter x:Name="PART_SelectedContentHost" Grid.Row="1" 
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                          Margin="{TemplateBinding Padding}"
                                          ContentSource="SelectedContent"/>
                </Grid>
            </ControlTemplate>
        </TabControl.Template>
    </TabControl>
    </Grid>
</DataTemplate>

Answer 1

您可以在图片上叠加TabControl，如果其中没有任何项目，则隐藏它，例如

<Grid>
    <Image />
    <TabControl>
        <TabControl.Style>
            <Style TargetType="TabControl">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Items.Count, RelativeSource={RelativeSource Self}}"
                            Value="0">
                        <Setter Property="Visibility" Value="Hidden" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </TabControl.Style>
    </TabControl>
</Grid>

或者您可以使用触发器交换ContentControl的内容，如上面的方法一样，两个控件都会影响布局。 e.g。

<ContentControl>
    <ContentControl.Resources>
        <Image x:Key="Image"/>
        <TabControl x:Key="TabControl" ItemsSource="{Binding Data}" />
    </ContentControl.Resources>
    <ContentControl.Style>
        <Style TargetType="ContentControl">
            <Setter Property="Content" Value="{StaticResource TabControl}" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding Data.Count}"
                        Value="0">
                    <Setter Property="Content" Value="{StaticResource Image}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ContentControl.Style>
</ContentControl>

请注意，此处DataTrigger应直接绑定到TabControl中使用的同一集合。这是因为如果你绑定到TabControl.Items.Count，那么绑定会在触发器触发时中断，因为TabControl将被卸载。

Answer 2

您可以向选项卡控件添加背景。 XAML看起来像这样：

<TabControl Height="290" HorizontalAlignment="Left" Margin="12,350,0,0" Name="TabControl" VerticalAlignment="Top" Width="481" TabIndex="200">
    <TabControl.Background>
        <ImageBrush ImageSource="/EffectsViewer;component/res/someimage.png" />
    </TabControl.Background>
</TabControl>

请确保您使用的图片位于您的资源中。在Visual Studio中使用GUI并不难添加。至于添加控件，可能会有点复杂。我认为要做到这一点，你需要隐藏控件背后的控件，或者从它派生并自己实现它。

WPF空TabControl内容

2 个答案: