WinRT Tip: Cómo crear imágenes circulares

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#

Pages