Benutzerdefinierte GroupBox mit abgerundeten Kanten

Question

Ich habe eine Frage zur Benutzeroberfläche in Visual Studio, in C#. Ich möchte meine groupbox Gewohnheit machen wie folgt aussehen:

und dann, ich will es auch aufwenden, hängt von der Bildschirmauflösung des Benutzers, so dass die Größe des Gruppenfeldes ist nicht festgelegt, und Ich brauche es zum Beispiel 80% des Bildschirms.

Meine Frage ist also eigentlich zwei Fragen:

1. machen einen groupbox costum
2. es 80% (zum Beispiel) machen breiten Rand des Bildschirms.

EDIT: Dank dieser Antwort: How to make group box text alignment center in win forms? schaffte ich es zu tun, was ich mit den Farben wollte, jetzt bin ich dabei nur die runden Ecken. irgendwelche Ideen?

Answer 1

Als Option können Sie eine benutzerdefinierte Steuerelement erstellen können die sich aus GroupBox:

• Sie benötigen ein abgerundetes Rechteck Form zu berechnen. Um dies zu tun, können Sie als Option die Methode AddArc verwenden und Bögen an vier Ecken eines Rechtecks ​​in einem Pfad hinzufügen.
• Um Kopfzeilenhintergrund mit Lukenstil zu zeichnen, können Sie eine HatchBrush verwenden.Fügen Sie also eine Eigenschaft für den Titel-Schraffurstil hinzu. Auf diese Weise können Sie verschiedene HatchStyle Werte für den Titelhintergrund verwenden.
• Um eine andere Titelfarbe und Titelschriftart zu verwenden, fügen Sie einige zu steuernde Eigenschaften hinzu.
• In einer vollständigeren Implementierung sollten Sie Eigenschaften so implementieren, dass beim Festlegen eines neuen Werts für die Eigenschaft das Steuerelement neu gezeichnet wird, indem this.Invalidate() aufgerufen wird.
• Um Flimmern während der Größenänderung zu verhindern, aktivieren Sie die Doppelpufferung, indem Sie DoubleBuffered auf true im Konstruktor setzen.
• Um einen transparenten Hintergrund in Ecken zu haben, verwenden Sie GroupBoxRenderer.DrawParentBackground. Screenshot

-Code

using System.ComponentModel; 
using System.Drawing; 
using System.Drawing.Drawing2D; 
using System.Windows.Forms; 
public class RoundPanel : GroupBox 
{ 
    public RoundPanel() 
    { 
     this.DoubleBuffered = true; 
     this.TitleBackColor = Color.SteelBlue; 
     this.TitleForeColor = Color.White; 
     this.TitleFont = new Font(this.Font.FontFamily, Font.Size + 8, FontStyle.Bold); 
     this.BackColor = Color.Transparent; 
     this.Radious = 25; 
     this.TitleHatchStyle = HatchStyle.Percent60; 
    } 
    protected override void OnPaint(PaintEventArgs e) 
    { 
     base.OnPaint(e); 
     GroupBoxRenderer.DrawParentBackground(e.Graphics, this.ClientRectangle, this); 
     var rect = ClientRectangle; 
     using (var path = GetRoundRectagle(this.ClientRectangle, Radious)) 
     { 
      e.Graphics.SmoothingMode = SmoothingMode.AntiAlias; 
      rect = new Rectangle(0, 0, 
       rect.Width, TitleFont.Height + Padding.Bottom + Padding.Top); 
      if(this.BackColor!= Color.Transparent) 
       using (var brush = new SolidBrush(BackColor)) 
        e.Graphics.FillPath(brush, path); 
      var clip = e.Graphics.ClipBounds; 
      e.Graphics.SetClip(rect); 
      using (var brush = new HatchBrush(TitleHatchStyle, 
       TitleBackColor, ControlPaint.Light(TitleBackColor))) 
       e.Graphics.FillPath(brush, path); 
      using (var pen = new Pen(TitleBackColor, 1)) 
       e.Graphics.DrawPath(pen, path); 
      TextRenderer.DrawText(e.Graphics, Text, TitleFont, rect, TitleForeColor); 
      e.Graphics.SetClip(clip); 
      using (var pen = new Pen(TitleBackColor, 1)) 
       e.Graphics.DrawPath(pen, path); 
     } 
    } 
    public Color TitleBackColor { get; set; } 
    public HatchStyle TitleHatchStyle { get; set; } 
    public Font TitleFont { get; set; } 
    public Color TitleForeColor { get; set; } 
    public int Radious { get; set; } 
    private GraphicsPath GetRoundRectagle(Rectangle b, int r) 
    { 
     GraphicsPath path = new GraphicsPath(); 
     path.AddArc(b.X, b.Y, r, r, 180, 90); 
     path.AddArc(b.X + b.Width - r - 1, b.Y, r, r, 270, 90); 
     path.AddArc(b.X + b.Width - r - 1, b.Y + b.Height - r - 1, r, r, 0, 90); 
     path.AddArc(b.X, b.Y + b.Height - r - 1, r, r, 90, 90); 
     path.CloseAllFigures(); 
     return path; 
    } 
} 

Answer 2

Für WPF:

Sie eine Style erstellen können, um Ihre GroupBox erscheinen in einer anderen Weise.

Vielleicht kann dies Sie da helfen: Styling a GroupBox

Für Windows Forms:

Um das Layout zu ändern Sie einen Blick auf diese haben können: https://stackoverflow.com/a/31828317/4610605

Um die GroupBox Größe ändern Sie können Verwenden Sie dies:

System.Windows.SystemParameters.PrimaryScreenWidth 
System.Windows.SystemParameters.PrimaryScreenHeight 

GroupBox gb = new GroupBox(); 
gb.Width = (System.Windows.SystemParameters.PrimaryScreenWidth * 0.8) //Get your 80% ScreenWidth here. 

Answer 3

Eine Option besteht darin, ein eigenes benutzerdefiniertes Steuerelement zu entwickeln, das von GroupBox abgeleitet wurde, und die OnPaint()-Methode für Ihre Zeichnung zu überschreiben.

public class CustomGroupBox : GroupBox 
{ 
    protected override void OnPaint(PaintEventArgs e) 
    { 
     e.Graphics.FillRectangle(Brushes.Azure, this.ClientRectangle); 
     //base.OnPaint(e); 
    } 

} 

Das neue Steuerelement wird in der Toolbox nach einem Build automatisch angezeigt.

Um dieses Objekt zu zeichnen, kann die Methode DrawPath verwendet werden, um das äußere Rechteck zu zeichnen, und die Methode FillPath kann zum Füllen der oberen Leiste verwendet werden.

https://msdn.microsoft.com/en-us/library/system.drawing.graphics.drawpath(v=vs.110).aspx

https://msdn.microsoft.com/en-us/library/system.drawing.graphics.fillpath(v=vs.110).aspx

Elastic Design kann mit TableLayoutPanel erfolgen.