CODEWITHSUNDEEP
c#.netwpfgroupbox
Jame O. Weinburgh
Jame O. Weinburgh

Reputation: 67

How do I change the corners of a groupBox to sharp instead of round C# .NET WPF

I just started working with GroupBoxes and I was just wondering why I cant make my corners sharp, as if it was a rectangle. I've seen a few online and thier corners arent round. Why is that?

 <GroupBox x:Name="howTOGroupBox" BorderBrush="White" Foreground="White" Header="How To" HorizontalAlignment="Left" Margin="88,86,0,0" VerticalAlignment="Top" Height="79" Width="221" BorderThickness="1"/>

enter image description here

Upvotes: 4

Views: 6021

Answers (3)

Pseudonymous
Pseudonymous

Reputation: 884

I know I'm very late to the party on this one but... here's a fairly robust, if not rather more complicated than it should be, like a lot of things in WPF, answer.

Firstly, I'm not sure why there isn't a just a CornerRadius property on the GroupBox control itself. It feels like that could have been implemented quite easily.

Secondly, the reason you can't just create a Style that targets the CornerRadius of Border controls in the GroupBox is, when you look at how the framework composes a GroupBox from other controls, the CornerRadius properties of the Border controls it uses are hard set to the value 2. i.e. they can't be overridden by a Style element.

To See how the WPF team originally created the GroupBox control, and to use this as a base for a square-corned GroupBox, right-click on one in the designer and select Edit Template then Edit a Copy.... This will then create a Style which targets GroupBox and overrides its default Template with a copy of exactly how the GroupBox control is normally composed. It will create something like the below. The simplest thing to do next is to go through and change all the CornerRadius elements to 0 and then reference the style as such: <GroupBox Header="Blah" Style="{StaticResource SquareCornerGroupBox}" />

<BorderGapMaskConverter x:Key="BorderGapMaskConverter"/>
<Style x:Key="SquareCornerGroupBox" TargetType="{x:Type GroupBox}">
    <Setter Property="BorderBrush" Value="#D5DFE5"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type GroupBox}">
                <Grid SnapsToDevicePixels="true">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="6"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="6"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="6"/>
                    </Grid.RowDefinitions>
                    <Border Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4" Grid.Column="0" Grid.ColumnSpan="4" Grid.RowSpan="3" Grid.Row="1"/>
                    <Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4" Grid.ColumnSpan="4" Grid.RowSpan="3" Grid.Row="1">
                        <Border.OpacityMask>
                            <MultiBinding ConverterParameter="7" Converter="{StaticResource BorderGapMaskConverter}">
                                <Binding ElementName="Header" Path="ActualWidth"/>
                                <Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
                                <Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>
                            </MultiBinding>
                        </Border.OpacityMask>
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
                            <Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
                        </Border>
                    </Border>
                    <Border x:Name="Header" Grid.Column="1" Padding="3,1,3,0" Grid.RowSpan="2" Grid.Row="0">
                        <ContentPresenter ContentSource="Header" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                    <ContentPresenter Grid.Column="1" Grid.ColumnSpan="2" Margin="{TemplateBinding Padding}" Grid.Row="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Upvotes: 0

Thomas Stekovits
Thomas Stekovits

Reputation: 1

I used the recommendation Answer before and modified it a little bit:

    <Window.Resources>
        <Style TargetType="GroupBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GroupBox">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid Grid.Row="0">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="5px" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <!-- Header -->
                                <Border Grid.Row="1" Grid.Column="0" BorderThickness="1,1,0,0" BorderBrush="Black" CornerRadius="0,0,0,0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
                                <Label Grid.Row="0" Grid.RowSpan="2" Grid.Column="1">
                                    <ContentPresenter ContentSource="Header" RecognizesAccessKey="True" />
                                </Label>
                                <Border Grid.Row="1" Grid.Column="2"  BorderThickness="0,1,1,0" BorderBrush="Black" CornerRadius="0,0,0,0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
                            </Grid>
                            
                            <!-- Content -->
                            <Border Grid.Row="1" BorderBrush="Black" BorderThickness="1,0,1,1" CornerRadius="0,0,0,0" Padding="10,10,10,10" Margin="0,0,0,0">
                                <ContentPresenter Margin="4" />
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
</Window.Resources>

Upvotes: 0

Rom
Rom

Reputation: 1193

you can style Your GroupBox ControlTemplate and round to 0 all of the corners:

<Window.Resources>
  <Style TargetType="GroupBox">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GroupBox">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Border Grid.Row="0"
                          BorderThickness="1" BorderBrush="White"
                          CornerRadius="0,0,0,0">
                            <ContentPresenter 
                          ContentSource="Header"
                          RecognizesAccessKey="True" />
                        </Border>
                        <Border Grid.Row="1" BorderBrush="White"
                                    BorderThickness="1"
                                    CornerRadius="0,0,0,0">
                            <ContentPresenter Margin="4" />
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

Upvotes: 5

Related Questions