Question

我在Visual Studio中有一个关于UI的问题，在C＃中。我想让我的groupbox自定义如下：

然后，我还希望它的消耗取决于用户的屏幕分辨率，因此组框的大小不是固定的，我需要它例如是屏幕的80％

所以我的问题实际上是两个问题：

制作groupbox costum
使其占据屏幕的80％（例如）。

编辑：感谢您的回答：How to make group box text alignment center in win forms? 我设法做了我想要的颜色，现在我只是错过了圆角。任何想法？

Answer 1

作为选项，您可以创建源自GroupBox的自定义控件：

您需要计算圆角矩形。为此，您可以使用AddArc方法将弧添加到路径中矩形的四个角。
要使用填充样式绘制标题背景，您可以使用HatchBrush。因此，为标题填充样式添加属性。这样，您可以为标题背景使用不同的HatchStyle值。
要使用不同的标题颜色和标题字体，请添加一些要控制的属性。
在更完整的实现中，您应该以一种将新值设置为属性的方式实现属性，从而通过调用this.Invalidate()来重新绘制控件。
通过在构造函数中将DoubleBuffered设置为true，在调整大小时防止闪烁打开双缓冲。
要在角落中使用透明背景，请使用GroupBoxRenderer.DrawParentBackground。截图

代码的

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

对于WPF：

您可以创建Style以使GroupBox以不同的方式显示。

也许这可以帮助你：Styling a GroupBox

对于Windows窗体：

要更改布局，您可以查看以下内容： https://stackoverflow.com/a/31828317/4610605

要调整GroupBox的大小，您可以使用此功能：

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

一种选择是开发自己的GroupBox自定义控件，并覆盖OnPaint()方法进行绘制。

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

}

自动构建后，新控件将显示在工具箱中。

要绘制此对象，可以使用DrawPath方法绘制外部矩形，并使用FillPath方法填充上部条。

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

弹性设计可以使用TableLayoutPanel完成。

Answer 4

这是纯XAML解决方案，没有自定义控件或代码。它仅使用标准的WPF样式/模板技术。通常，与自定义控件相比，首选使用样式/模板。

GroupBox标头的大小可以不同，因此我添加了使用“ Tag”属性（当前设置为18）更改标头文本的选项。

使用演示：

<GroupBox Style="{StaticResource GBStyled}" Tag="18" 
          Header="Hello" Height="150" Width="180">
    <TextBlock TextWrapping="Wrap">Text is different size to Header</TextBlock>
</GroupBox>

样式定义：

<Style x:Key="GBStyled" TargetType="GroupBox">
    <!-- These 2 setters make the GroupBox less blurry -->
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="UseLayoutRounding" Value="True"/>
    <!-- Default Background colour -->
    <Setter Property="Background" Value="White"/>
    <!-- Template of GroupBox -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GroupBox">
                <ControlTemplate.Resources>
                    <!-- Custom hatched brush -->
                    <VisualBrush x:Key="MyVisualBrush" TileMode="Tile" Viewport="0,0,5,5" ViewportUnits="Absolute" Viewbox="0,0,15,15" ViewboxUnits="Absolute">
                        <VisualBrush.Visual>
                            <Grid Background="{StaticResource DarkBlueBrush}">
                                <Path Data="M 0 15 L 15 0" Stroke="White" />
                                <Path Data="M 0 0 L 15 15" Stroke="White" />
                            </Grid>
                        </VisualBrush.Visual>
                    </VisualBrush>
                </ControlTemplate.Resources>
                <Grid>
                    <Grid.Resources>
                    </Grid.Resources>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Border Grid.Row="0" CornerRadius="5,5,0,0" BorderThickness="1" BorderBrush="{StaticResource DarkBlueBrush}" Background="{StaticResource MyVisualBrush}">
                        <!-- FontSize of the header is changed via the Templates "Tag" property -->
                        <Label Foreground="White" FontSize="{Binding RelativeSource={RelativeSource AncestorType=GroupBox}, Path=Tag}" HorizontalAlignment="Center" FontWeight="Bold">
                            <!-- DropShadow makes the label standout from the background -->
                            <Label.Effect>
                                <DropShadowEffect ShadowDepth="0" BlurRadius="3" />
                            </Label.Effect>
                            <ContentPresenter Margin="0" ContentSource="Header" RecognizesAccessKey="True"/>
                        </Label>
                    </Border>
                    <Border Grid.Row="1" CornerRadius="0,0,5,5" BorderThickness="1,0,1,1" BorderBrush="{StaticResource DarkBlueBrush}" Background="{TemplateBinding Background}">
                        <ContentPresenter Margin="4" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

具有圆边的自定义GroupBox

4 个答案: