Tutorial Mahapps Metro Floyouts

Luis del Valle Hernández

hace 10 años

En este fragmento de código vamos a ver un tutorial Mahapps Metro Floyouts. Son paneles flotantes que nos sirven para ver contenido de nuestra aplicación. Estos controles muestran información en primer plano en cualquier parte de nuestra aplicación y con unas características especiales. Antes de continuar con este tutorial tienes que haber configurado Mahapps Metro. La clase a la se llama Flyout y tiene las siguientes propiedades.

Header: título de cabecera del panel flotante.
Position: la posición donde aparecerá el panel flotante. Puede tomar los siguientes valores.
- Bottom
- Left
- Right
- Top
IsPinned: permite anclar el panel en la ventana (true anclado y false no anclado).
IsOpen: indica si el panel está abierto (true visible) o cerrado (false oculto).
AnimateOnPositionChange: indica si se produce una animación cuando cambia la posición (true hay animación y false no hay animación).
AnimateOpacity: indica si hay animación de transparencia (true hay animación y false no hay animación).
IsModal: cuando un elemento es modal, no se permite interactuar con el resto de la aplicación (true es modal y false no es modal).
Theme: permite seleccionar entre una variedad de temas predefinidos.
- Accent
- Adapt
- Dark
- Inverse
- Light
ExternalCloseButton: con esta opción podemos decir a la capa flotante si queremos que se cierre con algún botón externo, por ejemplo pulsando algún botón del ratón.
- Left
- Middle
- Right
- XButton1
- XButton2
CloseButtonVisibility: indica si se ve el botón para cerrar el panel o no.
- Collapsed
- Visible
- Hidden
TitleVisibility: indica si se muestra el título del panel o no.
- Collapsed
- Visible
- Hidden
AreAnimationsEnabled: permite habilitar (true) y deshabilitar (false) las animaciones.

Para probar el uso de los paneles flotantes vamos a partir del código ya comentado en el fragmento Tutorial Mahapps Metro Window Commands, donde mostraba como utilizar y configurar los accesos directos en la barra de título. El código quedaría de la siguiente manera.

<Controls:MetroWindow x:Class="EjemplosMahapps.WindowCommandSample"
                      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                      xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
                      xmlns:local="clr-namespace:EjemplosMahapps"
                      mc:Ignorable="d"
                      WindowStartupLocation="CenterScreen"
                      Topmost="True"
                      Width="1280"
                      Height="800"
                      Title="Programarfacil Flyout"
                      Icon="Imagenes/logo-invertido.png"
                      BorderBrush="{DynamicResource AccentColorBrush}"
                      BorderThickness="1"
                      TitleCaps="False">
    <Controls:MetroWindow.LeftWindowCommands>
        <Controls:WindowCommands>
            <!--Acceso directo a Facebook-->
            <Button ToolTip="Programarfacil Facebook" Name="FacebookButton" Click="FacebookButton_Click">
                <Rectangle Width="22" Height="22" Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
                    <Rectangle.OpacityMask>
                        <VisualBrush Stretch="Uniform"
                                     Visual="{StaticResource appbar_social_facebook}" />
                    </Rectangle.OpacityMask>
                </Rectangle>
            </Button>
            <!--Acceso directo a Twitter-->
            <Button ToolTip="Programarfacil Twitter" Name="TwitterButton" Click="TwitterButton_Click">
                <Rectangle Width="22" Height="22" Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
                    <Rectangle.OpacityMask>
                        <VisualBrush Stretch="Uniform"
                                     Visual="{StaticResource appbar_twitter_bird}" />
                    </Rectangle.OpacityMask>
                </Rectangle>
            </Button>
            <!--Acceso directo a Google+-->
            <Button ToolTip="Programarfacil Google+" Name="GoogleButton" Click="GoogleButton_Click">
                <Rectangle Width="22" Height="22" Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
                    <Rectangle.OpacityMask>
                        <VisualBrush Stretch="Uniform"
                                     Visual="{StaticResource appbar_googleplus}" />
                    </Rectangle.OpacityMask>
                </Rectangle>
            </Button>
        </Controls:WindowCommands>
    </Controls:MetroWindow.LeftWindowCommands>
    <Controls:MetroWindow.RightWindowCommands>
        <Controls:WindowCommands>
            <!--Acceso directo a Login-->
            <Button ToolTip="Login" Name="LoginButton" Click="LoginButton_Click">
                <Rectangle Width="22" Height="22" Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
                    <Rectangle.OpacityMask>
                        <VisualBrush Stretch="Uniform"
                                     Visual="{StaticResource appbar_user}" />
                    </Rectangle.OpacityMask>
                </Rectangle>
            </Button>
            <!--Acceso directo a Contactar-->
            <Button ToolTip="Contactar" Name="ContactButton" Click="ContactButton_Click">
                <Rectangle Width="22" Height="22" Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
                    <Rectangle.OpacityMask>
                        <VisualBrush Stretch="Uniform"
                                     Visual="{StaticResource appbar_email_minimal}" />
                    </Rectangle.OpacityMask>
                </Rectangle>
            </Button>
        </Controls:WindowCommands>
    </Controls:MetroWindow.RightWindowCommands>

    <Controls:MetroWindow.Flyouts>
        <Controls:FlyoutsControl x:Name="ControlesFlyouts">
            <Controls:Flyout x:Name="ContactarFlyout"
                             Header="Contactar"
                             Position="Right"
                             IsPinned="False"
                             IsOpen="False"
                             AnimateOnPositionChange="False"
                             AnimateOpacity="True"
                             IsModal="True"
                             Theme="Dark"
                             ExternalCloseButton="Left"
                             CloseButtonVisibility="Visible"
                             TitleVisibility="Visible"
                             AreAnimationsEnabled="True"
                             Width="400">
                <Grid Width="350">
                    <StackPanel Orientation="Vertical" VerticalAlignment="Center">
                        <TextBox Name="NombreContactarTextBox" Width="250" Height="40" Margin="0,5"
                                 Controls:TextBoxHelper.ClearTextButton="True"
                                 Controls:TextBoxHelper.Watermark="Nombre"
                                 Controls:TextBoxHelper.UseFloatingWatermark="True"/>
                        <TextBox Name="EmailContactarTextBox" Width="250" Height="40" Margin="0,5"
                                 Controls:TextBoxHelper.ClearTextButton="True"
                                 Controls:TextBoxHelper.Watermark="E-mail"
                                 Controls:TextBoxHelper.UseFloatingWatermark="True"/>
                        <TextBox Name="WebContactarTextBox" Width="250" Height="40" Margin="0,5"
                                 Controls:TextBoxHelper.ClearTextButton="True"
                                 Controls:TextBoxHelper.Watermark="Website"
                                 Controls:TextBoxHelper.UseFloatingWatermark="True"/>
                        <TextBox Name="ComentsContactarTextBox" Width="250" Height="200" Margin="0,5"
                                 Controls:TextBoxHelper.ClearTextButton="True"
                                 Controls:TextBoxHelper.Watermark="Descripción"
                                 Controls:TextBoxHelper.UseFloatingWatermark="True" TextWrapping="Wrap"/>
                        <Button Content="Enviar"  Style="{DynamicResource AccentedSquareButtonStyle}"
                                Width="250" Height="30" Margin="0,10"/>
                    </StackPanel>
                </Grid>
            </Controls:Flyout>
            <Controls:Flyout x:Name="LoginFlyout"
                             Header="Login"
                             Position="Right"
                             IsPinned="False"
                             IsOpen="False"
                             AnimateOnPositionChange="False"
                             AnimateOpacity="True"
                             IsModal="False"
                             Theme="Accent"
                             ExternalCloseButton="Left"
                             CloseButtonVisibility="Visible"
                             TitleVisibility="Visible"
                             AreAnimationsEnabled="True"
                             Width="400">
                <Grid Width="350">
                    <StackPanel Orientation="Vertical" VerticalAlignment="Center">
                        <TextBox Name="NombreLoginTextBox" Width="250" Height="40" Margin="0,5"
                                 Controls:TextBoxHelper.ClearTextButton="True"
                                 Controls:TextBoxHelper.Watermark="Usuario"
                                 Controls:TextBoxHelper.UseFloatingWatermark="True"/>
                        <PasswordBox Name="PassLoginTextBox" Width="250" Height="40" Margin="0,5"
                                 Controls:TextBoxHelper.ClearTextButton="True"
                                 Controls:TextBoxHelper.Watermark="Password"
                                 Controls:TextBoxHelper.UseFloatingWatermark="True"/>
                        <Button Content="Login"  Style="{DynamicResource SquareButtonStyle}"
                                Width="250" Height="30" Margin="0,10"/>
                    </StackPanel>
                </Grid>
            </Controls:Flyout>
        </Controls:FlyoutsControl>
    </Controls:MetroWindow.Flyouts>
    <Grid Width="800">
        <Image Source="Imagenes/logo-grande.jpg" />
    </Grid>
</Controls:MetroWindow>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

<Controls:MetroWindow x:Class="EjemplosMahapps.WindowCommandSample"

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

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

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"

xmlns:local="clr-namespace:EjemplosMahapps"

mc:Ignorable="d"

WindowStartupLocation="CenterScreen"

Topmost="True"

Width="1280"

Height="800"

Title="Programarfacil Flyout"

Icon="Imagenes/logo-invertido.png"

BorderBrush="{DynamicResource AccentColorBrush}"

BorderThickness="1"

TitleCaps="False">

<Controls:MetroWindow.LeftWindowCommands>

<Controls:WindowCommands>

<Rectangle.OpacityMask>

<VisualBrush Stretch="Uniform"

Visual="{StaticResource appbar_social_facebook}" />

</Rectangle.OpacityMask>

</Rectangle>

</Button>

<Rectangle.OpacityMask>

<VisualBrush Stretch="Uniform"

Visual="{StaticResource appbar_twitter_bird}" />

</Rectangle.OpacityMask>

</Rectangle>

</Button>

<Rectangle.OpacityMask>

<VisualBrush Stretch="Uniform"

Visual="{StaticResource appbar_googleplus}" />

</Rectangle.OpacityMask>

</Rectangle>

</Button>

</Controls:WindowCommands>

</Controls:MetroWindow.LeftWindowCommands>

<Controls:MetroWindow.RightWindowCommands>

<Controls:WindowCommands>

<Rectangle.OpacityMask>

<VisualBrush Stretch="Uniform"

Visual="{StaticResource appbar_user}" />

</Rectangle.OpacityMask>

</Rectangle>

</Button>

<Rectangle.OpacityMask>

<VisualBrush Stretch="Uniform"

Visual="{StaticResource appbar_email_minimal}" />

</Rectangle.OpacityMask>

</Rectangle>

</Button>

</Controls:WindowCommands>

</Controls:MetroWindow.RightWindowCommands>

<Controls:MetroWindow.Flyouts>

<Controls:FlyoutsControl x:Name="ControlesFlyouts">

<Controls:Flyout x:Name="ContactarFlyout"

Header="Contactar"

Position="Right"

IsPinned="False"

IsOpen="False"

AnimateOnPositionChange="False"

AnimateOpacity="True"

IsModal="True"

Theme="Dark"

ExternalCloseButton="Left"

CloseButtonVisibility="Visible"

TitleVisibility="Visible"

AreAnimationsEnabled="True"

Width="400">

<TextBox Name="NombreContactarTextBox" Width="250" Height="40" Margin="0,5"

Controls:TextBoxHelper.ClearTextButton="True"

Controls:TextBoxHelper.Watermark="Nombre"

Controls:TextBoxHelper.UseFloatingWatermark="True"/>

<TextBox Name="EmailContactarTextBox" Width="250" Height="40" Margin="0,5"

Controls:TextBoxHelper.ClearTextButton="True"

Controls:TextBoxHelper.Watermark="E-mail"

Controls:TextBoxHelper.UseFloatingWatermark="True"/>

<TextBox Name="WebContactarTextBox" Width="250" Height="40" Margin="0,5"

Controls:TextBoxHelper.ClearTextButton="True"

Controls:TextBoxHelper.Watermark="Website"

Controls:TextBoxHelper.UseFloatingWatermark="True"/>

<TextBox Name="ComentsContactarTextBox" Width="250" Height="200" Margin="0,5"

Controls:TextBoxHelper.ClearTextButton="True"

Controls:TextBoxHelper.Watermark="Descripción"

Controls:TextBoxHelper.UseFloatingWatermark="True" TextWrapping="Wrap"/>

<Button Content="Enviar" Style="{DynamicResource AccentedSquareButtonStyle}"

Width="250" Height="30" Margin="0,10"/>

</StackPanel>

</Grid>

</Controls:Flyout>

<Controls:Flyout x:Name="LoginFlyout"

Header="Login"

Position="Right"

IsPinned="False"

IsOpen="False"

AnimateOnPositionChange="False"

AnimateOpacity="True"

IsModal="False"

Theme="Accent"

ExternalCloseButton="Left"

CloseButtonVisibility="Visible"

TitleVisibility="Visible"

AreAnimationsEnabled="True"

Width="400">

<TextBox Name="NombreLoginTextBox" Width="250" Height="40" Margin="0,5"

Controls:TextBoxHelper.ClearTextButton="True"

Controls:TextBoxHelper.Watermark="Usuario"

Controls:TextBoxHelper.UseFloatingWatermark="True"/>

<PasswordBox Name="PassLoginTextBox" Width="250" Height="40" Margin="0,5"

Controls:TextBoxHelper.ClearTextButton="True"

Controls:TextBoxHelper.Watermark="Password"

Controls:TextBoxHelper.UseFloatingWatermark="True"/>

<Button Content="Login" Style="{DynamicResource SquareButtonStyle}"

Width="250" Height="30" Margin="0,10"/>

</StackPanel>

</Grid>

</Controls:Flyout>

</Controls:FlyoutsControl>

</Controls:MetroWindow.Flyouts>

</Grid>

</Controls:MetroWindow>

El código subyacente para esta ventana sería el siguiente.

using MahApps.Metro.Controls;
using System.Windows;

namespace EjemplosMahapps
{
    /// <summary>
    /// Interaction logic for WindowCommandSample.xaml
    /// </summary>
    public partial class WindowCommandSample : MetroWindow
    {
        public WindowCommandSample()
        {
            InitializeComponent();
        }

        private void FacebookButton_Click(object sender, RoutedEventArgs e)
        {
            System.Diagnostics.Process.Start("https://www.facebook.com/programarfacilcom");
        }

        private void TwitterButton_Click(object sender, RoutedEventArgs e)
        {
            System.Diagnostics.Process.Start("https://www.twitter.com/programarfacilc");
        }

        private void GoogleButton_Click(object sender, RoutedEventArgs e)
        {
            System.Diagnostics.Process.Start("https://plus.google.com/u/0/103372574926660151945/about");
        }

        private void ContactButton_Click(object sender, RoutedEventArgs e)
        {
            this.ContactarFlyout.IsOpen = true;
        }

        private void LoginButton_Click(object sender, RoutedEventArgs e)
        {
            this.LoginFlyout.IsOpen = true;
        }
    }
}

using MahApps.Metro.Controls;

using System.Windows;

namespace EjemplosMahapps

{

/// <summary>

/// Interaction logic for WindowCommandSample.xaml

/// </summary>

public partial class WindowCommandSample : MetroWindow

{

public WindowCommandSample()

{

InitializeComponent();

}

private void FacebookButton_Click(object sender, RoutedEventArgs e)

{

System.Diagnostics.Process.Start("https://www.facebook.com/programarfacilcom");

}

private void TwitterButton_Click(object sender, RoutedEventArgs e)

{

System.Diagnostics.Process.Start("https://www.twitter.com/programarfacilc");

}

private void GoogleButton_Click(object sender, RoutedEventArgs e)

{

System.Diagnostics.Process.Start("https://plus.google.com/u/0/103372574926660151945/about");

}

private void ContactButton_Click(object sender, RoutedEventArgs e)

{

this.ContactarFlyout.IsOpen = true;

}

private void LoginButton_Click(object sender, RoutedEventArgs e)

{

this.LoginFlyout.IsOpen = true;

}

En la siguientes imágenes podemos ver el resultado de los paneles contactar y login.

Para el Flyout de contactar IsModal es true y el Theme es Dark. Para el Flyout de login IsModal es false y el Theme es Accent. Como se puede comprobar en las dos imágenes el panel de contactar al ser modal, no permite interactuar con el resto de la aplicación oscureciendo la ventana de fondo.