c# - WPF 切角元素

Question

我正在尝试在 WPF 中创建类似于下图的内容。此控件旨在成为我的应用程序中所有内容的基础 View ，并将位于具有背景(可能是某种渐变)的 Window 控件内。

要求如下:

• 三边圆角(左上角、左下角和右下角)
• 切掉右上角的选项卡看角，“切区”后面的背景是透明的，这样窗口的背景渐变就会显示出来(让它看起来像是真的被切掉了)
• 标题区域应该是一个内容容器，这样我就可以在里面放任何东西，比如图标和文本
• 内容区域需要有一个最小高度，然后在内部内容超过它时增长(不是动态 - 只是支持其中任何元素的高度)

我已经为此苦苦挣扎了几个小时，但作为 WPF 的新手，我开始发现自己在原地打转。我认为 WPF 的灵 active 有很大的好处，但对于刚起步的人来说，这几乎是令人望而生畏的。

任何帮助将不胜感激!谢谢!

Answer 1

我不知道如何“填充”剪辑，所以我用代码制作了剪辑。让我知道您是否需要更多帮助来添加更多属性来控制颜色等。 开始了:

代码:

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

    public double DogEar
    {
        get { return (double)GetValue(DogEarProperty); }
        set { SetValue(DogEarProperty, value); }
    }

    public static readonly DependencyProperty DogEarProperty =
        DependencyProperty.Register("DogEar",
        typeof(double), 
        typeof(Tabby),
        new UIPropertyMetadata(8.0, DogEarPropertyChanged));

    private static void DogEarPropertyChanged(
        DependencyObject obj, 
        DependencyPropertyChangedEventArgs e)
    {
        ((Tabby)obj).InvalidateVisual();
    }

    public Tabby()
    {
        this.SizeChanged += new SizeChangedEventHandler(Tabby_SizeChanged);
    }

    void Tabby_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        var clip = new PathGeometry();
        clip.Figures = new PathFigureCollection();
        clip.Figures.Add(
            new PathFigure(
                new Point(0, 0),
                new[] {
                    new LineSegment(new Point(this.ActualWidth - DogEar, 0), true),
                    new LineSegment(new Point(this.ActualWidth, DogEar), true), 
                    new LineSegment(new Point(this.ActualWidth, this.ActualHeight), true),
                    new LineSegment(new Point(0, this.ActualHeight), true) },
                true)
        );
        this.Clip = clip;
    }
}

通用.xaml

<Style TargetType="{x:Type local:Tabby}">
    <Setter Property="Padding"
            Value="5" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:Tabby}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto" />
                        <RowDefinition Height="auto" />
                    </Grid.RowDefinitions>
                    <Border CornerRadius="3,0,0,0"
                            BorderBrush="Black"
                            BorderThickness="1"
                            Background="Black">
                        <ContentPresenter Content="{TemplateBinding Header}"
                                          Margin="{TemplateBinding Padding}" />
                    </Border>
                    <Border CornerRadius="0,0,3,3"
                            BorderBrush="Black"
                            BorderThickness="1"
                            Background="White"
                            Grid.Row="1">

                        <ContentPresenter Content="{TemplateBinding Content}"
                                          Margin="{TemplateBinding Padding}" />
                    </Border>
                </Grid>

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

使用它:

<my:Tabby DogEar="12"
          x:Name="tabby1">
    <my:Tabby.Header>
        <TextBlock Foreground="White">Header</TextBlock>
    </my:Tabby.Header>
    <my:Tabby.Content>
        <TextBlock Text="Content can be anything" />
    </my:Tabby.Content>
</my:Tabby>