CODEWITHSUNDEEP
c#wpfxaml
Adnan Raza
Adnan Raza

Reputation: 23

WPF GroupBox Header location in center

I have edited the standard GroupBox template as I wanted to customize it. Apart from other customizations, I wanted the GroupBox header to be Horizontally aligned in the Center instead of Left or Right. The alignment of the Header is not a problem however, the real problem is the OpacityMask defined for the Border controls. The opacity mask sets the transparent space behind the group box header where the borders are not drawn. I haven't able to figure it out how to place the transparent space gap behind the group box header when I set the header to the center.

<ControlTemplate x:Key="GroupBoxControlTemplate1" 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 Background="{TemplateBinding Background}" BorderBrush="Transparent" 
                BorderThickness="{TemplateBinding BorderThickness}" 
                CornerRadius="4" Grid.Column="1" Grid.ColumnSpan="4" 
                Grid.Row="1" Grid.RowSpan="3" HorizontalAlignment="Stretch"/>
        <Border x:Name="Header" Grid.Column="2" Grid.RowSpan="2" HorizontalAlignment="Left" 
                Padding="3,1,3,0" VerticalAlignment="Stretch">
            <Border.Effect>
                <DropShadowEffect BlurRadius="10" Direction="334"/>
            </Border.Effect>
            <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                              Content="{TemplateBinding Header}" 
                              ContentSource="Header" 
                              ContentStringFormat="{TemplateBinding HeaderStringFormat}" 
                              ContentTemplate="{TemplateBinding HeaderTemplate}" 
                              RecognizesAccessKey="True" Height="Auto" 
                              VerticalAlignment="Center"
                              HorizontalAlignment="Center"
                              OpacityMask="#FF3844BD" Margin="0,1,0,0">
            </ContentPresenter>
        </Border>
        <ContentPresenter Margin="{TemplateBinding Padding}" 
                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                          Content="{TemplateBinding Content}" 
                          ContentStringFormat="{TemplateBinding ContentStringFormat}" 
                          ContentTemplate="{TemplateBinding ContentTemplate}" 
                          Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="2"/>
        <Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" 
                CornerRadius="4" Grid.ColumnSpan="3" Grid.Row="1" Grid.RowSpan="3" RenderTransformOrigin="0.5,0.5" Margin="0">
            <Border.OpacityMask>
                <MultiBinding ConverterParameter="7" UpdateSourceTrigger="Default">
                    <MultiBinding.Converter>
                        <BorderGapMaskConverter/>
                    </MultiBinding.Converter>
                    <Binding Path="ActualWidth" ElementName="Header"/>
                    <Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
                    <Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>
                </MultiBinding>
            </Border.OpacityMask>
            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4">
                <Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4"/>
            </Border>
        </Border>
    </Grid>
</ControlTemplate>

The header text should be at the center of the GroupBox currently it is on the left side which is the default position of GroupBox.

Upvotes: 0

Views: 652

Answers (1)

Sam Xia
Sam Xia

Reputation: 181

By link here specify, you need to modify parameter value. But ConverterParameter is not a DependencyProperty, you cannot bind any value to it. I suggest you write your own converter to return VisualBrush to your GroupBox

You can also check source code of BorderGapMaskConverter here

Upvotes: 1

Related Questions