Agregando controles METRO a nuestras ventanas Mahapps

TILES: Los Tiles son pequeños cuadros que pueden utilizarce para realizar un pequeño menu muy parecido al de Windows 8 y este se agrega de la siguiente Manera:

 <Controls:Tile Title="Mail" Margin="248,106,405,241" Width="Auto" Background="#CCC74103"/>
Ahora para personalizarlo todo cuanto debemos hacer es eliminar la pleca "/" de cierre y agregar </Controls:Tile> y podremos arrastras y colocar un elemento sobre el de la siguiente Manera:



 <Controls:Tile Title="Mail" Margin="248,106,405,241" Width="Auto" Click="Tile_Click_1" Background="#CCC74103"> <Image HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Source="Images/Mail.png"/> </Controls:Tile>

Y el resultado obtenido sera el siguiente:
Metro Window
De la misma manera agregamos los otros elementos (TILES):


<Controls:Tile Title="Mis Coders" Margin="50,94,455,253" Width="Auto">
                <Image HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="217" Source="Images/http.png"/> </Controls:Tile>
               <Controls:Tile Title="Follow Mis Coders" Margin="201,239,304,108" Width="Auto" Click="Tile_Click_1" Background="#CC219C0D">
                <Image HorizontalAlignment="Left" Height="103" VerticalAlignment="Top" Width="124" Source="Images/COSALWEB.png"/> 
               </Controls:Tile> <Controls:Tile Title="Mail" Margin="50,239,603,108" Width="Auto" Click="Tile_Click_1" Background="#CCC74103">
                <Image HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Source="Images/Mail.png"/> </Controls:Tile>
                <Controls:Tile Title="Restaurants" Margin="349,94,304,253" Width="Auto" Click="Tile_Click_1" Background="#CC9C0D8F"> 
               <Image HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Source="Images/food-grey.png"/> </Controls:Tile>
Y quedaria de la siguiente manera:
Metro Window
FLYOUT: El Flyout es un panel en el que podemos agregar las configuraciones o los detalles de nuestras aplicaciones y para agregar nuestro Flyout agregaremos lo siguiente:
<Controls:Flyout Width="183"></Controls:Flyout> 
Y el resultado que obtendremos sera el siguiente:


Para poder agregar varios elementos todo lo que deben hacer es agregar un <Grid></Grid> dentro del flyout y podran agregar lo que quieran dentro de el, si no lo agregan lo que pasara es que solo podran agregar un elemento.

FLIPVIEW: El Flipview es como un slider que podemos agregar a nuestras aplicaciones y se agrega de la siguiente manera:
<Controls:FlipView Height="200" Width="700" Margin="31,18,57,246"> 
               <Controls:FlipView.Items> <Grid> <Grid.Background> 
               <ImageBrush ImageSource="APPIMages/Sin títasulo-1.png"/> 
               </Grid.Background> </Grid> <Grid> <Grid.Background> 
               <ImageBrush ImageSource="APPIMages/Sin título-1.png"/> 
               </Grid.Background> </Grid> </Controls:FlipView.Items> 
               </Controls:FlipView>  

Comentarios

  1. Me parecen genial estos controles, me gusto mucho el del Flyout para poner las cosas de configuraciones, solo que no muestras una vista previa del FlipView, por lo demas todo genial :)

    ResponderBorrar

Publicar un comentario

Entradas más populares de este blog

Crea Aplicaciones Movil Sin Saber Programar

Why bitcoin is rasing?