When i change GroupBox style , GroupBox header property becomes hidden?

رضا جافری 1,291 Reputation points
2021-01-29T20:56:30.533+00:00

Hi to all
First and foremost, I apologize for my grammatical errors; my first language is Persian (Iran).
I want to change GroupBox style but when i do this i can't show GroupBox header and Groupbox header becomes hidden.
I want a GroupBox exactly like following image:
62063-groupbox-header-location.jpg
With the following properties:
CornerRadius="9"
BorderBrush="DarkGray"
BorderThickness="1"
Header location=at top on the GroupBox border

I tried following code but it didn't worked:

<GroupBox x:Name="Search_GroupBox" Header="Search"  HorizontalAlignment="Left"  
                  VerticalAlignment="Top" Margin="295,64,0,0" Width="277" Height="70">  
  <GroupBox.Style>  
    <Style  TargetType="{x:Type GroupBox}">  
      <Setter Property="OverridesDefaultStyle" Value="True"/>  
      <Setter Property="FocusVisualStyle" Value="{x:Null}"/>  
      <Setter Property="Template">  
        <Setter.Value>  
          <ControlTemplate TargetType="{x:Type GroupBox}">  
            <Border CornerRadius="9" BorderBrush="DarkGray" BorderThickness="1"/>  
          </ControlTemplate>  
        </Setter.Value>  
      </Setter>  
      <Setter Property="HeaderTemplate">  
        <Setter.Value>  
          <DataTemplate>  
            <Border Canvas.ZIndex="2" BorderBrush="Black" BorderThickness="1" CornerRadius="3"  
               HorizontalAlignment="Stretch" Width="70" Margin="-2,0,-3,-1" Height="20">  
              <TextBlock Text="Search" Foreground="Black" FontWeight="DemiBold"  
                 HorizontalAlignment="Center" />  
            </Border>  
          </DataTemplate>  
        </Setter.Value>  
      </Setter>  
    </Style>  
  </GroupBox.Style>  
</GroupBox>  

Thanks

XAML
XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
773 questions
0 comments No comments
{count} votes

Accepted answer
  1. رضا جافری 1,291 Reputation points
    2021-01-31T22:45:24.683+00:00

    The solution was found :

    <GroupBox x:Name="Search_GroupBox" Header="Search by" HorizontalAlignment="Left" VerticalAlignment="Top" Background="Transparent" Margin="295,64,0,0" Width="307" Height="90">  
                <GroupBox.Style>  
                    <Style TargetType="{x:Type GroupBox}">  
                        <Setter Property="BorderBrush" Value="DarkGray"/>  
                        <Setter Property="BorderThickness" Value="1"/>  
                        <Setter Property="Template">  
                            <Setter.Value>  
                                <ControlTemplate TargetType="{x:Type GroupBox}">  
                                    <Grid SnapsToDevicePixels="true">  
                                        <Grid.ColumnDefinitions>  
                                            <ColumnDefinition Width="*"/>  
                                            <ColumnDefinition Width="*"/>  
                                            <ColumnDefinition Width="*"/>  
                                            <ColumnDefinition Width="*"/>  
                                        </Grid.ColumnDefinitions>  
                                        <Grid.RowDefinitions>  
                                            <RowDefinition Height="*"/>  
                                            <RowDefinition Height="*"/>  
                                            <RowDefinition Height="*"/>  
                                            <RowDefinition Height="*"/>  
                                        </Grid.RowDefinitions>  
                                        <Border BorderBrush="DarkGray"   
                                    BorderThickness="1"  
                                    CornerRadius="9"  
                                    Grid.ColumnSpan="4"   
                                    Grid.RowSpan="4">  
                                            <Border.OpacityMask>  
                                                <MultiBinding ConverterParameter="10">  
                                                    <MultiBinding.Converter>  
                                                        <BorderGapMaskConverter/>  
                                                    </MultiBinding.Converter>  
                                                    <Binding ElementName="Header" Path="ActualWidth"/>  
                                                    <Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>  
                                                    <Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>  
                                                </MultiBinding>  
                                            </Border.OpacityMask>  
                                        </Border>  
                                        <Border x:Name="Header" Grid.RowSpan="1" Grid.ColumnSpan="1"  Margin="9,-9.5,0,0" HorizontalAlignment="Left" VerticalAlignment="Top">  
                                            <ContentPresenter  ContentSource="Header"  
                                                  RecognizesAccessKey="True"   
                                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>  
                                        </Border>  
                                        <ContentPresenter  Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="1"   
                                              Margin="{TemplateBinding Padding}"  
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>  
                                    </Grid>  
                                </ControlTemplate>  
                            </Setter.Value>  
                        </Setter>  
                    </Style>  
                </GroupBox.Style>  
                <ItemsControl  Margin="-70,-10,-70,-10" Height="44">  
                    <RadioButton x:Name="IDNumber" Content="ID Number" Padding="7,0,0,0" FontSize="10" Height="15" HorizontalAlignment="Left" VerticalAlignment="Top"/>  
                    <RadioButton x:Name="BookName" Content="Book Name" Padding="7,0,0,0" FontSize="10" Height="15" HorizontalAlignment="Left" VerticalAlignment="Top"/>  
                    <RadioButton x:Name="Publisher" Content="Publisher" Padding="7,0,0,0" FontSize="10" Height="15" HorizontalAlignment="Left" VerticalAlignment="Top"/>  
                </ItemsControl>  
    </GroupBox>  
    

    Result : 62317-r.jpg

    0 comments No comments

0 additional answers

Sort by: Most helpful