4

How can i align the groupBox header to the center rather than the default left positioning.

I read in many post that one can use template but i have no idea about such thing. So please let me know how can i get the header at center.

Thanks !!

1 Answer 1

6

Yes, you'll have to modify the Template.

For Center-Alignment see this answer by Thomas Levesque
For Right-Alignment see this answer by Mihir Gokani

Uploaded a sample project containing both Center-Alignment and Right-Alignment here: http://www.mediafire.com/?hd2vbwr97ep7yis

Center-Alignment using the same approach as Thomas

Usable like this

<GroupBox Header="Centered Header"
          Style="{StaticResource CenteredHeaderGroupBoxStyle}"
          .../>

CenteredHeaderGroupBoxStyle

<local:CenterBorderGapMaskConverter x:Key="CenterBorderGapMaskConverter"/>
<Style x:Key="CenteredHeaderGroupBoxStyle" 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.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 BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="4" Grid.Column="0" CornerRadius="4" Grid.Row="1" Grid.RowSpan="3"/>
                    <Border Grid.ZIndex="2" x:Name="Header" Grid.Column="2" HorizontalAlignment="Center" Padding="3,1,3,0" Grid.Row="0" Grid.RowSpan="2">
                        <ContentPresenter ContentSource="Header" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                    <ContentPresenter Grid.ColumnSpan="2" Grid.Column="1" Margin="{TemplateBinding Padding}" Grid.Row="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    <Border RenderTransformOrigin="0.5,0.5" BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="4" CornerRadius="4" Grid.Row="1" Grid.RowSpan="3">
                        <Border.OpacityMask>
                            <MultiBinding ConverterParameter="7" Converter="{StaticResource CenterBorderGapMaskConverter}">
                                <Binding ElementName="Header" Path="ActualWidth"/>
                                <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>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

CenterBorderGapMaskConverter

class CenterBorderGapMaskConverter : IMultiValueConverter
{
    // Methods
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        Type type = typeof(double);
        if (values == null
            || values.Length != 3
            || values[0] == null
            || values[1] == null
            || values[2] == null
            || !type.IsAssignableFrom(values[0].GetType())
            || !type.IsAssignableFrom(values[1].GetType())
            || !type.IsAssignableFrom(values[2].GetType()))
        {
            return DependencyProperty.UnsetValue;
        }

        double pixels = (double)values[0];
        double width = (double)values[1];
        double height = (double)values[2];
        if ((width == 0.0) || (height == 0.0))
        {
            return null;
        }
        Grid visual = new Grid();
        visual.Width = width;
        visual.Height = height;
        ColumnDefinition colDefinition1 = new ColumnDefinition();
        ColumnDefinition colDefinition2 = new ColumnDefinition();
        ColumnDefinition colDefinition3 = new ColumnDefinition();
        colDefinition1.Width = new GridLength(1.0, GridUnitType.Star);
        colDefinition2.Width = new GridLength(pixels);
        colDefinition3.Width = new GridLength(1.0, GridUnitType.Star);
        visual.ColumnDefinitions.Add(colDefinition1);
        visual.ColumnDefinitions.Add(colDefinition2);
        visual.ColumnDefinitions.Add(colDefinition3);
        RowDefinition rowDefinition1 = new RowDefinition();
        RowDefinition rowDefinition2 = new RowDefinition();
        rowDefinition1.Height = new GridLength(height / 2.0);
        rowDefinition2.Height = new GridLength(1.0, GridUnitType.Star);
        visual.RowDefinitions.Add(rowDefinition1);
        visual.RowDefinitions.Add(rowDefinition2);
        Rectangle rectangle1 = new Rectangle();
        Rectangle rectangle2 = new Rectangle();
        Rectangle rectangle3 = new Rectangle();
        rectangle1.Fill = Brushes.Black;
        rectangle2.Fill = Brushes.Black;
        rectangle3.Fill = Brushes.Black;
        Grid.SetRowSpan(rectangle1, 2);
        Grid.SetRow(rectangle1, 0);
        Grid.SetColumn(rectangle1, 0);
        Grid.SetRow(rectangle2, 1);
        Grid.SetColumn(rectangle2, 1);
        Grid.SetRowSpan(rectangle3, 2);
        Grid.SetRow(rectangle3, 0);
        Grid.SetColumn(rectangle3, 2);
        visual.Children.Add(rectangle1);
        visual.Children.Add(rectangle2);
        visual.Children.Add(rectangle3);
        return new VisualBrush(visual);
    }
    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        return new object[] { Binding.DoNothing };
    }
}
5
  • 1
    You solution worked perfect me for me.....Thanks so so much But i noticed some difference which doesn't bother me but i thought i should share with you. In normal GropuBox when we insert a Grid, the grid is inside the groupbox with some default margin. Whereas in this case(ur groupBox), the grid starts exactly at the same place as the header. You can try inserting a grid in each groupbox of your sample and you will understand what i am talking about. I think it has to do something with the padding or margin. Will check to see in your code.... Thanks a ton once again !! Commented Feb 5, 2011 at 6:50
  • @Pankaj Upadhyay: You're right, that's actually really weird. It only happends in Visual Studio 2010 Designer and not in Expression Blend 4 and it happends when using the default template created by Blend. I'll look into it. Good observation! Commented Feb 5, 2011 at 10:04
  • @Pankaj Upadhyay: I don't see anything wrong in the Template so it might be a bug in VS2010 Designer or maybe I'm missing something Commented Feb 5, 2011 at 10:13
  • I dont use Expression blend so can't say much :-P , but thought it is worth disussing ... Just using your solution the way it is.....Thanks Commented Feb 5, 2011 at 11:38
  • @Pankaj Upadhyay: Yes, it sure is :) I'll update here if I find out something more on the subject Commented Feb 5, 2011 at 11:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.