Bordes redondos ListView Universal Windows App

Ya aprendimos a crear un borde redondo en IOS y Android, nos falta Windows y acá es un poco más sencillo, para continuar se recomienda tener conocimientos previos del uso de ListView.

bordes redondos listview.PNG

Para lograr el efecto lo que debemos hacer es colocar nuestro Data Template dentro de la clase Border y establecer un valor a la propiedad CornerRadius.

Supongamos que tenemos el siguiente Data Template para desplegar una imagen y un TextBlock a la derecha de ésta ambos centrados verticalmente

borde cuadrado.PNG

El código sería el siguiente


        <StackPanel 
            Background="#199CE3" 
            Orientation="Horizontal" 
            Height="130" >

            <Image 
                Height="50" 
                Width="50" 
                Source="Assets/settings.png" 
                Stretch="UniformToFill"
                Margin="10,0,10,0"/>

            <TextBlock 
                Text="Título" 
                Width="350" 
                TextTrimming="WordEllipsis"
                VerticalAlignment="Center" 
                Foreground="White"
                FontSize="18"/>

        </StackPanel>

Vamos a abrir una clase Border antes del Stack Panel y la cerramos después de la etiqueta de cierre del Stack Panel.

Observemos que le establecemos el valor de CornerRadius en 15, sin embargo ustedes pueden ajustarlo al gusto


            <Border 
                Width="Auto" 
                Height="Auto" 
                Margin="5"
                Background="#199CE3" 
                CornerRadius="0">

                <StackPanel 
                    Orientation="Horizontal" 
                    Height="130" >

                    <Image 
                        Height="50" 
                        Width="50" 
                        Source="Assets/settings.png" 
                        Stretch="UniformToFill"
                        Margin="10,0,10,0"/>

                    <TextBlock 
                        Text="Título" 
                        Width="350" 
                        TextTrimming="WordEllipsis"
                        VerticalAlignment="Center" 
                        Foreground="White"
                        FontSize="18"/>

                </StackPanel>
            </Border>

Ahora si ejecutamos la aplicación obtendremos un borde redondo en los elementos del ListView, en Github pueden encontrar un ejemplo 🙂

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s