Vamos a ver otro tutorial Mahapps Metro WindowCommands, que nos permite incorporar botones o accesos directos a nuestra ventana XAML. Esta clase nos permite añadir comandos o botones en la parte izquierda o en la parte derecha de nuestra ventana. La función principal es de acceso directos a partes de nuestra aplicación. Ya vimos en otro tutorial como podemos configurar nuestra ventana y personalizarla. No te olvides antes de seguir el tutorial Configurar Mahapps Metro para WPF.
Estos accesos directos nos permiten ir a cualquier parte de nuestra aplicación. Son muy útiles ya que se mantienen siempre visibles y puedes resaltar las opciones más importantes de tu aplicación. Como ya he dicho podemos añadir estos accesos directos en la parte izquierda de la ventana (LeftWindowCommands) o en la parte derecha de la ventana (RightWindowCommands). Veamos como podemos añadirlo a nuestro software.
|
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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<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 Window Command" 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"> <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"> <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> <Grid Width="800"> <Image Source="Imagenes/logo-grande.jpg" /> </Grid> </Controls:MetroWindow> |
En el código arriba mostrado hemos añadido en la parte izquierda todos los accesos directos a redes sociales. Adjunto también el código subyacente de la ventana donde se hace una redirección al sitio web de cada red social. En la parte derecha he metido los accesos directos a login y contactar, no están implementados.
|
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 |
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"); } } } |
El resultado de esta ventana lo puedes ver en la siguiente imagen.
