Removing the header from GroupBox

[Varghese]

I'm trying to have a Groupbox with a list of other controls, very similar to a login form. I don't need a header, so I set the property called header with an empty string. As you see in the picture, there is a gap in the border - look at where the red arrow points to. How can I fix this, so there is no gap.

I'm also open to any solution where by I can achieve some other control to achieve what I want. I want to group a list of controls and have a background. Can I use a grid and setting the border style and background and achieve the same?

[Yana]

Hello Varghese,

I guess you can use regular Grid and define its Columns and Rows.

As to the GroupBox - can you post here the exact definition that you're using? Thanks in advance.

Regards,
Yana
Telerik

[Varghese]

The code is given below:

<telerik:GroupBox Grid.Column="1" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Height="264.96" Width="456.784" Header="" FontSize="16">
            <telerik:GroupBox.Background>
                <ImageBrush ImageSource="light-coffee-bkgd.jpg" Stretch="None" TileMode="Tile" ViewportUnits="Absolute"/>
            </telerik:GroupBox.Background>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="25"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="25"/>
                </Grid.ColumnDefinitions>
                <telerik:RadMaskedTextInput HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="1" Height="40" VerticalAlignment="Bottom"/>
                <telerik:RadMaskedTextInput HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="1" Height="40" VerticalAlignment="Bottom"/>
                <telerik:RadButton Content="Login" Grid.Row="2" Grid.Column="1" Width="150" Height="30" HorizontalAlignment="Right" IsDefault="True" FontSize="16" />
            </Grid>
        </telerik:GroupBox>

[Yana]

Hello Varghese,

The header in the GroupBox template has a default Padding, hence the space. You should customize the whole template in order to remove it, please add the following Styles in the Resources:

<Window.Resources>

<SolidColorBrush x:Key="ControlOuterBorder_Normal" Color="#FF848484" />
<SolidColorBrush x:Key="PickerForeground_Normal" Color="#FF000000" />

<Style x:Key="GroupBoxStyle1" TargetType="telerik:GroupBox">
    <Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder_Normal}" />
    <Setter Property="Foreground" Value="{StaticResource PickerForeground_Normal}" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Background" Value="{x:Null}" />
    <Setter Property="Header" Value="GroupBox" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:GroupBox">
                <Grid>
                    <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 x:Name="Background" Grid.ColumnSpan="4" Grid.Column="0" Grid.Row="1" Grid.RowSpan="3" BorderBrush="{x:Null}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="4" />
                    <Border x:Name="PART_Header" Padding="0" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2">
                        <ContentPresenter ContentSource="Header" RecognizesAccessKey="True" />
                    </Border>
                    <ContentPresenter x:Name="Content" Grid.Row="2" Grid.ColumnSpan="2" Grid.Column="1" Margin="{TemplateBinding Padding}" />
                    <Border x:Name="PART_Border" Margin="1 0 1 1" Grid.ColumnSpan="4" CornerRadius="4" Grid.Row="1" Grid.RowSpan="3" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" IsHitTestVisible="False" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style TargetType="telerik:GroupBox" BasedOn="{StaticResource GroupBoxStyle1}" />
...
</Window.Resources>

I've only changed the Padding in PART_Header element.

I hope this helps.

Regards,
Yana
Telerik

[ardmore]

The property 'ContentSource' was not found in type 'ContentPresenter'.

The property 'RecognizesAccessKey' was not found in type 'ContentPresenter'

Do I miss something?

[ardmore]

The above is referring to Silverlight application.