Home Assistant Fácil

Curso de Home Assistant y domótica

Usted está aquí: Inicio / Tutoriales / Fragmentos / Tutorial Mahapps Metro MetroWindow

Tutorial Mahapps Metro MetroWindow

Luis del Valle Hernández

En este tutorial Mahapps Metro MetroWindow vamos a dar un repaso por las propiedades gráficas que podemos modificar en nuestras ventanas con esta estupenda herramienta para mejorar la interfaz gráfica con XAML. Si todavía no tienes instalado Mahapps Metro puedes seguir este fragmento de código donde explico como configurar lo.

Además de las características que tiene el propio framework .NET, con Mahapps podemos mejorar la apariencia de nuestra ventana con algunas características adicionales. Lo primero que vamos a ver son el título y el icono.

Comenzamos añadiendo un título, un icono y un borde a nuestra ventana de la aplicación.

<Controls:MetroWindow x:Class="EjemplosMahapps.MainWindow"
                      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"
                      Width="1280"
                      Height="800"
                      Title="Programarfacil Metro Window"
                      Icon="Imagenes/logo-invertido.png"
                      BorderBrush="{DynamicResource AccentColorBrush}"
                      BorderThickness="1">
    <Grid Width="800">
        <Image Source="Imagenes/logo-grande.jpg" />
    </Grid>
</Controls:MetroWindow>
  • mahapps-metro-window-01

Primero vamos a personalizar el icono. Para ello utilizaremos las siguientes propiedades.

  • ShowIconOnTitleBar: muestra y oculta el icono.
  • IconEdgeMode: determina como se dibujan los bordes de las figuras que no son textos. Puede ser de dos tipos:
    • Aliased
    • Unspecified (Por defecto)
  • IconBitmapScalingMode: permite definir el modo de escalado de la imagen. Tenemos las siguientes opciones:
    • Unspecified (Por defecto)
    • LowQuality
    • Linear
    • HighQuality
    • Fant
    • NearestNeighbor

Para personalizar nuestra barra de título utilizamos las siguientes propiedades.

  • ShowTitleBar: de tipo bool indica si se muestra o no el título de la ventana, también ocultará el icono.
  • TitlebarHeight: cambia el alto donde se muestra el icono y el título de barra.
  • TitleCaps: indica si el título está en mayúsculas (true mayúsculas y false minúsculas).
  • TitleForeground: color del texto del título.
  • WindowTitleBrush: con esta propiedad indicamos el color del fondo de la barra
  • mahapps-metro-window-02

Para modificar la apariencia de los botones de minimizar, maximizar y cerrar la ventana utilizamos las siguientes propiedades.

  • IsMinButtonEnabled: habilita o deshabilita el botón minimizar.
  •  IsMaxRestoreButtonEnabled: habilita o deshabilita el botón maximizar.
  • IsCloseButtonEnabled: habilita o deshabilita el botón cerrar.
  • WindowMinButtonStyle: asigna el estilo al botón minimizar.
  • WindowMaxButtonStyle: asigna el estilo al botón maximizar.
  • WindowCloseButtonStyle: asigna el estilo al botón cerrar.

Si queremos modificar la apariencia de la ventana podemos utilizar las siguientes propiedades.

  • SaveWindowPosition: guarda la última posición de la ventana. Cuando se vuelva a abrir aparecerá en esa posición (true guarda la posición y false no la guarda).
  • IgnoreTaskbarOnMaximize: indica si no se muestra el icono en la barra de tareas al maximizar (true no lo muestra y false lo muestra).
  • WindowTransitionsEnabled: indica si se habilita la transición al abrir la ventana (true habilita transición y false no la habilita).
  • GlowBrush: indica el color de. brillo alrededor de la ventana. Si no se define no se muestra.
  • NonActiveGlowBrush: indica el color del brillo de la ventana cuando no está activa.
  • NonActiveBorderBrush: indica el color del borde de la ventana cuando no está activa.
  • NonActiveWindowTitleBrush: indica el color de la barra del título cuando la ventana no está activa.
  • UseNoneWindowStyle: elimina todos los estilos de la ventana barra de título, botones, icono, etc… (true elimina estilos y false deja los estilos).
  • EnableDWMDropShadow: habilita la sombra alrededor de la ventana (true ver sombra y false ocultar sombra).
  • IsWindowDraggable: indica si la ventana se puede mover de su posición original (true se puede mover y false no se puede mover)
  • mahapps-metro-window-04
  • mahapps-metro-window-03
  • mahapps-metro-window-05

A continuación os dejo todo el código para que podáis practicar con esta ventana.

<Controls:MetroWindow x:Class="EjemplosMahapps.MainWindow"
                      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 Metro Window"
                      Icon="Imagenes/logo-invertido.png"
                      BorderBrush="{DynamicResource AccentColorBrush}"
                      BorderThickness="1"
                      
                      ShowTitleBar="True"
                      TitleCaps="False"
                      TitleForeground="Blue"
                      WindowTitleBrush="Gray"
                      
                      IsMinButtonEnabled="False"
                      IsMaxRestoreButtonEnabled="False"
                      IsCloseButtonEnabled="True"
                      WindowMinButtonStyle="{StaticResource AccentedSquareButtonStyle}"
                      WindowMaxButtonStyle="{StaticResource AccentedSquareButtonStyle}"
                      WindowCloseButtonStyle="{StaticResource AccentedSquareButtonStyle}"
                      
                      SaveWindowPosition="False"
                      IgnoreTaskbarOnMaximize="True"
                      WindowTransitionsEnabled="True"
                      GlowBrush="Red"
                      NonActiveGlowBrush="Lime"
                      NonActiveBorderBrush="Lime"
                      NonActiveWindowTitleBrush="Lime"
                      UseNoneWindowStyle="False"
                      EnableDWMDropShadow="True"
                      IsWindowDraggable="False">
    <Grid Width="800">
        <Image Source="Imagenes/logo-grande.jpg" />
    </Grid>
</Controls:MetroWindow>