/ / Buscando reproducir ciertas propiedades CSS en WPF (cuadro-sombra, borde-radio, texto-sombra) - c #, css, wpf

Buscando reproducir ciertas propiedades CSS en WPF (cuadro-sombra, borde-radio, texto-sombra) - c #, css, wpf

Estoy buscando crear una página de teclas de acceso rápido en WPF dondeMostrar una representación gráfica de todas las teclas de acceso rápido disponibles en mi aplicación. En lugar de usar iconos porque no puedo encontrar un buen conjunto que incluya la tecla Inicio, por ejemplo, me gustaría usar un estilo similar a StackOverflow.

Estoy tratando de copiar y aplicar el siguiente estilo:

F4

El CSS es:

kbd {
padding: 0.1em 0.6em;
border: 1px solid #CCC;
font-size: 11px;
font-family: Arial,Helvetica,sans-serif;
background-color: #F7F7F7;
color: #333;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px #FFF inset;
border-radius: 3px;
display: inline-block;
margin: 0px 0.1em;
text-shadow: 0px 1px 0px #FFF;
line-height: 1.4;
white-space: nowrap;
}

Parece que no puedo encontrar una manera de reproducir la sombra de cuadro (especialmente dos), el radio de borde y la sombra de texto.

Alternativamente, si alguien conoce un buen conjunto de iconos para las teclas del teclado que funcionen.

Actualmente tenemos:

<Border BorderThickness="1" CornerRadius="3" Background="#FFF7F7F7"
HorizontalAlignment="Center" VerticalAlignment="Center">
<Border.Effect>
<DropShadowEffect ShadowDepth="1" BlurRadius="3" Color="#33000000" Direction="270"/>
</Border.Effect>
<Border BorderThickness="1" CornerRadius="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Border.Effect>
<DropShadowEffect ShadowDepth="1" BlurRadius="3" Color="#FFFFFFFF"/>
</Border.Effect>
<TextBlock Padding="1.1 6.6" FontSize="11" FontFamily="Arial,Helvetica,sans-serif" Foreground="#FF333333">HOME</TextBlock>
</Border>
</Border>

mirada actual

Respuestas

1 para la respuesta № 1

Prueba esto:

<Border HorizontalAlignment="Center" VerticalAlignment="Center"
Background="#FFF7F7F7"
BorderThickness="1" BorderBrush="#FFCCCCCC" CornerRadius="3">
<Border.Effect>
<DropShadowEffect ShadowDepth="1" BlurRadius="0" Direction="270" Opacity="0.2"/>
</Border.Effect>
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
BorderThickness="2" BorderBrush="White" CornerRadius="3">
<TextBlock Padding="1.1 6.6" FontSize="11" FontFamily="Arial,Helvetica,sans-serif" Foreground="#FF333333">
<TextBlock.Effect>
<DropShadowEffect BlurRadius="0" Color="White" Direction="270" ShadowDepth="1"/>
</TextBlock.Effect>
HOME
</TextBlock>
</Border>
</Border>