GroupBox's ControlTemplate and RowDefinitions's Height

Question

I was learning how to change the ControlTemplate and came across this post. I copied the ControlTemplate and created a GroupBox.

<UserControl x:Class="MyTestApp.UserControl1"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         mc:Ignorable="d" 
         d:DesignHeight="130" d:DesignWidth="250">
<Grid>
    <Grid.Resources>
        <BorderGapMaskConverter x:Key="BorderGapMaskConverter"/>
        <Style x:Key="CheckedGroupBoxStyle" 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.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="6"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="6"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="6"/>
                            </Grid.ColumnDefinitions>
                            <Border Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3" Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4"/>
                            <ContentPresenter Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="2"/>
                            <Border Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3" BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4">
                                <Border.OpacityMask>
                                    <MultiBinding Converter="{StaticResource BorderGapMaskConverter}" ConverterParameter="7">
                                        <Binding Path="ActualWidth" ElementName="Header"/>
                                        <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" Grid.Row="0" Grid.RowSpan="2" Padding="3,1,3,0">
                                <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" RecognizesAccessKey="True"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <GroupBox Grid.Row="0" Style="{StaticResource CheckedGroupBoxStyle}">
            <GroupBox.Header>
                <CheckBox>GroupBox1</CheckBox>
            </GroupBox.Header>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <TextBlock Text="Item A" Grid.Column="0" Grid.Row="0" />
                <TextBox Grid.Column="1" Grid.Row="0"></TextBox>

                <TextBlock Text="Item B" Grid.Column="0" Grid.Row="1" />
                <TextBox Grid.Column="1" Grid.Row="1"></TextBox>

                <TextBlock Text="Item C" Grid.Column="0" Grid.Row="2" />
                <TextBox Grid.Column="1" Grid.Row="2"></TextBox>

                <TextBlock Text="Item D" Grid.Column="0" Grid.Row="3" />
                <TextBox Grid.Column="1" Grid.Row="3"></TextBox>
            </Grid>
        </GroupBox>
    </Grid>
</Grid>
</UserControl>

The problem is there is a border around the Grid that's inside the GroupBox. It can be removed by changing Height="Auto" to Height="*" for RowDefinition. If I don't use the CheckedGroupBoxStyle, then the border will not show up either. I want know why because the aforementioned post says the resulting style is almost identical to the default template of the control.

Border around the Grid inside GroupBox

Have you correctly implemented the BorderGapMaskConverter? — Sheridan
aha, I didn't. I thought that's one of the default converters. I didn't implement it. Any pointer to where I can find the corrected implementation? — Unplug

Sheridan Sheridan · Accepted Answer · 2013-10-31T12:46:37

It appears as though you have not added the BorderGapMaskConverter to your code example. After a quick search on MSDN, I found that it is in fact a Converter that is included in the .NET Framework. You can find details of it on the BorderGapMaskConverter Class page. You will be able to use it if you are using .NET 3.0 or above.

UPDATE >>>

No sorry, 'implemented' is no longer the correct word... initially, I thought that you would have to implement your own Converter. However, now that I found out that it is included in the .NET Framework, you just need to add a reference to it in your XAML Resources section like in the example in the other post:

<BorderGapMaskConverter x:Key="BorderGapMaskConverter"/>

Mind you, you should have had a warning in the Visual Studio Error List saying something like:

The resource "BorderGapMaskConverter" could not be resolved.

GroupBox's ControlTemplate and RowDefinitions's Height

1 Answers