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>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;
}
}
}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.