Personalizar Header de GroupBox WPF

Luis del Valle Hernández

hace 10 años

Antes de seguir , es necesario tener instalado el frameworks Mahapps Metro UI para WPF. En este fragmento vamos a ver como podemos personalizar la cabecera (Header) de un GroupBox WPF. Podemos añadir cualquier tipo de control, en este caso hemos añadido dos botones con estilo Merro Circle.

<Controls:MetroWindow x:Class="WpfFragmentos.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
        Title="Login App" Height="350" Width="525">
    <Grid>
        <Border BorderThickness="1" BorderBrush="{DynamicResource AccentColorBrush}"/>
        <GroupBox Grid.Row="0" Grid.Column="2" Header="Retales" Margin="35">
            <GroupBox.HeaderTemplate>
                <DataTemplate>
                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <Label Content="Login" Foreground="White" FontWeight="Bold" FontSize="20" Margin="5,0"
                               HorizontalAlignment="Left" VerticalContentAlignment="Center"/>
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                            <Button Width="50" Height="50" Margin="0" Style="{DynamicResource MetroCircleButtonStyle}" Background="White">
                                <Rectangle Width="20" Height="20"
                                           Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
                                    <Rectangle.OpacityMask>
                                        <VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_reset}" />
                                    </Rectangle.OpacityMask>
                                </Rectangle>
                            </Button>
                            <Button Width="50" Height="50" Margin="0" Style="{DynamicResource MetroCircleButtonStyle}" Background="White">
                                <Rectangle Width="20" Height="20"
                                           Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
                                    <Rectangle.OpacityMask>
                                        <VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_save}" />
                                    </Rectangle.OpacityMask>
                                </Rectangle>
                            </Button>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </GroupBox.HeaderTemplate>
            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Center">
                <Grid.RowDefinitions>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Controls:ToggleSwitch x:Name="enabledSwitch" Margin="10,0,2,0"
                                       IsChecked="True" OnLabel="Administrador" OffLabel="No Administrador"
                                       VerticalContentAlignment="Center" HorizontalAlignment="Center"/>
                <StackPanel Orientation="Vertical" Grid.Row="1" HorizontalAlignment="Stretch" Margin="30,0">
                    <TextBox Margin="0, 10, 0, 0" Height="40"
                             Controls:TextBoxHelper.ClearTextButton="True"
                             Controls:TextBoxHelper.UseFloatingWatermark="True"
                             Controls:TextBoxHelper.Watermark="Usuario"
                             IsEnabled="False" Text="Luis"/>
                    <PasswordBox Margin="0, 10, 0, 0"
                             Controls:TextBoxHelper.Watermark="Password"
                             Controls:TextBoxHelper.UseFloatingWatermark="True"
                             Controls:TextBoxHelper.ClearTextButton="True"
                             Controls:TextBoxHelper.ButtonCommand="{Binding TextBoxButtonCmd, Mode=OneWay}"
                             Password="Password" />
                </StackPanel>
            </Grid>
        </GroupBox>
    </Grid>
</Controls:MetroWindow>

<Controls:MetroWindow x:Class="WpfFragmentos.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"

Title="Login App" Height="350" Width="525">

<Grid>

<GroupBox.HeaderTemplate>

<Label Content="Login" Foreground="White" FontWeight="Bold" FontSize="20" Margin="5,0"

HorizontalAlignment="Left" VerticalContentAlignment="Center"/>

<Rectangle Width="20" Height="20"

Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">

<Rectangle.OpacityMask>

</Rectangle.OpacityMask>

</Rectangle>

</Button>

<Rectangle Width="20" Height="20"

Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">

<Rectangle.OpacityMask>

</Rectangle.OpacityMask>

</Rectangle>

</Button>

</StackPanel>

</Grid>

</DataTemplate>

</GroupBox.HeaderTemplate>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Controls:ToggleSwitch x:Name="enabledSwitch" Margin="10,0,2,0"

IsChecked="True" OnLabel="Administrador" OffLabel="No Administrador"

VerticalContentAlignment="Center" HorizontalAlignment="Center"/>

<TextBox Margin="0, 10, 0, 0" Height="40"

Controls:TextBoxHelper.ClearTextButton="True"

Controls:TextBoxHelper.UseFloatingWatermark="True"

Controls:TextBoxHelper.Watermark="Usuario"

IsEnabled="False" Text="Luis"/>

<PasswordBox Margin="0, 10, 0, 0"

Controls:TextBoxHelper.Watermark="Password"

Controls:TextBoxHelper.UseFloatingWatermark="True"

Controls:TextBoxHelper.ClearTextButton="True"

Controls:TextBoxHelper.ButtonCommand="{Binding TextBoxButtonCmd, Mode=OneWay}"

Password="Password" />

</StackPanel>

</Grid>

</GroupBox>

</Grid>

</Controls:MetroWindow>

Así de sencillo. Con este fragmento puedes crear tus propios GroupBox personalizados. El resultado final lo podemos ver a continuación.