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.

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

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 🙂