wpf - 使用 CornerRadius 在边框内滚动内容

Question

我正在为我一直在努力解决的 WPF 问题寻求帮助。我设计了一个选项卡视图，将选项卡移到左侧并垂直显示它们。这些选项卡位于左上角和左下角带有圆角的边框内。

普通标签 http://gallery.me.com/theplatz/100006/TabGood.png?derivative=medium&source=web.png&type=medium&ver=12464623560001

滚动选项卡时遇到问题。内容实际上不是剪切滚动内容的圆角，而是位于角的顶部，如下所示：

重叠选项卡 http://gallery.me.com/theplatz/100006/TabBad/web.png?ver=12464623500001

这是 XAML：

<Style x:Key="SidebarTabControl" TargetType="TabControl">
    <Setter Property="Background" Value="#FFC6D3DE" />
    <Setter Property="Padding" Value="0,20,0,0" />
    <Setter Property="TabStripPlacement" Value="Left" />
    <Setter Property="IsSynchronizedWithCurrentItem" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid KeyboardNavigation.TabNavigation="Local">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="200" MinWidth="150" MaxWidth="400" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                <Border
                    CornerRadius="10,0,0,10"
                    Background="{TemplateBinding Background}">
                    <ScrollViewer Grid.Column="0"
                        VerticalScrollBarVisibility="Auto"
                        HorizontalScrollBarVisibility="Disabled"
                        ClipToBounds="True">
                        <Border Padding="{TemplateBinding Padding}">        
                        <TabPanel
                            IsItemsHost="True"
                            KeyboardNavigation.TabIndex="1"
                            Background="Transparent">
                        </TabPanel>
                        </Border>
                    </ScrollViewer>
                </Border>

                <ContentPresenter
                    Grid.Column="1"
                    Margin="0"
                    ContentSource="SelectedContent" />

                <GridSplitter Grid.Column="0"
                  HorizontalAlignment="Right"
                  VerticalAlignment="Stretch"
                  Background="{StaticResource SplitterBrush}" 
                  ShowsPreview="True"
                  Width="1" />
              </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="SidebarTab" TargetType="TabItem">
    <Setter Property="Padding" Value="10,12,2,12" />
    <Setter Property="BorderThickness" Value="0,1,0,1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Border Padding="{TemplateBinding Padding}" 
                    Name="tab" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    BorderBrush="{StaticResource SidebarTabBorderBrush}">
                    <ContentPresenter Style="{StaticResource SidebarTabForegroundStyle}" Name="content" ContentSource="Header" />
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrushSelected}" />
                        <Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrushSelected}" />
                        <Setter TargetName="content" Property="Style" Value="{StaticResource SidebarTabForegroundStyleSelected}" />
                    </Trigger>
                    <Trigger Property="IsSelected" Value="False">
                        <Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrush}" />
                        <Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrush}" />
                        <Setter TargetName="content" Property="Style" Value="{StaticResource SidebarTabForegroundStyle}" />
                    </Trigger>
                </ControlTemplate.Triggers>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

关于我可以完成我正在寻找的东西的任何想法？我尝试了一些 ZIndex 技巧，但这似乎不起作用。

score 3 · Accepted Answer

为了完成我正在寻找的东西，我使用了此处找到的解决方案，并对其进行了修改以满足我的需要。这就是我最终得到的结果：

<Style x:Key="SidebarTabControl" TargetType="TabControl">
    <Setter Property="Background" Value="#FFC6D3DE" />
    <Setter Property="Padding" Value="0,20,0,20" />
    <Setter Property="TabStripPlacement" Value="Left" />
    <Setter Property="IsSynchronizedWithCurrentItem" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid KeyboardNavigation.TabNavigation="Local">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="200" MinWidth="150" MaxWidth="400" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

            <!-- Background of the sidebar and our clipping bounds -->
            <Border Grid.Column="0"
                CornerRadius="10,0,0,10"
                    Background="{TemplateBinding Background}"
                Name="mask" />

            <!-- Border necessary so that the top tab does not get clipped prematurely -->
            <Border Grid.Column="0" Background="Transparent">
                <!-- Add opacity mask to clip contents as they're scrolled -->
                <Border.OpacityMask>
                        <VisualBrush Visual="{Binding ElementName=mask}"/>
                </Border.OpacityMask>
                <ScrollViewer
                VerticalScrollBarVisibility="Visible"
                HorizontalScrollBarVisibility="Disabled">
                <Border Padding="{TemplateBinding Padding}">        
                        <TabPanel
                        IsItemsHost="True"
                        KeyboardNavigation.TabIndex="1"
                        Background="Transparent">
                    </TabPanel>
                </Border>
                 </ScrollViewer>
            </Border>

            <ContentPresenter
                Grid.Column="1"
                        Margin="0"
                        ContentSource="SelectedContent" />

            <GridSplitter Grid.Column="0"
                        HorizontalAlignment="Right"
                        VerticalAlignment="Stretch"
                        Background="{StaticResource SplitterBrush}" 
                        ShowsPreview="True"
                        Width="1" />
              </Grid>
        </ControlTemplate>
    </Setter.Value>
   </Setter>
</Style>

编辑：我找到了第一个 TabItem 剪切问题的解决方案。将 ScrollView 嵌套在第二个边框内并将 OpacityMask 应用于此边框，而不是 ScrollView 解决了问题。此外，我必须将 Background="Transparent" 显式设置为应用 OpacityMask 的边框，以使剪辑不会过早发生。

score 3 · Accepted Answer

您可以Clip在圆形边框上设置一个与边框轮廓相匹配的几何图形。

<Border>
    <Border.Clip>
        <RectangleGeometry Rect="..." RadiusX="..." RadiusY="..."/>
    </Border.Clip>
</Border>

请注意 - 正如您可能已经发现ClipToBounds的那样 - onBorder不起作用，因为角和圆边之间的区域在的边界内Border，因此不会被剪裁。

score 0 · Accepted Answer

我有一个类似的问题，只是假设边框会自然地剪辑它的内容。如果内容无论如何都要戳穿，那么实现圆角半径有什么好处。

我最终创建了一个自定义控件，它继承了 Border 并在其中设置了边框的剪辑。长话短说，我覆盖了 ArrangeOverride 以获得边框的最终大小，并创建了一个 RectangleGeometry 用作剪辑。

public class NodeBorder : Border
{
    static NodeBorder()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(NodeBorder), new FrameworkPropertyMetadata(typeof(NodeBorder)));
    }


    protected override Size ArrangeOverride(Size finalSize)
    {
        Rect rect= new Rect(0, 0,finalSize.Width,finalSize.Height);
        RectangleGeometry geometry = new RectangleGeometry(rect,this.CornerRadius.TopLeft,this.CornerRadius.TopRight);
        this.Clip = geometry;

        return base.ArrangeOverride(finalSize);
    }
}

当您在 VS 中创建自定义控件时，它将为 Generic.xaml 中的控件创建样式。只需删除样式，不需要它。

然后在您的 xaml 中，而不是 Border，您可以简单地使用 yournamespace:NodeBorder。

你得到了所有的边框优点，但是内置了剪辑。没有额外的标记，它会完美地适合你的边框布局。

编辑：我突然想到在边框内剪裁可能很有用。

可以修改以上内容以包含依赖属性 ContentClip ...

        public static readonly DependencyProperty ContentClipProperty =
        DependencyProperty.Register("ContentClip", typeof(Geometry), typeof(NodeBorder), new PropertyMetadata(null));

    protected override Size ArrangeOverride(Size finalSize)
    {
        Rect rect= new Rect(0, 0,finalSize.Width-(this.BorderThickness.Left+ this.BorderThickness.Right),finalSize.Height-(this.BorderThickness.Top+ this.BorderThickness.Bottom));
        RectangleGeometry geometry = new RectangleGeometry(rect,this.CornerRadius.TopLeft-1,this.CornerRadius.TopRight-1);
        this.ContentClip = geometry;

        return base.ArrangeOverride(finalSize);
    }

...并这样使用：

                <Controls:NodeBorder
                    x:Name="xxx"
                    Canvas.Top="300"
                    Canvas.Left="10"
                    CornerRadius="20"
                    BorderBrush="Red"
                    BorderThickness="2"
                    Panel.ZIndex="10"
                    >
                    <Rectangle Width="60" Height="60"
                               Fill="Blue"
                               Clip="{Binding ElementName=xxx, Path=ContentClip}"
                        />
                </Controls:NodeBorder>

wpf - 使用 CornerRadius 在边框内滚动内容

3 回答 3

Related

Reference