Removing the header from GroupBox

6 posts, 0 answers
  1. Varghese
    Varghese avatar
    25 posts
    Member since:
    May 2011

    Posted 25 Aug 2013 Link to this post

    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?
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 29 Aug 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Varghese
    Varghese avatar
    25 posts
    Member since:
    May 2011

    Posted 30 Aug 2013 Link to this post

    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>
  5. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 03 Sep 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  6. Hui
    Hui avatar
    14 posts
    Member since:
    Jul 2016

    Posted 04 Aug in reply to Yana Link to this post

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

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

    Do I miss something?

  7. Hui
    Hui avatar
    14 posts
    Member since:
    Jul 2016

    Posted 04 Aug in reply to Hui Link to this post

    The above is referring to Silverlight application.
Back to Top
UI for WPF is Visual Studio 2017 Ready