WinRT Tip: Cómo crear imágenes circulares

jueves, 23 de abril de 2015


En el anterior artículo vimos cómo crear imagenes circulares en Android, que esta bastante de moda en el diseño de aplicaciones web y móbiles, ahora vamos a ver como podemos realizar lo mismo en WinRT, la solución que vamos a ver aplica tanto para aplicaciones Windows Phone 8.1 como a Windows 8.1 .

Ejemplo

En WinRT a diferencia de Android podemos crear una imagen circular sin escribir ni una sola de linea de código C#, solo escribiendo Xaml.

Si quisieramos mostrar una imagen normal sin ningun tipo de redondeo utilizamos un control image asignando la imagen en la propiedad source:
<Page
    x:Class="CircularImageExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CircularImageExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Image Height="300"
               Width="300"
               Source="images/image.jpg"
               VerticalAlignment="Center"
               HorizontalAlignment="Center">
        </Image>
    </Grid>
</Page>


El resultado sería este




Si quisieramos hacer la imagen circular, en lugar de utilizar una control Image, utilizamos un Ellipse y como propiedad Fill asignamos un ImageBrush con la imagen, si queremos que se vean bien tanto imagenes cuadradas como imagenes rectangulares en la propiedad Stretch debemos asignar el valor UniformToFill:
<Page
    x:Class="CircularImageExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CircularImageExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Ellipse Height="300"
                 Width="300"
                 VerticalAlignment="Center"
                 HorizontalAlignment="Center">
            <Ellipse.Fill >
                <ImageBrush  ImageSource="images/image.jpg"  Stretch="UniformToFill"/>
            </Ellipse.Fill>
        </Ellipse>
    </Grid>
</Page>


El resultado es este

Resumen

Hemos visto lo sencillo que es crear imágenes circulares en WinRT para aplicaciones Windows Phone 8.1 y Windows 8.1 utilizando el control Ellipse, además no ha sido necesario escribir código C# como si ocurre en Android que es necesario para hacer lo mismo escribir código Java.

Libros relacionados

Windows 8.1 Apps with XAML and C# Unleashed

Pro Windows 8.1 Development with XAML and C#

No hay comentarios:

Publicar un comentario