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>Así de sencillo. Con este fragmento puedes crear tus propios GroupBox personalizados. El resultado final lo podemos ver a continuación.
