背景 w。不透明度给出了不需要的边界

Question

我有一个带有两个 TabItem 的 TabControl，在 Visual Studio 2013 的可视化设计器中看起来是无缝的 - 但是当我运行我的解决方案时，会创建一个边框，我似乎无法摆脱它。在图像中，它看起来像是在网格周围，但我关心的是选项卡标题和选项卡内容之间的边界。

如果我从背景中替换透明度，而是使用纯色，问题就会消失。看起来它与半透明有关。

在视觉设计器中是这样的：

以及我构建和运行时的结果：

代码有点简单，将所有 BorderThickness 设置为 0。

<Window>
    <Window.Resources>
        <SolidColorBrush x:Key="HasSelectedBrush" Color="White" Opacity="0.65" />
        <SolidColorBrush x:Key="NoSelectedBrush" Color="White" Opacity="0.5" />

        <Style TargetType="{x:Type TabControl}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabControl}">
                        <StackPanel>
                            <TabPanel x:Name="HeaderPanel" Panel.ZIndex="1" Margin="0" IsItemsHost="True" KeyboardNavigation.TabIndex="1" Background="Transparent" />
                            <Border x:Name="Border" BorderBrush="Transparent" BorderThickness="0" Margin="0" KeyboardNavigation.TabIndex="2" Background="Transparent">
                                <ContentPresenter ClipToBounds="True" Margin="0" ContentSource="SelectedContent" />
                            </Border>
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                            <Border x:Name="Border" Margin="0" Background="{ StaticResource NoSelectedBrush }" BorderThickness="0">
                                <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="0, 20, 0, 20" />
                            </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Panel.ZIndex" Value="100" />
                                <Setter TargetName="Border" Property="Background" Value="{ StaticResource HasSelectedBrush }" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid x:Name="MainViewGrid">
            <Grid.Background>
                <ImageBrush Stretch="Fill" ImageSource="Assets/Images/Background.jpg" />
            </Grid.Background>
            <TabControl Width="500" Height="400" Margin="0" Padding="0" Background="Transparent">
                <TabItem Header="Tab One" Width="250">
                    <controls:FirstTabControl />
                </TabItem>
                <TabItem Header="Tab Two" Width="250">
                    <controls:SecondTabControl />
                </TabItem>
            </TabControl>
        </Grid>
    </Grid>
</Window>

更新

经过更多测试，我得出结论，这取决于窗口大小。似乎边框来自抗锯齿，但是将SnapsToDevicePixels设置为true并不能解决我的问题。

Answer 1

没有答案，只是对问题的细化。

根据这个问题我做了很多实验，我发现了另一个有趣的事实。

堆栈面板在 TabControl 中时没有连续放置 Childs！

这是一个例子。在这段代码中

鉴于此代码：

<Grid Background="Black"  Width="150">
    <StackPanel>
        <Border Background="White" Height="50" />
        <Border Background="White" Height="50" />
        <Border Background="White" Height="50" />
    </StackPanel>
</Grid>

结果：

但在 TabControl 中，如：

    <TabControl Background="Black" Width="150" >
        <TabItem Header="Tab" >
            <StackPanel>
                <Border Background="White" Height="50" />
                <Border Background="White" Height="50" />
                <Border Background="White" Height="50" />
            </StackPanel>
        </TabItem>
    </TabControl>

为什么在他们的Borders 上有线条？