WPF切角元素

我试图在WPF中创建类似于下图的内容。 这个控件被设计成我应用程序中所有内容的基本视图，并且将位于具有背景的Window控件内（可能是某种渐变）。

要求如下：

• 三面圆角（左上角，左下角和右下角）
• 切断右侧的标签角，“切割区域”背后的背景是透明的，因此窗口的背景渐变显示（看起来它真的被剪掉了）
• 标题区域应该是一个内容容器，所以我可以在其中放置任何内容，如图标和文本
• 内容区域需要具有最小高度，然后在内部内容超过它时增长（不是动态 – 只需支持其中任何元素的高度）

我已经和我斗争了好几个小时，但对于WPF来说，我开始发现自己在圈子里跑来跑去。 我认为WPF的灵活性有很大的好处，但对于刚开始使用它的人来说几乎是太令人生畏了。

任何帮助将非常感激！ 谢谢！

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; } } 

Generic.xaml

使用它：

   Header      

Answer 2

试试这个开始吧：

Answer 3

这是我使用自定义控件放在一起的一些代码。

控制代码：

 using System; using System.Windows; using System.Windows.Controls; namespace Test { public class ContentCard : HeaderedContentControl { static ContentCard() { DefaultStyleKeyProperty.OverrideMetadata(typeof(ContentCard), new FrameworkPropertyMetadata(typeof(ContentCard))); } } } 

控制xaml（在Themes / Generic.xaml文件夹中）

这是你如何使用它：