WPF GroupBox with no header space

PBelanger picture PBelanger · Jan 21, 2010 · Viewed 26.3k times · Source

Easy one, I would like to have a GroupBox with no header space

The closest thing is a border, but the border "by default" does not have the same Style as the group box.

What's the easiest way (least xaml / code) to get the desired GroupBox ?

Thanks

Answer

mg007 picture mg007 · Jan 21, 2010

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>