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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<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.
