/ / Шукаю відтворення певних властивостей CSS в WPF (box-shadow, border-radius, text-shadow) - c #, css, wpf

Потрібно відтворити певні властивості CSS у WPF (box-shadow, border-radius, text-shadow) - c #, css, wpf

Я шукаю, щоб створити сторінку гарячих клавіш у WPF, де явідображати графічне представлення всіх доступних гарячих клавіш у моєму додатку. Замість того, щоб використовувати іконки, тому що я не можу знайти хороший набір, який включає ключ Home, наприклад, я хотів би використовувати подібний стиль, як StackOverflow.

Я намагаюся скопіювати та застосувати такий стиль:

F4

CSS це:

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;
}

Я не можу знайти спосіб відтворити тінь коробки (особливо дві), кордон-радіус і текст-тінь.

Крім того, якщо хтось знає хороший повний набір іконок для клавіш клавіатури, який буде працювати.

Наразі є:

<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>

поточний вигляд

Відповіді:

1 для відповіді № 1

Спробуйте це:

<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>