WPF GroupBox with no header space

You can emulate the style of the group box by changing your border to have rounded corners and a different color. Here is a border that looks pretty close to the GroupBox border:

<Border BorderThickness="1" CornerRadius="4" Height="100" Width="100" Padding="5" BorderBrush="LightGray"><TextBlock>Border</TextBlock></Border>

alt text http://img264.imageshack.us/img264/6748/borderm.png


If you really don't want a border, then there can be these 2 solutions:


(1) Edit template in blend :

  • Right click on GroupBox > Edit Template > Edit Copy > OK
  • Search for section

      <Border.OpacityMask>
           <MultiBinding Converter="{StaticResource BorderGapMaskConverter}" ConverterParameter="7">
                ......
           </MultiBinding>
      </Border.OpacityMask>
    
  • Delete this (above mentioned) section.. You have just removed the "gap"

  • Now this will work if you do not set the header (as you have shown in example). However if you set the header, it'll go behind the border. So to correct this, just set Panel.ZIndex="-1" in the border that was enclosing the section you just deleted (it looks like <Border BorderBrush="White" BorderThickness= ...)

(2) Use duplicate GroupBox and flip it horizontally and place it beneath original groupbox:

  • Put this code below your groupbox (assuming your groupbox's name is 'OriginalGroupbox')

     <GroupBox Header="" Focusable="False" Panel.ZIndex="-1" 
               Width="{Binding ActualWidth, ElementName=OriginalGroupbox}" 
               Height="{Binding ActualHeight, ElementName=OriginalGroupbox}" 
               IsEnabled="{Binding IsEnabled, ElementName=OriginalGroupbox}"
               RenderTransformOrigin="0.5,0.5">
               <GroupBox.RenderTransform>
                    <ScaleTransform ScaleX="-1"/>
               </GroupBox.RenderTransform>
     </GroupBox>
    
  • Enclose both these GroupBox in a Grid like this:

    <Grid>
         <GroupBox x:Name="OriginalGroupbox" Header="Mihir" ...>
            ...
         </GroupBox>
         <GroupBox Header="" Width="{Binding ActualWidth, ElementName=OriginalGroupbox}" ...>
            ...
         </GroupBox>
    </Grid>