es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Sombra interior WPF con radio de esquina

16 Jul, 2023 Programación

Estoy tratando de imitar el comportamiento de las sombras interiores con esquinas redondeadas en WPF.

He intentado jugar con diferentes combinaciones de DropShadowEffect, SystemDropShadowChrome de los temas de Windows y máscaras de opacidad personalizadas, pero todas mis soluciones están lejos del efecto de sombra deseado 🙁

Sólo un borde con esquinas regulares para empezar:

<border width="100" height="50" cornerradius="30" borderthickness="1" borderbrush="Green" background="White">
    <border.effect>
        <dropshadoweffect shadowdepth="0" blurradius="5" color="Blue"></dropshadoweffect>
    </border.effect>
</border>

Lo que estoy tratando de lograr:

<div class="shadow-div"></div>
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Desafortunadamente, replicar una sombra de borde redondeado con CSS en WPF no es sencillo, ya que involucra una combinación de varios efectos.

    Una forma de lograr esto podría ser utilizar una combinación de DropShadowEffect y GradientStop para simular el borde de la sombra. Aquí tienes un ejemplo:

    <border width="100" height="50" cornerradius="30" borderthickness="1" borderbrush="Green" background="White">
    <border.effect>
        <dropshadoweffect shadowdepth="0" blurradius="5" color="Blue" opacity="0.5" direction="0"></dropshadoweffect>
    </border.effect>
    <border.opacitymask>
        <lineargradientbrush startpoint="0,0" endpoint="0,1">
            <gradientstop offset="0" color="White"></gradientstop>
            <gradientstop offset="0.1" color="Transparent"></gradientstop>
            <gradientstop offset="0.9" color="Transparent"></gradientstop>
            <gradientstop offset="1" color="White"></gradientstop>
        </lineargradientbrush>
    </border.opacitymask>
</border>

    Este enfoque implica establecer la propiedad OpacityMask del Border como un LinearGradientBrush que tiene cuatro gradient stops. El primer y último stop se establecen en blanco para simular el borde de los bordes redondeados. El segundo y tercer stop se establecen en transparente para permitir que se vea la sombra.

    Puedes ajustar las posiciones y colores de los gradient stops para afinar aún más el efecto de sombra.

Comments are closed.