WPF - Move GroupBox Header

Question

Hi i have this groupbox template.

<Style x:Key="bordesTransparentes" TargetType="{x:Type GroupBox}">
        <Setter Property="BorderBrush" Value="Black"/>
        <Setter Property="BorderThickness" Value="2"/>
        <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 BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}" 
                                Grid.ColumnSpan="4" Grid.Row="1" Grid.Column="0" Grid.RowSpan="3">
                            <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="Transparent" BorderThickness="{TemplateBinding BorderThickness}">
                                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
                            </Border>
                        </Border>
                        <Border x:Name="Header" Grid.Column="1" Padding="2,0,2,0" Grid.Row="0" Grid.RowSpan="2">
                            <ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" 
                                              Content="{TemplateBinding Header}" 
                                              ContentStringFormat="{TemplateBinding HeaderStringFormat}" 
                                              ContentSource="Header" 
                                              RecognizesAccessKey="True" 
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Border>
                        <ContentPresenter Grid.ColumnSpan="2" 
                                          ContentTemplate="{TemplateBinding ContentTemplate}" 
                                          Content="{TemplateBinding Content}" 
                                          Grid.Column="1" 
                                          ContentStringFormat="{TemplateBinding ContentStringFormat}" 
                                          Margin="{TemplateBinding Padding}" 
                                          Grid.Row="2" 
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

I need to move the head to the right. Try to do this by changing the width (6 to 20) of the first column and ConverterParameter (7 to 21), but the controls contained inside, also move to the right. some solution

I need something like this, BUT, without the lines that are behind the text.

https://social.msdn.microsoft.com/Forums/getfile/564693

Answer 1

Style according to image you have provided.

 <Window.Resources>
    <Style  TargetType="{x:Type GroupBox}">
        <Setter Property="BorderBrush" Value="Black"/>
        <Setter Property="BorderThickness" Value="2"/>
        <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" MinHeight="30"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="6"/>
                        </Grid.RowDefinitions>
                        <Grid  Grid.ColumnSpan="4" Grid.Row="0" Grid.RowSpan="2" Background="White">
                            <ContentPresenter TextElement.FontSize="22"  Grid.ColumnSpan="4" Grid.Row="0" Grid.RowSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}" 
                                          Content="{TemplateBinding Header}" 
                                          ContentStringFormat="{TemplateBinding HeaderStringFormat}" 
                                          ContentSource="Header"  HorizontalAlignment="Center" VerticalAlignment="Center"
                                          RecognizesAccessKey="True" 
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Grid>
                        <Border Margin="0,15,0,0" BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="{TemplateBinding BorderThickness}" 
                            Grid.ColumnSpan="4"  Grid.Column="0" Grid.RowSpan="3">
                            <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="Transparent" BorderThickness="{TemplateBinding BorderThickness}">
                                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
                            </Border>
                        </Border>

                        <ContentPresenter Grid.ColumnSpan="2" 
                                      ContentTemplate="{TemplateBinding ContentTemplate}" 
                                      Content="{TemplateBinding Content}" 
                                      Grid.Column="1" 
                                      ContentStringFormat="{TemplateBinding ContentStringFormat}" 
                                      Margin="{TemplateBinding Padding}" 
                                      Grid.Row="2" 
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<GroupBox Height="300" Width="600" Header="Datos a completor por el empleado" Margin="50">
    <StackPanel Margin="0,20,0,0" Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        <TextBlock Text="Nombre de useario" FontSize="20"></TextBlock>
        <TextBox Height="30" Width="350" Margin="30,0,0,0"></TextBox>
    </StackPanel>
</GroupBox>

Result 1

---

<Window.Resources>
    <Style  TargetType="{x:Type GroupBox}">
        <Setter Property="BorderBrush" Value="Black"/>
        <Setter Property="BorderThickness" Value="2"/>
        <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" MinHeight="30"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="6"/>
                        </Grid.RowDefinitions>
                        <Border Margin="0,15,0,0" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="4"  Grid.Column="0" Grid.RowSpan="3">
                            <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="Transparent" BorderThickness="{TemplateBinding BorderThickness}">
                                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
                            </Border>
                        </Border>
                        <Grid  HorizontalAlignment="Right" Margin="0,0,20,0"  Grid.ColumnSpan="4" Grid.Row="0" Grid.RowSpan="2" Background="White">
                            <ContentPresenter TextElement.FontSize="22"  Grid.ColumnSpan="4" Grid.Row="0" Grid.RowSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header"  HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Grid>
                        <ContentPresenter Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" Margin="{TemplateBinding Padding}" Grid.Row="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<GroupBox Height="300" Width="600" Header="Datos a completor por el empleado" Margin="50">
    <StackPanel Margin="0,20,0,0" Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        <TextBlock Text="Nombre de useario" FontSize="20"></TextBlock>
        <TextBox Height="30" Width="350" Margin="30,0,0,0"></TextBox>
    </StackPanel>
</GroupBox>

Result2