MahApps.Metro MetroHeader

The MetroHeader control is a new control in MahApps.Metro v1.6.0 which can contains any other content and shows a header on top of this content. It’s derived from the GroupBox control, so it should work like this.

<Controls:MetroHeader Margin="2" Header="TextBox Header">
    <Controls:MetroHeader.HeaderTemplate>
        <DataTemplate>
            <StackPanel VerticalAlignment="Center" Orientation="Horizontal">
                <iconPacks:PackIconMaterial VerticalAlignment="Center"
                                            Kind="FaceProfile" />
                <TextBlock Margin="2 0 0 0"
                           VerticalAlignment="Center"
                           Text="{Binding}" />
            </StackPanel>
        </DataTemplate>
    </Controls:MetroHeader.HeaderTemplate>
    <TextBox Text="Enabled" />
</Controls:MetroHeader>

But, why not use the GroupBox directly with a custom style?

<GroupBox Margin="2" Header="TextBox Header" Style={DynamicResource MetroHeaderGroupBoxStyle}>
    <GroupBox.HeaderTemplate>
        <DataTemplate>
            <StackPanel VerticalAlignment="Center" Orientation="Horizontal">
                <iconPacks:PackIconMaterial VerticalAlignment="Center"
                                            Kind="FaceProfile" />
                <TextBlock Margin="2 0 0 0"
                           VerticalAlignment="Center"
                           Text="{Binding}" />
            </StackPanel>
        </DataTemplate>
    </GroupBox.HeaderTemplate>
    <TextBox Text="Enabled" />
</GroupBox>

Yes, it’s possible to do this and you can see it’s similar to the MetroHeader usage. But you must always say that you want the MetroHeaderGroupBoxStyle.

This is not necessary for the MetroHeader control, cause it uses a default style which comes automatically with MahApps.

Happy coding!